Click here to Skip to main content
Click here to Skip to main content
Technical Blog

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

, 19 Sep 2012 CPOL
Rate this:
Please Sign up or sign in to vote.
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. <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. <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)

Share

About the Author

Khurram Punjwani
Software Developer (Senior)
Pakistan Pakistan
Khurram Punjwani is a passionate .NET / SharePoint Consultant who specializes in delivering extensible solutions using agile methodologies.
Follow on   Twitter   Google+

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.141220.1 | Last Updated 19 Sep 2012
Article Copyright 2012 by Khurram Punjwani
Everything else Copyright © CodeProject, 1999-2014
Layout: fixed | fluid