Click here to Skip to main content
15,867,568 members
Articles / Programming Languages / XML

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

Rate me:
Please Sign up or sign in to vote.
0.00/5 (No votes)
19 Sep 2012CPOL2 min read 11K  
Create a slideshow in SharePoint 2007.

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 plug-ins available for slideshow, we’ll be using jQuery.Popeye. You can use the following steps to use any other plug-in 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>.
  6. XML
    <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>
  7. 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.
  8. 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.
  9. 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.
  10. 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:
  11. XML
    <link type="text/css" rel="stylesheet" href="http://www.codeproject.com/Style%20Library/jQuery.popeye/css/popeye/jquery.popeye.css" media="screen" >
    <link type="text/css" rel="stylesheet" href="http://www.codeproject.com/Style%20Library/jQuery.popeye/css/popeye/jquery.popeye.style.css" media="screen" >
    <script src="http://www.codeproject.com/Style%20Library/jquery-1.7.2.min.js"></script>
    <script src="http://www.codeproject.com/Style%20Library/jQuery.popeye/lib/popeye/jquery.popeye-2.1.min.js"></script>
    <script type="text/javascript">
    <!--
    $(function(){
    $("#ppy1").popeye({
    autoslide:true
    });
    });
    //-->
    </script>
  12. 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.

Creating a jquery slideshow in SharePoint_2007 using Content Query Web Part

Hope you find this post useful, thanks for reading.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Architect
Australia Australia
Khurram Punjwani is a smart, passionate and creative SharePoint Consultant who specializes in delivering extensible solutions using object oriented design and agile methodologies. He has solid fundamental knowledge, along with an intense curiosity to learn new things and an extreme fondness for solving problems.

Comments and Discussions

 
-- There are no messages in this forum --