SharePoint Events

 11/18/15 - Webcast: Collaborative Project & Program Management for the AEC & Facilities with SharePoint & Office 365
 11/19/15 - Webcast: Easily Design, Brand and Enhance the User Experience of SharePoint and Office 365
 12/01/15 - Webcast: Legal Matters Management in SharePoint & Office 365
 12/02/15 - Webcast: Easily and Cost Effectively Migrate to Office 365 and the Cloud
 12/03/15 - Webcast: AEC and Facilities Document Control with SharePoint & Office 365 (RFI/Transmittal/Submittal Management)
 12/04/15 - Webcast: Drive User Adoption & Search with Automated Metadata in SharePoint
(More Links...)

 SharePoint Videos

 What’s Coming in Office 365 & SharePoint 2016
 Automating Contract Management with Workflow in the Cloud or On-Premise
 Manage Email in the Cloud or On-Premise with SharePoint & Office 365
 Governance Essentials for SharePoint 2013 and SharePoint Online
 Easily Move Email, Files and SharePoint to Office 365
 Enterprise Workflow in the cloud with SharePoint & Office 365
 Why SharePoint 2013
 SharePoint 2013 vs SharePoint Online and Office 365 Security, Compliance and eDiscovery
 Expanding the Use, Potential and Value of SharePoint and Office 365 through 3rd Party Applications
 Keys to Successful SharePoint Initiatives and User Adoption
 SharePoint 2013 vs. SharePoint Online: Workflow
 Ensure Auditability and Compliance with Advanced Workflows in SharePoint
 SharePoint 2013 vs. SharePoint Online and Office 365: Enterprise Content Management
 SharePoint 2013 vs. SharePoint Online and Office 365: Business Intelligence
 SharePoint 2013 vs. SharePoint Online: Search
 Power Business Intelligence for SharePoint Online and Office 365
 Enforce Governance with Ease in SharePoint and SharePoint Online
 Digitize Paper Driven Processes with Dynamic Web Forms in SharePoint
 Boost Performance and Eliminate Storage Limitations in SharePoint
 Out of the Box Business Intelligence and Reporting in SharePoint 2013
(More Links...)

 Archives ‭[1]‬

Opening SharePoint Links in a new window
Mail Enabled Lists vs. The Missing Windows 2008 POP3/IMAP Server 
7 Tools for SharePoint Developers
Public Facing Masterpage Techniques
How to Quickly Deploy and Activate a Timer Service to Your Site Collection
Custom SharePoint Master Page Feature with WSP Builder
Date Math with InfoPath
Enterprise Search Tricks and Tips Part 1
Populating Word Documents With SharePoint Data. Try The DIP!
Programmatic Deep Dive into Blank SharePoint Lookup Columns
1 - 10Next
Creating a Simple, Flexible Slideshow with JQuery and the CQWP

By: Omar Stewart


While sp2010 has an ootb slideshow webpart, it's somewhat limited and sometimes it just doesn't behave itself. I'm going to show you how to leverage the our good friend the Content Query WebPart to build a slideshow template  that will allow for some flexibility.


Couple of disclaimers, for the sake of brevity, I will be dropping styles in the main item template, as well as the Content Query Main template of the style library. Once you get this working, feel free to break out the item templates into your own style sheets. More importantly, BACK UP YOUR CURRENT WORK.

You will be making changes to your ItemStyle.xsl and ContentQueryMain.xsl. Just make backups of them before we do anything.


To get started, we'll upload our JavaScript to our Scripting Library. We will be adapting a simple slideshow script from Jon Raasch's blog. The script will basically look for a container <DIV> with an ID of "SlideShow" and will then turn each list item within that container div into a slide.


Any item with a class of "Active will be the currently visible slide".


So our output should look like so:


<div id="SlideShow">

<div>First Item</div>

<div>Second Item</div>

<div class="active">Third Item</div>



Here is the actual script, we'll place this in a file called CQSlideShow.js and upload it to our ScriptLibrary.


function slideSwitch() {

    var $active = $('#slideshow');


    if ( $active.length == 0 ) $active = $('#slideshow li:last');


    var $next =  $ ? $

        : $('#slideshow li:first');




    $next.css({opacity: 0.0})


        .animate({opacity: 1.0}, 1000, function() {

            $active.removeClass('active last-active');




$(function() {

setInterval( "slideSwitch()", 3000);



While we're at it, lets make ensure that The Jquery  Library is uploaded in there as well.




Next we'll have to upload our CSS to a stylesheet that the slide show can access. We'll create a new folder in the '/Style Library' called 'CustomStyles'.


Save the following in a file called Slideshow.css:









#slideshow li



top:0; left:0; z-index:8;




#slideshow {




#slideshow li.last-active {





Upload the file to the '/Style Library/CustomStyles/' Directory




Now that we have our JavaScript and CSS in place. Let’s start building our item templates. The first thing we need to do is get our items wrapped in a DIV. Let’s crack open our ItemStyle.xsl (Style Library/ XSL Style Sheets) and create a new Template. Scroll all the way down to the closing </xsl:stylesheet> tag and add the following right above it:


<!-- Begin Slideshow Template --> 

<xsl:template name="SlideShow" match="Row[@Style='SlideShow']" mode="itemstyle">

<!-- Our Slideshow Item Template Content Will Go Here -->


<!-- End Slideshow Template -->




This will add our "SlideShow" Template to the list of available templates in the Content Query WebPart Settings.


Now we need to add our actual content template. For this demonstration we will just be using a simple image,  we will ensure that everything will be wrapped in  a containing div. Lets add the following to our template:


<!-- Setup Template Variables -->

    <xsl:variable name="SafeLinkUrl">

      <xsl:call-template name="OuterTemplate.GetSafeLink">

        <xsl:with-param name="UrlColumnName" select="'LinkUrl'"/>



    <xsl:variable name="SafeImageUrl">

      <xsl:call-template name="OuterTemplate.GetSafeStaticUrl">

        <xsl:with-param name="UrlColumnName" select="'ImageUrl'"/>




<!-- Begin Template -->


      <xsl:if test="string-length($SafeImageUrl) != 0">

        <div class="image-area-left">

          <a href="{$SafeLinkUrl}">

            <xsl:if test="$ItemsHaveStreams = 'True'">

              <xsl:attribute name="onclick">

                <xsl:value-of select="@OnClickForWebRendering"/>



            <xsl:if test="$ItemsHaveStreams != 'True' and @OpenInNewWindow = 'True'">

              <xsl:attribute name="onclick">

                <xsl:value-of disable-output-escaping="yes" select="$OnClickTargetAttribute"/>



            <img class="image" src="{$SafeImageUrl}" title="{@ImageUrlAltText}" width="400">







Save / Check-In your ItemStyle.xsl .


In order to get the slideshow working, remember we have to ensure that everything will be wrapped in single div with an id of 'slideshow'. To get this done, we will have to edit the ContentQueryMain.xsl


In your ContentQueryMain.xsl we need to wrap the Main Template in an <xsl:otherwise> That way we can add new wrapper templates based on our itemtemplates.


In the ContentQueryMain.xsl, do a search for xsl:for-each select="$Rows". You will need to wrap the entire for-each in a <xsl:otherwise> . The closing </xsl:otherwise> </xsl:choose> tag should be right above the closing template

(  </xsl:template>  <xsl:template name="OuterTemplate.CallHeaderTemplate">)


You may find it a bit easier to work in an xslt editor for some of this stuff, I'm using Visual Studio.




Now right above this block, we can add <xsl:choose> and our new template that will ONLY be applied to the SlideShow Template. 





      <xsl:when test="$Rows[1]/@Style='SlideShow'">

        <!-- Begin Slideshow Wrapper-->

        <!-- StyleSheet Reference -->

<link rel="stylesheet" href="/Style Library/CustomStyles/Slideshow.css" />

          <div id="slideshow">

            <xsl:for-each select="$Rows">

              <xsl:variable name="CurPosition" select="position()" />

              <xsl:call-template name="OuterTemplate.CallItemTemplate">

                <xsl:with-param name="CurPosition" />




          <!-- End Slideshow Wrapper-->



Please make sure your references are pointing to the right location

Save and check-in the ContentQueryMain.xsl file.


We are done. Browse to any page, and add a new HTML Form WebPart. Edit the HTML source for the Form WebPart and add references to the Jquery Library as well as our CQSlideshow.js.






Now add Content Query Web Part to the page.  Expand the query options and have it point to an image library, scroll down to presentation and set the Item Template to "SlideShow".

Click ok to apply your changes, and you should now have a slideshow view of your content.














While we selected an image library in this example, you could point the query to any library. It will make a slideshow of anything contained in the item template. This is extremely flexible and very easy to customize.


Thanks for reading; I hope this has been helpful.


By: Omar Stewart



  GigWerks RSS  Gig Werks Mailing List 

 Contact Us



 On Demand SharePoint Webcast Recordings
 Upcoming Webinars
 SharePoint Resources
 Business Intelligence Resources
 Gig Werks Website

©2009 Gig Werks. All rights reserved. Privacy Policy