How to Rotate Clickable Images from a Picture Library

A customer contacted our Solutions team this past week seeking the ability to make images from a SharePoint Picture Library rotate on a page and embed a hyperlink from a column in the Picture Library.  While this is not functionality that exists in SharePoint out-of-the-box, Bamboo Solutions offers a product called List Rotator Web Part which will allow users to achieve the desired results.  List Rotator Web Part allows you to rotate information using various animations, and includes the ability to configure a custom layout of list items data to suit your needs through custom HTML and CSS.   For more information about custom Styling of List Rotator, please see the Styling the Web Part section of our Online Documentation site.

For this particular customer's solution, we utilized the custom HTML feature of the Web Part.  Following the directions provided in the Online Documentation mentioned above, we enabled custom Styling and injected the following Source code:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" /> 
<xsl:template match="rs_data">   
<xsl:for-each select="z_row"> 
 <TABLE>       
<TR>
<TD>
<a href="{substring-before(@ows_HyperlinkForPic, ', ')}"><img border="0" src="{@ows_FileRef}" alt="{@ows_FileRef}"/></a>        
</TD>
</TR>
</TABLE>  
 </xsl:for-each> 
</xsl:template>
</xsl:stylesheet>

Note - The above code segment makes the following assumptions:

1. You are seeking to display the contents of a SharePoint Picture Library in the Web Part.
2. You have the library and Web Part in a non-Publishing site (different code is required for a Publishing site and will be explained below).
3. You have created a column in the SharePoint Picture Library of type Hyperlink.  In the above code, this column was called HyperlinkForPic.  If a different column name is used, simply substitute the name accordingly in the code.

If you are using the Web Part in a Publishing site, the structure of the site is slightly different (the home page actually exists in a library called Pages whereas in a Team site it exists outside of libraries).  In this case, the code to use would be:

<xsl:stylesheet xmlns:xsl="http://www.w3.org/1999/XSL/Transform" version="1.0">
<xsl:output method="html" /> 
<xsl:template match="rs_data">   
<xsl:for-each select="z_row"> 
 <TABLE>       
<TR>
<TD>
<a href="{substring-before(@ows_HyperlinkForPic, ', ')}"><img border="0" src="../{@ows_FileRef}" alt="../{@ows_FileRef}"/></a>        
</TD>
</TR>
</TABLE>  
 </xsl:for-each> 
</xsl:template>
</xsl:stylesheet>

Where the change is in the FileRef references.  We add a ../ to the front of the reference to retrieve the proper URL of the image.