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