Introduction

For use in Microsoft Windows SharePoint Services (WSS) 3.0, this Picture Thumbnails Web Part displays images from a SharePoint Picture Library in a widget-like thumbnail layout (see Figure 1). When a user clicks on a thumbnail, the original image opens up Lightbox style on top of the darkened page (see Figure 2).

Background

For images stored in a SharePoint Picture Library, thumbnails are generated by referencing the Url /<Picture Library Url>/_t/<Image Name>_<Image Extension>.jpg. This URL is stored in field EncodedAbsThumbnailUrl. However the thumbnails are too big for my liking. Instead of using some custom HTTP handler to generate thumbnails of smaller size, I decided to use the thumbnails as they are but use them as CSS background images. This way I can control the "apparent" thumbnail size by sizing the block element associated with the background image, thereby avoiding any aspect ratio issue of just resizing the thumbnail images directly.

Next I would like to have some Dynamic HTML or Ajax functionality to view the original image when user clicks on a thumbnail. Lightbox style preview looks very cool to me. There are many implementations or variations of Lightbox and I settled on using Litebox because of its compact size and relatively small number of supporting files.

Description

PictureThumbnailsWebPart functions as a wrapper by calling custom web control PictureThumbnails. This design allows developer the option to add the web control directly to a master page or a publishing page layout where Web Parts are not allowed. The Web Part has the following public properties:

SiteUrl - (Site Url) Server relative URL of the site. If left blank, current site is used.

ListName - (Picture Library Name) Name of a Picture Library in the current site.

SortField - (Sorting Field) Available options are Name, Title, Created and Modified.

SortOrder - (Sorting Order) Available options are Ascending, Descending and Random. When Random is selected, SortField will be ignored.

RowLimit - (Maximum Number of Pictures) Default is 0, which means no limit.

ShowAsImageSet - (Group Images into a Single Set) Default is false. If set to true, all images will be treated as part of an image set in Litebox, allowing previous and next navigation during preview.

CssClassPictureThumbnails - (CSS class)

The Lightbox functionality is provided by Litebox and requires a number of supporting files:

litebox-1.0.js, moo.fx.js, prototype.lite.js.

These Javascript files are treated as Embedded Resources in Visual Studio. In code, they are referenced using Page.ClientScript.GetWebResourceUrl, passing in the files in the form of [Assembly of project].[Folder containing resource].[Filename of resource]. In AssemblyInfo.cs, include each of these files in the same format. For example:

These images are treated as Class Resources. In code, the path to Class Resource files is obtained by calling SPWebPartManager.GetClassResourcePath. Since the project assembly is deployed to GAC, the path will be something like /_wpresources/QuestechSystems.SharePoint/1.0.0.0__ce574b585167cfb8/. To package Class Resource files for deployment in a Solution, include them in Manifest.xml like:

You can find them in the Styles directory within the SharePoint project. lightbox.css is customized from the original Litebox module to reflect the directory path of Class Resource images. If you recompile the supplied Visual Studio project with your own strong name key file, you would need to update these paths. (Do a global find in the entire Visual Studio solution to replace all other values affected.) picturethumbnails.css is not part of Litebox but is required for the widget/thumbnail look and feel as shown in the screenshots above.

The Web Part also uses a resource file to store all messages and property attribute UI strings. It demonstrates how to develop a custom class that inherits WebDescriptionAttribute, WebDisplayNameAttribute or CategoryAttribute and returns a localized string from your own Resource Manager.

The supplied Visual Studio 2008 solution includes all the support files you need to build and deploy this Web Part, minus strong name key files (*.snk). It contains three projects: Deployment, Features and SharePoint. The SharePoint project contains source codes for the Web Part and the web control. The Features project contains all the features to support the SharePoint project. The Deployment project contains a pre-build script to aggregate all the files needed for deployment. It contains a Solution directory where a WSP file is generated and deployed by a post-build script.

This structure of Visual Studio solution and projects is scalable to full blown MOSS/WSS development and deployment. You could add additional projects like SharePoint.Publishing for MOSS publishing development or SharePoint.ApplicationPages for customization of administrative layout pages. Within your projects, you could have other custom components like user controls, custom fields, feature receivers, etc.

Installation

Go to SharePoint Central Administration/Operations/Global Configuration-Solution Management. Deploy the installed solution to selected web applications. In the site collection where the solution is deployed, activate the Site Collection Feature Questech Systems Picture Thumbnail Web Part. After that, the Picture Thumbnails Web Part (listed under Questech Systems) should be available for you to add to pages.

As mentioned, the Lightbox functionality depends on lightbox.css and picturethumbnails.css. If you have a custom CSS file for your site already, you could just copy the content out from the two files and paste it into your custom CSS. If you do not have a custom CSS file, you would need to either add it through the SharePoint UI Site Settings interface or insert it in your custom master page or page layout (for MOSS). Tips: You can control the number of thumbnails shown per line by adjusting the width of the Web Part.

References

History

V1.2 - 2009.05.22

Converted Visual Studio solution projects to version 2008

Added SiteUrl property

New SharePoint Solution QuestechPictureThumbnails.wsp and assembly QuestechSystems.SharePoint.PictureThumbnails.dll. This allows my other sample solutions in CodeProject to co-exist with this Web Part.

Renamed Feature from QuestechWebParts to QuestechPictureThumbnailsWebPart

V1.1.1 - 2008.09.08

Fixed missing litebox images when web part is added to some sub-sites

V1.1 - 2008.09.08

Fixed missing thumbnail images when web part is added to some sub-sites

Comments and Discussions

thumbnails dose not show in IE , and it only shows Li's circle,
but in FF11 it shows thumbnails in a single row and repeat the thumbnail and also shows Li's circle.
i have Add style to page, scripts are loaded in page as i can see in firebug.
any one got idea?

Hi - OK, I successfully managed to deploy the solution (using the prebuild and postbuild batch files) and then made the additions of lightbox.css and picture thumbnails.css to sharepoint's core.css file. The webpart displays with the thumbnails BUT, a large grey shadow appears over half the browser window and covers the webpart. The "shadow" is that dark grey "blanket" that appears behind the pic when you select a thumbnail and immobilizes all the items behind it. I'm guessing that the webpart can't reach the javascript files (litebox, moo, prototype). When I remove litebox.css from core.css, then the webpart displays the thumbnails fine BUT, then the litebox javascript doesn't work and doesn't display the pics as a popup - just as a regular jpg on a blank page.

Is it possible to make the thumbnails in this web part running marquee? Just thought it would be nice if I'm going to have more than 10 pictures in the library and I don't want the web part to display lines of thumbnails. Thanks.

I've added a Silverlight application via the Page Viewer Web Part into a Web Part Page where this WSS Picture Thumbnails Web Part is also found.

The "lightbox" functionality still works, but everything sits behind the Silverlight app. That is, I can see the bigger version of the image after clicking the thumbnail, except for the areas where the Silverlight app is on my page. It's as if the Silverlight app is pasted over-top of everything else.

I have tried adding a z-index property to the css of the "lightbox" class, but to no avail.

What is it about Silverlight that forces it to be "on top" of everything else - and how can I change this? It would be a shame to get rid of one of the parts of my page.

-=Edit=-
After some Googling I've found that changing the windowless property of the Silverlight app from false to true fixes my problem

Great web part! But when we use a picture library that contains over 10 images, the web part page unfortunately does not load properly under IE6. A blank screen will appear or the page starts to load but crashes at some point; sometimes without user interaction, sometimes after things like scrolling or resizing the window.
As long as we stick to a maximum of 10 images, IE6 will do fine. IE7+ and Mozilla work perfectly, no matter how many images.
Setting the configuration setting 'Maximum Number of Pictures' from 0 to any other number won't do the trick either. Any suggestions?

Great Webpart, thank you. Is there anyway to display the name or title of the photo with the preview? Also would be nice to display the url of where the photo is located, because I am pulling from a photo library that has multiple folders within it. Are either of these possible? Thank you.

Within PictureThumbnails.cs update param {4} of the following line to control what is displayed
itemHtml = String.Format(@"<li style=""background-image:url('{0}')""><a href=""{1}/{2}"" rel=""lightbox{3}"" title=""{4}"">{4}</a></li>", thumbnailUrl, siteUrl, pictureItem.Url, galleryOption, SPEncode.HtmlEncode(pictureItem.Title));

I did the simple deploy (with out changing any of the code) and added the css files to the Styles library. when I' the user logged on it all looks good and cool but when any other user is logged on all they see is a list of thumbnails with no images
anyone have an idea why this might happen?

Thanks a bunch for this great webpart. I would like to have a folder wise thumbnail display of the picture library. How do get this done?. Also the litebox feature doesn't work fully meaning when i click on the image it shows the loading image and thats it.

Hi, pretty webpart and most of all practical. I´m having trouble in IE7, using ypur webpart in MOSS2007, when you're watching the gallery, rolling over the thumbnails, they grew up and all the images below that one move 2 or 3 places over to the rigth and down. But it only happens in IE7 i've tried in FireFox, Safari, and no problem!!!... Can you think of a reason for this to be happening?