This blog is also featured on NothingButSharePoint.com
Update: Check out the spSlider.js tutorial on how to build a custom jQuery plugin that lets your users create slideshows inside of SharePoint!
Note: This post was updated Dec. 5 to correct a few errors in the code markup.
This is a solution to create a jQuery slider (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:
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
Create a page layout called "Slider" (or whatever you want).
Note:It's necessary to use a custom page layout for this slider because we need to wrap the Content Query Webpart and call our custom jQuery.
Layout your page like this:
Create a new style in itemstyle.xsl
This is super simple. Create a new style named "adverts" (or whatever).
Then we'll want to pull in the image, and wrap it in a link that goes to the URL we gave it.
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).
Next we'll put the caption below the image, calling the variable we just created.
Make sure to close your 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:
Show items of the "Document Content Types" group, and show items that have "picture" as the content type.
Make sure to enable audience filtering and include items that are not targeted. See the image below.
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)
Within that placeholder, put the following 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.
You can copy the css from below, or just click here to download my CSS file.