Khurram Punjwani is a passionate .NET / SharePoint Consultant who specializes in delivering extensible solutions using agile methodologies. Khurram has posted 2 posts at DZone. You can read more from them at their website. View Full User Profile

10 Steps to Create an Elegant jQuery Slideshow in SharePoint 2007

10.07.2012
| 4774 views |
  • submit to reddit

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.

Creating a jquery slideshow in SharePoint_2007 using Content Query Web Part

0
Published at DZone with permission of its author, Khurram Punjwani.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Roger Sall replied on Tue, 2013/04/09 - 1:05pm

There are two that I find very useful site to download jquery.

One is Htmldriver and the other is Gibhub. I've used a lot of these site files on my site.
Currently I use the bootstrap on my website Telexfree

Junio Mousull replied on Sat, 2013/04/27 - 4:59pm

I'm looking for an elegant slide, but most are all paid. I searched some on these sites: dhea , melatonina, lipo 6 unlimited, others need some good evaluation

Junio Mousull replied on Tue, 2013/05/21 - 8:36am

JSON seems to be edging out XML as a data format for streaming APIs, but XML remains firmly in TAROT

Junio Mousull replied on Sat, 2013/05/25 - 8:46pm

Introduction of a new HyperNode interface together with several implementations, including subgraphs and access to remote database peers, lipo 6 unlimited but let's just say that I was a horse from ages eight to fourteen. Former classmates still ask me, comprar dhea "Were you that girl who drew ponies and crawled around on all fours ALL the time?" You guys dhea 100mg, I've seen a lot of horse movies.

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.