10 easy steps to create an elegant jQuery slide show in SharePoint 2007 using Content Query Web Part

Recently I’d a requirement to create a slideshow in SharePoint 2007 and content query web part is great for these types of scenarios where a list has to be query and list items are to be rendered with some HTML. There are a lot of great jQuery plugins available for slideshow, we’ll be using jQuery.Popeye. You can use the following steps to use any other plugin if you like, okay so let’s get started.

1. Download jQuery and jQuery.Popeye plugin
2. Go to Style Library, open with explorer and paste jQuery.Popeye folder from the downloaded archive along with jquery-1.8.1.min.js
3. Create a Picture Library and upload images that you’d like to be displayed in Slide Show.
4. We’ve to create a new XSL template which will generated the necessary HTML for slide show so open the site in SharePoint Designer and then navigate to All Files, Style Library, XSL Style Sheets, make copy of ItemStyle.xsl and then edit ItemStyle.xsl
5. Go to bottom of the file and paste the following XSL before </xsl:stylesheet>
   
   <xsl:template name="PopeyeSlideShow" match="Row[@Style='PopeyeSlideShow']" mode="itemstyle">
   <xsl:variable name="DisplayTitle">
   <xsl:call-template name="OuterTemplate.GetTitle">
   <xsl:with-param name="Title" select="@Title"/>
   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
   </xsl:call-template>
   </xsl:variable>

   <xsl:variable name="SafeLinkUrl">
   <xsl:call-template name="OuterTemplate.GetSafeLink">
   <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>
   </xsl:call-template>
   </xsl:variable>

   <xsl:variable name="Header">
   <xsl:if test="count(preceding-sibling::*)=0">
   <![CDATA[
   <div id="ppy1">
   <ul>
   ]]>
   </xsl:if>
   </xsl:variable>

   <xsl:variable name="Footer">
   <xsl:if test="count(following-sibling::*)=0">
   <![CDATA[
   </ul>
   <div>
   <div>
   <!--<div>
   <strong></strong>
   </div>-->
   </div>
   <div>
   <a title="Previous image">Previous Image</a>
   <a title="Enlarge">Enlarge</a>
   <a title="Close">Close</a>
   <a title="Next image">Next Image</a>
   </div>
   </div>
   </div>
   ]]>
   </xsl:if>
   </xsl:variable>

   <xsl:value-of select="$Header" disable-output-escaping="yes" />
<li>
<a>
<xsl:attribute name="href">
<xsl:value-of select="$SafeLinkUrl"></xsl:value-of>
</xsl:attribute>
<img>
<xsl:attribute name="src">
<xsl:value-of select="$SafeLinkUrl"></xsl:value-of>
</xsl:attribute>
</img>
</a>
</li>
<xsl:value-of select="$Footer" disable-output-escaping="yes" />
</xsl:template>

6. Create a new page, drop content query web part, edit web part, collapse query section, select show items from following list and select the library you created in Step 4, also select picture library as List Type.
7. Collapse presentation section and select PopeyeSlideShow as ItemStyle so that the HTML we wrote while creating XSL template in step 5 is applied while rendering images returned.
8. Now all that’s missing is to include CSS for this plugin along with including references to JavaScripts and then finally calling the plugin so let’s add this now.
9. Now again open SharePoint Designer, go to All Files, Style library and create a new js file, name it jquery.popeye.loader.js, edit it and paste the following
   
<link type="text/css" rel="stylesheet" href="/Style%20Library/jQuery.popeye/css/popeye/jquery.popeye.css" media="screen" >
<link type="text/css" rel="stylesheet" href="/Style%20Library/jQuery.popeye/css/popeye/jquery.popeye.style.css" media="screen" >
<script src="/Style%20Library/jquery-1.7.2.min.js"></script>
<script src="/Style%20Library/jQuery.popeye/lib/popeye/jquery.popeye-2.1.min.js"></script>
<script type="text/javascript">
<!--
$(function(){
$("#ppy1").popeye({
autoslide:true
});
});
//-->
</script>

10. Now edit the page which we created in step 6 and drop content editor web part so we can include jquery.popeye.loader.js. Modify the shared web part and enter /Style%20Library/jquery.popeye.loader.js in the content link box, test the link and then click ok

Now you should have something like the following image.

Hope you find this post useful, thanks for reading.

About these ads