Awesomizing your SharePoint picture libraries in no time

Still using those plain olds SharePoint picture libraries? You know the libraries where a click on a thumbnail brings ups the DispaForm.aspx pages with details about the pics that none of your users care about. What about having your picture in your libraries shown this way instead :

Guess what, it’s as easy as ABC to enhance the way your picture libraries look like with very nice inpage popup.

The basics

To do that you need:

• jQuery, a javascript library to ease development
• FancyBox, a jQuery plugin to handle picture zoom/magnification automatically
• A Content Editor Web Part, I use this editor web part to push my JavaScript code that will
  • Change the thumbnail so that they link to the full size picture instead of the Picture detail
  • Tell fancybox to do its magic so that these regular links launches a zoom on the full size picture

A detailed walkthrough

• Get jQuery from (http://jquery.com/ )
• Get FancyBox from: (http://fancybox.net/ )
• Extract the fancybox folder from the zip you got
• Put the jQuery file and fancybox in someplace your user can access. For the sake of simplicity I am going to put these files in a document library for this walkthrough. In a real world scenario I am putting these files in the 12 using a WSP.
  • Create or open an existing document library
  • Create a JS folder (or not, I just like my stuff to be organized)
  • Push the jquery-1.4.2.min.js and fancybox folder in.

• Now you can go to your Picture Library and Edit the page (screen grabbed from a French WSS Install)

• Add a Content Editor Web Part and edit it
• Open the “Source Editor”

Paste the following code

<script type="text/javascript" src="/Documents/JS/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/Documents/JS/fancybox/jquery.fancybox-1.3.1.pack.js"></script>
<link rel="stylesheet" href="/Documents/JS/fancybox/jquery.fancybox-1.3.1.css" type="text/css" media="screen" />
<script type="text/javascript">
// Jonathan Roussel
$(document).ready(function() {
//for each IMG node children of a A node in a .thumbnail class section
$(".thumbnail a > IMG").each(function(){
if($(this).attr('alt') == 'Image')
{
// Replace thumbnail link from item page to the pic itself
var imageUrl = $(this).attr('src');
// Change http://moss/pics/_t/MyPics_jpg.jpg
// In - http://moss/pics/MyPics.jpg
// using a regular expression
imageUrl = imageUrl.replace(/((.)+)\/_t\/((.)+)_([a-z]{3})\.[a-z]{3}/gi,'$1/$3.$5');
$(this).parent().attr('href',imageUrl );
$(this).parent().attr('rel','Gallerie' );
$(this).attr('alt','');
//plugin fancybox
$(this).parent().fancybox({'cyclic':true});
}
});
});
</script>

• Press Ok and enjoy the magic of Fancybox.

The result might not yet be perfect; the two following notes shall set everything straight.

Notes 1,of missing GUI pics

The path to the pictures in the CSS might need to be modified for the pictures used by fancybox to work .
So if you don’t see any Loading, Close, Prev, Next button, open the CSS in the document library (/documents/js/fancybox/jquery.fancybox-1.3.1.css)
And replace

(src='/fancybox 

with

(src='/documents/js/fancybox

Reload the Image Library in Internet Explorer and the pics shall be there.

Note 2, of using this with IE8:

This component seems to have trouble with IE8 and SharePoint. Without a strict XHTML doctype the picture frame are messed up as you can see on the right:

As adding an XHTML strict doctype was a no go, I tried to circumvent the problem by removing the frame and setting the white frame right. Here is the result:

Not as nice as what fancybox can do (lost the gradient border) but good enough for my purpose. To get this result you will need to do these modifications in the css file (the same on you modified in note 1):

Original & Instructions	Target
#fancybox-outer replace line background: #FFF;	top:-10px !important; left:-10px !important; /*background: #FFF; */
#fancybox-inner replace line top: 0; left: 0;	top: 0 !important; left: 0 !important;
.fancy-bg add line	display: none !important;
Add at the end of the file	.fancybox-ie { background-color:#fff; }

After saving the CSS and reloading the page you should be all set and ready to receive your end user congratulations :)

Of course, this is only a start. The next step would be to have the picture retrieved by a Content Query Web Part with the fancybox magic added. It would mean losing the option to download multiple picture and it would allow for an even better rendering.