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

[sourcecode language=”html”]

/* Setup.js is where you can change settings for the plugin*/


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.


http://www.w3.org/2001/XMLSchema” xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp” version=”1.0″ exclude-result-prefixes=”xsl msxsl ddwrt” xmlns:ddwrt=”http://schemas.microsoft.com/WebParts/v2/DataView/runtime” xmlns:asp=”http://schemas.microsoft.com/ASPNET/20” xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer” xmlns:xsl=”http://www.w3.org/1999/XSL/Transform” xmlns:msxsl=”urn:schemas-microsoft-com:xslt” xmlns:SharePoint=”Microsoft.SharePoint.WebControls” xmlns:ddwrt2=”urn:frontpage:internal”>

http://www.w3.org/2001/XMLSchema” xmlns:d=”http://schemas.microsoft.com/sharepoint/dsp” xmlns:asp=”http://schemas.microsoft.com/ASPNET/20” xmlns:__designer=”http://schemas.microsoft.com/WebParts/v2/DataView/designer” xmlns:SharePoint=”Microsoft.SharePoint.WebControls”>


  • <a href={@Title}” />


  • [/sourcecode]

    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.


    3 Responses

    Add a Comment

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