jQuery Slideshow in Sharepoint 2010 using CQWP

This is a solution to create a jQuery slideshow (carousel) in Sharepoint 2010. It is based on an image library, and uses the tinycarousel jQuery plugin.

Page Content

This is a solution to create a jQuery slideshow (carousel) in Sharepoint 2010. It is based on an image library, and uses the tinycarousel jQuery plugin. You should end up with something like this:

Skip to the section you need:
1. Column Settings
2. Page Layout
3. itemstyle.xsl
4. the CQWP
5. jQuery + CSS

Column Settings

Audience targeting: ON (so only some images can be seen by some people)

Extra Columns:

• Link to Page (single line of text)
  for the destination url the image should link to
• Ad Category (Choice)
  this is so we can style the icon next to the caption based on the image category
• Start Date (Date & Time)
  when the image should start displaying
• End Date (Date & Time)
  when the image should stop displaying
• Target Audiences (Audience Targeting)
  automatic column added when audience targeting is enabled

Page Layout

Create a page layout called “Slider” (or whatever you want).

Note:It’s necessary to use a custom page layout for this slideshow because we need to wrap the Content Query Webpart and call our custom jQuery.

Layout your page like this:

<div id="slider-code">

< a class="buttons prev" href="#"></ a>

<div class="viewport">

//insert CQWP here

</div>

< a class="buttons next" href="#"></ a>

</div>

Create a new style in itemstyle.xsl

This is super simple. Create a new style named “adverts” (or whatever).

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

Then we’ll want to pull in the image, and wrap it in a link that goes to the URL we gave it.

	<a href="{@LinktoPage}">
	<img src="{@FileRef}"/>

</a>

Next, create a variable called “category”. We’ll pass this into the field that displays the icon based on the category of the picture (in my case, news, announcement, or calendar item).

<xsl:variable name="category">

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

</xsl:variable

Next we’ll put the caption below the image, calling the variable we just created.

<div class="caption">

<img src="/Style Library/images/{$category}.jpg"/>

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

< a href="{@LinktoPage}">Read More</ a>

</div>

Make sure to close your template.

</xsl:template>

See my final image below if it helps to put it all together:

The Content Query WebPart

The first set of settings for the CQWP are as follows:

Content Type
Show items of the “Document Content Types” group, and show items that have “picture” as the content type.

Audience Targeting
Make sure to enable audience filtering and include items that are not targeted. See the image below.

Additional Filter
Set the Start Date to “less than or equal to” [Today]
Set the End Date to “greater than or equal to” [Today]

This will show only items that are “active” today. See the image below.

Styles & Fields to Display
Set the item style to “adverts” (the xsl style we just created).

Set the fields according to the columns “Title”, “Ad Category”, and “Link to Page”. You can leave “FileRef” blank. See the image below.

jQuery & CSS

Last but definitely not least, let’s put the jQuery scripts in that make everything run. And then style everything with CSS.

In your page layout, add an ASP:Content placeholder like this (don’t forget to close it)

<asp:Content ContentPlaceholderID="PlaceHolderAdditionalPageHead" runat="server">

Within that placeholder, put the following script:

<script src="/Style Library/scripts/jquery.tinycarousel.min.js" type="text/javascript"></script>

<script type="text/javascript">

$(document).ready(function(){

$("#slider-code").tinycarousel({animate:true, duration:900, interval:true, intervaltime:5000});

});

</script>

This assumes you have the standard jquery script already loaded in. As you can see, the settings for tinycarousel are very simple once you have the plugin linked in. Just make sure the id of “slider-code” indeed matches the id of the div you have wrapped your CQWP in.

the CSS

You can copy the css from below, or just click here to download my CSS file.

/**** Slideshow Carousel *****/

#slider-code {

        height: 325px;

        overflow: hidden;

        position: relative;

        width: 540px;

        margin-bottom:10px;

}

#slider-code .viewport {

        float: left;

        width: 540px;

        height: 325px;

        overflow: hidden;

        position: relative;

        display: block;

}

#slider-code .buttons {

        display: block;

        width: 50px;

        height: 50px;

        position: absolute;

        left: 0;

        top: 0;

        z-index: 50;

        text-indent: -9999px;

        color:#fff;

        border:1px solid #ccc;

}

#slider-code .next {

        left: auto;

        right: 0;

        background: #fff url(images/rightarrow.jpg) no-repeat center center;

        }

#slider-code .prev {

        background: #fff url(images/leftarrow.jpg) no-repeat center center;

        }

#slider-code .disable { visibility: hidden; }

#slider-code .dfwp-list { list-style: none; position: absolute; padding: 0; margin: 0; left: 0; top: 0; }

#slider-code .dfwp-list li.dfwp-item { float: left; margin: 0px; padding: 0px; height: 335px; border: 0px solid #dcdcdc; width: 540px;position:relative;overflow:hidden;}

#slider-code .dfwp-list li.dfwp-item .caption {

        display:block;

        color:#666;

        float:left;

        font-weight:normal;

        margin-top:10px;

        width:540px;

        margin-right:0px;

        height:50px;

}

#slider-code .dfwp-list li.dfwp-item .caption a {

        color:#005baa;

}

#slider-code .dfwp-list li.dfwp-item .caption img {

        width:30px;

        height:30px;

        margin-right:10px;

        float:left;

        background:#fff;

        }