SharePoint Events

  7/22 - Webcast: Enterprise Document Security, Tracking and Collaboration in SharePoint
  7/24 - Webcast: Enhance Collaboration and Mitigate Risk with Email and Document Management in SharePoint
  7/29 - Webcast: Regulatory and Corporate Risk Protection in SharePoint for Financial Services
  7/31 - Webcast: Workflow throughout the Enterprise for Legal Firms and Departments

 SharePoint Videos

  Why SharePoint 2013
  Keys to Successful SharePoint Initiatives and User Adoption
  Out of the Box Business Intelligence and Reporting in SharePoint 2013
  Driving the Business Case and User Adoption for SharePoint
  Automate Business Processes with SharePoint 2013 and Business Connectivity Services
  SharePoint and Office 365 Migration Made Easy
  Full Lifecycle Content Management with SharePoint 2013
  Compliant Document Generation and Assembly in SharePoint
  Application of Content Security and Corporate Risk Protection in SharePoint
  How to Redline, Markup, Collaborate and Review Content in SharePoint
  Advanced Content Lifecycle and Records Management in SharePoint
  Advanced Workflow Made Easy with SharePoint 2013 and Nintex
  Full Lifecycle Content Management with SharePoint 2013
  SharePoint 2013 Solutions for the Financial Services Industry
  ProjectReady 2013: SharePoint Solutions built for the AEC
  SharePoint 2013 Solutions for the Legal Industry
  Driving the Business Case and User Adoption for SharePoint
  Investment Considerations for SharePoint 2010 and SharePoint 2013
  SharePoint 2013 and Enterprise Content Management
  SharePoint 2013 Launch
(More Links...)

 Archives

Opening SharePoint Links in a new windowUse SHIFT+ENTER to open the menu (new window).
Mail Enabled Lists vs. The Missing Windows 2008 POP3/IMAP Server Use SHIFT+ENTER to open the menu (new window).
7 Tools for SharePoint DevelopersUse SHIFT+ENTER to open the menu (new window).
Public Facing Masterpage TechniquesUse SHIFT+ENTER to open the menu (new window).
How to Quickly Deploy and Activate a Timer Service to Your Site CollectionUse SHIFT+ENTER to open the menu (new window).
Custom SharePoint Master Page Feature with WSP BuilderUse SHIFT+ENTER to open the menu (new window).
Date Math with InfoPathUse SHIFT+ENTER to open the menu (new window).
Enterprise Search Tricks and Tips Part 1Use SHIFT+ENTER to open the menu (new window).
Populating Word Documents With SharePoint Data. Try The DIP!Use SHIFT+ENTER to open the menu (new window).
Programmatic Deep Dive into Blank SharePoint Lookup ColumnsUse SHIFT+ENTER to open the menu (new window).
1 - 10 Next
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>

</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 li.active');

 

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

 

    var $next =  $active.next().length ? $active.next()

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

 

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

 

    $next.css({opacity: 0.0})

        .addClass('active')

        .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.

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP 

 

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

{

position:relative;

width:550px;

height:280px;

overflow:hidden;

}

#slideshow li

{

position:absolute;

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

opacity:0.0;

display:block;

}

#slideshow li.active {

    z-index:10;

    opacity:1.0;

}

#slideshow li.last-active {

z-index:9;

opacity:0.0;

}

 

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

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

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 -->

</xsl:template>

<!-- End Slideshow Template -->

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP 

 

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:call-template>

    </xsl:variable>

    <xsl:variable name="SafeImageUrl">

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

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

      </xsl:call-template>

    </xsl:variable>

 

<!-- Begin Template -->

    <div>

      <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:attribute>

            </xsl:if>

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

              <xsl:attribute name="onclick">

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

              </xsl:attribute>

            </xsl:if>

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

            </img>

          </a>

        </div>

      </xsl:if>

    </div>

 

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.

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

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

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP 

 

    <xsl:choose>

      <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" />

              </xsl:call-template>

            </xsl:for-each>

          </div>

          <!-- End Slideshow Wrapper-->

        </xsl:when>

 

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.

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP 

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

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.

 

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP 

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

The_SharePoint_Blog_Creating_a_Simple_Flexible_Slideshow_with_JQuery_and_the_CQWP

 

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

        

Comments

Victoria

Good morning.
I have a question, what can I do if I don't find the << xsl:for-each select="$Rows" >> in the XSL file ??

I just want to apply jquery to a CQWP and a Content Editor WP, but I think your idea is similar and simplier.

Thank you.
at 5/24/2011 11:48 AM

Omar

Victoria,

Are you searching in the ContentQueryMain.xsl? or the ItemStyle.xsl?
at 7/14/2011 3:43 PM

Christian Ståhl

Hi guys, great stuff! I have wrote a blog about similar stuff to display cycling images with the CQWP. You'll find it here http://chrisstahl.wordpress.com/2011/08/09/image-slideshow-with-cqwp-in-sharepoint-2010/
at 8/9/2011 11:34 AM

nagaraju

Very Nice article.  Thanks for u r help.
at 5/14/2012 2:41 PM

David Wallach

How would you go about adding a text caption?
at 9/21/2012 4:35 PM

Add Comment

Items on this list require content approval. Your submission will not appear in public views until approved by someone with proper rights. More information on content approval.

Your Name *


e-mail address *


Website (optional)


Comment *


Attachments

 Subscribe

  GigWerks RSS  Gig Werks Mailing List 

 Contact Us

 Connect

 Resources

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



©2009 Gig Werks. All rights reserved. Privacy Policy