Guest Author: Christian Stahl

Image galleries have become popular within the web over the past years, and there´s a couple of cool technics that can be used for this, like jQuery, JS and Silverlight.

There´s also a lot of different kinds of plugins that can be used for this out there. One of them is Lightbox 2, a simple, unobtrusive script used to overlay images on the current page.  

It’s a snap to setup and works on all modern browsers, and it works just fine with SharePoint 2007. So how do you do that if you want to use Lightbox 2 in SharePoint and use a central Image repository with auto thumbnails, and pull images to different pages at different sites based on some category?

• First of all download Lightbox 2 v 2.04 [click here] and extract the folder. Create this subfolder hierarchy to Style Library, Scripts -> Lightbox204 -> Images. Open SharePoint Designer 2007 and your root web. Import closelabel.gif and load the .gif into the Images folder. Import all the JS files and the CSS file in the folder Lightbox204.


• Open lightbox.css and change the URL:

#prevLink:hover, #prevLink:visited:hover { background: url(/Style Library/Scripts/Lighbox204/images/prevlabel.gif) left 15% no-repeat; }

#nextLink:hover, #nextLink:visited:hover { background: url(/Style Library/Scripts/Lighbox204/images/nextlabel.gif) right 15% no-repeat; }

• Open the lightbox.js and change the URL:

fileLoadingImage:        ‘/Style Library/Scripts/Lighbox204/images/loading.gif’,  

fileBottomNavCloseImage: ‘/Style Library/Scripts/Lighbox204/images/closelabel.gif’,

• Use your browser and create a couple of site columns at the site collections root level and put all these columns in a new group. Set all these columns to require. You can follow this example:
• PixFirstName – Single line of text
• PixLastName – Single line of text
• PixFunction – Single line of text
• PixPhotograph – Single line of text
• PixPlace – Choice – checkboxes with no default value
  •  ImageBank
  •  Management
  •  Board of directors
• PixSortGroup – Choice – radio buttons with default value B
  •  A
  •  B
  •  C
• Now let´s create a new Site content type these columns. Give it the name ImageBank and set the parents to Document Content Type and Picture. Put this in a new group you can call ImageBank. After click OK and remove the columns you don’t need; Keywords, Description and Date Picture Taken. You can also set it to hidden if you prefer.
• Add all the columns you have created, click on Add from existing site columns. Select columns from ImageBank, highlight all available columns and click Add and OK.
• Click Column order, set the column order like the first step in this blog.



• Create a Picture Library at the sites root level and name it Pix, and go to the picture library settings. Click on Advanced settings, set Allow management of content types to Yes and set Display New Folder to No.
• Click Add from existing site Content types. Select the group ImageBank, and then add it and click OK.
• Click the Change new button order and default content type, and unmark the default Content Type with the name Picture. Click OK.
• Go to the Pix Library and upload some example images. For example you can have them in size 300 x 300 pixels or similar. Do not upload multiple images. Upload each one and fill in the form with some values. Set the PixPlace to ImageBank for at least one of the images and set all of the Images to the value ImageBank.
• Create a new site in SharePoint somewhere in the structure, use the template Publishing Site and name this Management. Sure, you can use an existing site if you want.

You have done everything that you will need for later on. Now the fun begins, let us open up SharePoint Designer 2007:

• Open up a site in SharePoint Designer where you want to include your Image bank. Click on File -> New and ASPX.
• Click Task Panes, Data Source Library. At the bottom of this window, click Connect to another library and Add.
• Fill in a Display name, Pix and paste the URL to the root site. Click OK twice.
• Expand Pix and SharePoint Libraries. Find the drop down and choose Show Data,



• Select the first field and choose Insert Selected Field from the button above and then choose Multiple Item View.
• Point at the little arrow on the right hand side in the Data form. Choose Change Layout and choose the second layout from the top, the one that repeats the form. Click OK twice.
• Use Split view, and mark one of the fields in the Design view. Your will now see that values are highlighted in the code view.
• Replace this:

<xsl:value-of select="@FileLeafRef" />

with this:

<a href="http://YourServer/pix/{@FileLeafRef}" rel="lightbox"><img src="{concat('/',@FileDirRef,'/_t/',substring(@LinkFilenameNoMenu,1,string-length(@LinkFilenameNoMenu)-4),'_',@FileType,'.jpg')}" alt="{@FileRef}" style="border:0px" width="50" title="{@PixFirstName} {@PixLastName}" /></a>

Be sure to use the name of your server instead of YourServer

• Now it´s time to set a sort order and a filter to the Data View. Find the arrow to the right in the Data form and choose filter. Let the field PixPlace compare to Management. Click OK.



• Then click Sort and Group. Find PixSortGroup and click Add, do the same for PixLastName. Let them both sort by Ascending order. Click OK.
• Take a look in the design view, you can for example delete the table row above the repeating XSLT code or make your own header to the table.
• Attach this page to a Masterpage. Click Format -> Master Page -> Attach Master Page. Click OK twice.
• If you want, add a new web part zone to the page and drag the Data View into the zone.
• Apply references to the Lightbox JS and Css files on the page. You can put this just below the PlaceHolderMain tag. If you like to put it in the Master Page or into a Content Editor Web Part, that is also a possibility depending on your needs.

<!--LightBox 204-->
<script type="text/javascript" src="/Style Library/Scripts/Lighbox204/prototype.js"></script>
<script type="text/javascript" src="/Style Library/Scripts/Lighbox204/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="/Style Library/Scripts/Lighbox204/lightbox.js"></script>
<link rel="stylesheet" href="/Style Library/Scripts/Lighbox204/lightbox.css" type="text/css" media="screen" />

• Save the page into the Page folder. Preview the page, go to File -> Preview in the browser and choose, for example, IE8.

Next step could be to create another page in another site. For example a common image library where all images show up, without any filter in the data view. Like the Image below you can add additional information from the Pix list, like names and their titles. And the sort order? You can use this if your CEO for some reason doesn’t like to be sorted in the same level as the rest of the employees.

If you would like to try some different settings for the overlay effects, take a look at the configuration settings in the Lightbox.js. You can change overlay opacity or the image loading speed.

I can also recommend Paul D. Fox´s article ‘How to create a Thumbnail Picture Library View in SharePoint 2007’, this article describes another way to work with Thumbnail Picture Library with SharePoint Designer 2007.

Guest Author: Christian Stahl

Christian Stahl works for Humandata as a senior SharePoint consultant & MCTS and MCP, based in Stockholm, Sweden. He has worked with SharePoint since 2003, and works mostly with architecting, customizations and branding. Besides consulting, Christian also teaches SharePoint Designer at Informator and Labcenter in Sweden. He has been a speaker at events and conferences including Humandata and Microsoft’s SharePoint Conference in Sweden, SEF. Christian is founder of the community www.sharepointdesigners.net.