Switch views using CSS and jQuery

Zoomable Photo Grid

I started on this post back in July and I am just getting around to publishing it.

The out of the box SharePoint image library is nice and offers lots of options for viewing the images. However as more and more sites begin to use jQuery plugins and other methods for presentation the SharePoint views seem limited at best.

A few weeks ago while doing some random browsing I found this photo grid plugin and decided to try to implement it in SharePoint, here is how I did it.

Add links and scripts to the page

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script src="jphotogrid.js"></script>
/* Setup.js is where you can change settings for the plugin*/
<script src="setup.js"></script>
<link href="jphotogrid.css" rel="stylesheet" media="screen" />
<!--[if IE]>
<link href="jphotogrid.ie.css" rel="stylesheet" media="screen" />
<![endif]-->

XSL Code

This is the easy part.  Each image is wrapped in an <li>tag.  The unordered list has an id of “pg” that is used to call the script. The caption for each item is wraped in a <p> tag.  The rest is handled by javascript.


<Xsl>
<xsl:stylesheet xmlns:x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" xmlns:d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" version="1.0" exclude-result-prefixes="xsl msxsl ddwrt" xmlns:ddwrt="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/runtime">http://schemas.microsoft.com/WebParts/v2/DataView/runtime</a>" xmlns:asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" xmlns:__designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" xmlns:xsl="<a href="http://www.w3.org/1999/XSL/Transform">http://www.w3.org/1999/XSL/Transform</a>" xmlns:msxsl="urn:schemas-microsoft-com:xslt" xmlns:SharePoint="Microsoft.SharePoint.WebControls" xmlns:ddwrt2="urn:frontpage:internal">
<xsl:output method="html" indent="no"/>
<xsl:decimal-format NaN=""/>
<xsl:param>'</xsl:param>
<xsl:variable>0</xsl:variable>
<xsl:template match="/" xmlns:x="<a href="http://www.w3.org/2001/XMLSchema">http://www.w3.org/2001/XMLSchema</a>" xmlns:d="<a href="http://schemas.microsoft.com/sharepoint/dsp">http://schemas.microsoft.com/sharepoint/dsp</a>" xmlns:asp="<a href="http://schemas.microsoft.com/ASPNET/20">http://schemas.microsoft.com/ASPNET/20</a>" xmlns:__designer="<a href="http://schemas.microsoft.com/WebParts/v2/DataView/designer">http://schemas.microsoft.com/WebParts/v2/DataView/designer</a>" xmlns:SharePoint="Microsoft.SharePoint.WebControls">
<xsl:call-template/>
</xsl:template>
<xsl:template>
<xsl:variable>BulTitl</xsl:variable>
<xsl:variable select="/dsQueryResponse/Rows/Row" />
<ul>
<xsl:call-template>
<xsl:with-param select="$Rows" />
</xsl:call-template>
</ul>
</xsl:template>
<xsl:template>
<xsl:param />
<xsl:for-each select="$Rows">
<xsl:call-template />
</xsl:for-each>
</xsl:template>
<xsl:template>
<li>
<img border="0" src="{@FileRef}" alt="<a href="mailto:{@Title">{@Title</a>}" />
<p><a href="mailto:{@Title">{@Title</a>}</p>
</li></xsl:template>
</xsl:stylesheet></Xsl>

I had some issues with the caption not displaying propely in IE7 but I did not have the time to find a fix.  Its always best to resize your images before you load them into SharePoint but if for some reason you don’t the plugin forces them to be the right size so vertical images may be stretched. Overall this solution would only work well in specific situations that require this type of functionality.  If you have questions feel free to comment.

Resources

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

3 thoughts on “Zoomable Photo Grid

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>