Supporters of End User
Web

Render a slideshow gallery from a SharePoint list using XSLT and ContentQueries

Item is currently unrated. Press SHIFT+ENTER to rate this item.1 star selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+ESCAPE to leave rating submit mode.2 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.3 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.4 stars selected. Press SHIFT+ENTER to submit. Press TAB to increase rating. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.5 stars selected. Press SHIFT+ENTER to submit. Press SHIFT+TAB to decrease rating. Press SHIFT+ESCAPE to leave rating submit mode.
Categories:XSLT; Javascript and jQuery; CSS; Libraries and Lists; Content Query Web Part; MOSS; WSS; 2007; 2010

 

Editor's note: Contributor BJ Wildbore is a Software Developer at Massey University. Follow him @bjwildbore

Modifying the itemStyle.xsl file in SharePoint allows us to transform boring content query lists into anything we can imagine. Here is an example of whats possible using custom itemStyles, Jquery and css.

At tutorialzine.com there is a great example of an apple styled slideshow banner. For information on how the banner works visit tutorialzine. In this post I will show you how to turn a simple SharePoint list into this slideshow.

2012-01-31-RederSlideshowGallery-01.png

Step 1: Get the files

Download the necessary files for the tutorial here

Step 2: Upload the slideshow gallery template images to your server.

In the zip file you downloaded there is a folder called "template". Inside this are a number of images that the banner css needs to use. Upload these files to your server somewhere that you can then access them via a url in your web browser.

Step 3: Add the CSS

There is another file called styles.css. Open this up and replace the *** path to *** place holders with the url paths to the images you just uploaded. Then copy and paste this css into either your master template css file or another css file that the site or page loads

Step 4: Create the list

Create a new list and call it "banner".

Add a single line of text column called "description" and a hyperlink column called "link".

Step 5: Populate the list

Go through and create 4 list items. Give them a short title,small description. Also on each item you will need to add their thumb and slide images as attachments. These images are in the zip file you downloaded in the sample slides folder. Attach the images in the "slide1 folder" to the first item and so on...

Step 6: Pass through the current row to the itemStyle.xsl

NOTE: It is best practice to never alter the standard itemStyle.xsl or ContentQueryMain.xsl files themselves. Make a copy of them and have your webpart reference the copies instead.

To output the banner gallery properly we need to make sure the ContentQueryMain.xsl passes through the current position when calling the itemStyle.xsl templates.This blog post shows you quickly and simply how to achieve this.

Step 7: Adding the banner item style

Make sure you have open your custom itemStyle.xsl. Open the banner_part_xsl.txt file and copy all the text from here and paste it into your custom itemStyle.xsl file just before the last closing </xsl:stylesheet> tag.

Step 8: Add the List to the page via a Content query web part.

Add a content query webpart to a page and click to configure it via the tool pane.
Set the source to "Show items from the following list" then browse to find the banner list you created.
Then select your banner style from the item style dropdown
In the fields to display Link box, type "link"
In the fields to display title box, type "title"
In the fields to display description box, type "description"
Click ok and then save the page.

Step 9: Admire your handywork, have a coffee, then read below for an explanation of the itemStyle xsl you added

I will quickly go over the important parts of the xsl banner item.

First we ensure the current position variable is passed in. This enables us to output the necessary javascript and outer shell of the banner slideshow once only.


<xsl:template name="banner" match="Row[@Style='banner']" mode="itemstyle">
	<xsl:param name="CurPos" />

In this part we set the width and height of the banner web part, the delay in seconds and wether it will audo scroll or not.


<xsl:variable name="slideWidth" select="470" />
<xsl:variable name="slideHeight" select="204" />
<xsl:variable name="advanceDelay" select="7" />
<xsl:variable name="autoAdvance" select="1" />

The block below gives us a useable web part id to add to the javascript that is output. We add this to certain parts of the javascript incase we want to have more than one of these on a page.


<xsl:variable name="wpid" >
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$WebPartId"/>
		<xsl:with-param name="Search"  select="'-'"/>
		<xsl:with-param name="Replace" select="'_'"/>
	</xsl:call-template>	   
</xsl:variable>


Below we get the url to the attachments folder for the list.


<xsl:variable name="ListName">
	<xsl:value-of select="substring-before(substring-after(substring-after(@FileRef,$RootSiteRef),'/Lists/'),'/')"/>
</xsl:variable>

<xsl:variable name="BaseLink">
	<xsl:value-of select="concat(substring-before($SiteUrl,$RootSiteRef),@FileRef)"/>
</xsl:variable>

<xsl:variable name="BaseAttachmentURL">
	<xsl:value-of select="concat(substring-before(@FileRef,$ListName),$ListName,'/Attachments/')" />
</xsl:variable>

The part after the $curPos = 1 statement goes through and creates a variable called "JScript". This contains a the base javascript with a number of place holder in it for the webpart id, width, height, delay and autoadvance variables.


<xsl:if test="$CurPos='1' ">
	<xsl:variable name="JScript">
		<![CDATA[

Once it has the javascript template in the JScript variable, the place holders are replaced with the variable values then it is output to the page.


<xsl:variable name="ModJScript1">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$JScript"/>
		<xsl:with-param name="Search"  select="'***WebPartID***'"/>
		<xsl:with-param name="Replace" select="$wpid"/>
	</xsl:call-template>
</xsl:variable>

<xsl:variable name="ModJScript2">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$ModJScript1"/>
		<xsl:with-param name="Search"  select="'***advanceDelay***'"/>
		<xsl:with-param name="Replace" select="$advanceDelay"/>
	</xsl:call-template>
</xsl:variable>

<xsl:variable name="ModJScript3">
	<xsl:call-template name="OuterTemplate.Replace">
		<xsl:with-param name="Value" select="$ModJScript2"/>
		<xsl:with-param name="Search"  select="'***autoAdvance***'"/>
		<xsl:with-param name="Replace" select="$autoAdvance"/>
	</xsl:call-template>
</xsl:variable>		

<script type='text/javascript'>
	<xsl:value-of select="$ModJScript3" disable-output-escaping="yes"/>
</script>

Then we output also the banner gallery shell. The javascript and shell are only output once.


<div id='gallery_{$wpid}' class='gallery' style='width:{$slideWidth}px;' >
	<div id='slides_{$wpid}'  style='width:{$slideWidth}px; height:{$slideHeight}px'><hr /></div>
	<div id='menu_{$wpid}' class='gallery-menu'><ul><li class='fbar'><br /></li></ul></div>
</div>

Then for each item we output the slide and thumbnail. The jquery script upon load goes over these and relocated them inside the gallery shell and BOOM... it should all work nicely.


<div class='slideOuter_{$wpid}'>
	<div class='slide' style='width:{$slideWidth}px; height:{$slideHeight}px'>
		<a href='{$SafeLinkUrl}' target='_blank'><img src="{$BaseAttachmentURL}/{@ID}/slide.png" /><span class='bannerMessage'><b><xsl:value-of select="@Title" /></b>
		<br />
		<i><xsl:value-of select="$caption" /></i></span></a>
	</div>
</div>	

<div class='menuItem_{$wpid}'><a href=''><img src="{$BaseAttachmentURL}/{@ID}/thumb.png" /></a></div >

2012-01-31-RederSlideshowGallery-02.jpg

This will give you a base to start from and can be modified and tidied up for your requirements

Comments

Russ

SPS2010 only?

Hi BJ, this looks like exactly what we've been looking to create..
I've tried following the instructions and get an 'Unable to display the webpart' Is this solution specifc to SPS2010 or will it work for me on 2007?
 
Sorry if these are obvious questions and assuming it should work with 2007, I did the following.
  1. I've created a custom ItemStyle.xsl and ContentQueryMain.xsl in the StyleLibrary, and added your code.
  2. Created a CQWP and referenced the banner list,
  3. Exported the CQWP and modified the path to the custom XSL then reimported.

If I cut out your banner code from the XSL the new imported CQWP works so I think I've got the custom XSL working. 

Have I missed something obvious!?
 
Thanks in advance.
Russ.

Posted 01-Feb-2012 by Russ
i:0e.t|liveid|000340018204a800@live.com

Anyone get the working on SPS2007?

Has anyone got this working on 2007?

Tenille Bennett

Excellent Post - Additional questions

Hi, Brilliant Post. I am following your post to create a visual webpart for my Sharepoint 2010 Online environment. I am creating a slideshow webpart, where images are selected from a picture library and displayed in a slideshow. I need custom properties in my web part to allow the user to select 1. to reduce the size of the images; 2. background colour; 3. Types of Transition; 4. Length of display; 5. Image Text and Description and where to put this; 6. Size of the web part (to reduce whitespace around image). I do know that I have to use J Query, XSLT and CSS to style and rotate the images, but I don't know how to get my web part properties from the web part to my XSLT and Javascript. I need the values entered by the user to be used to set the values in the javascript to control how the slideshow is executed. This is where I am stuck. I am creating everything from scratch in Visual Studio as my requirements are pretty strict. I will use custom editor properties for my web part to get the values from the user. To reduce the size of the images for the slideshow I am going to use a drop down with percentages. How can I instruct Javascript or XSLT use these values to shrink the images? How will I also instruct Javascript to control the length of display for each image, where to put the text and description from the list? Finally Is there any way through my proposed solution I can get the web part resized using the code? Then I have to package all this into a Sandboxed solution for deployment. Can you help? thanks in advance.

Posted 10-May-2012 by Tenille Bennett

Notify me of comments to this article

E-mail:
   

Add Comment

Title:

 
Comment:
Email:

   


Name:

 
Url: