Wednesday, April 21, 2010

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 :

A much better look, don't you think?

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.

image

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

clip_image001

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

clip_image002

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:

Fancybox, SharePoint and IE8. Needs some fixing

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:


Fancybox, SharePoint and IE8. A match fixed !

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.

22 comments:

PACMAN said...

Seems amazing !!!!
Inside the source code, there is some html tag left, check the js and css URL.
Is there any way to evoid uploading js and css on SharePoint by using Google repository, ex :
- http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js
- http://code.google.com/p/yii/source/browse/trunk/framework/gii/assets/js/fancybox/jquery.fancybox-1.3.1.pack.js
- http://code.google.com/p/yii/source/browse/trunk/framework/gii/assets/js/fancybox/jquery.fancybox-1.3.1.css

Joe said...

Hi PACMAN,

Thanks for the input, the JS and CSS urls are fixed.

I agree, using CDNs are really great but your users needs to have access to the internet and these files shall not be filtered by your client proxy. Moreover some clients provides really poor bandwidth for their users to access the internet.

Anyway, I think that for an internet site CDN are a must. I am actually using google's to provides the jquery file on my blog :)

For people fearful of Google, Microsoft is also providing a CDN for common files see, ScottGu's blog (http://weblogs.asp.net/scottgu/archive/2009/09/15/announcing-the-microsoft-ajax-cdn.aspx).

Chris said...

Hi Joe !
What a nice post ! Can you package your awesomizing stuff into a WSP file and propose it as a feature so we can enable it for each web we want to (and for each Picture library, of course).

Thank you.

Joe said...

Hi Chris,

Awesome idea, it would be nice. Yet I got to admit that while it's not such a daunting task it's still a bit of work. Moreover I don't know what fancybox and jQuery licenses would allow me to do.

Joe

Carlos said...

Hi Jonathan,

Great Blog, congratulations.

I follow the ABC, but I have no result in my sharepoint library... there is neccesary change or add some code?

Greets!

Joe said...

Hi Carlos,

Thanks.

I would recommend you to use a JavaScript debug tool (the IE 8 Dev Tools are a great options as they are embedded and best reflect what happens on your IE users).

First, you need to make sure that no errors appear in the console. Then with a breakpoint ensure that th line
if($(this).attr('alt') == 'Image')
is reached.

Is it?

Joe

Carlos said...
This comment has been removed by the author.
Carlos said...

Hi again Jon, thanks for your support!

It's all complete and all right.

But I'm confused beacause I don't know what part of the code is neccesary replace with the urls of my list or urls of my pictures...

Thanks!

Joe said...

Hi Carlos,

I am hearing you right, it is now working ?

This component doesn't need a list to be configured, just put the code on the display form of the Picture Library and you shall be all set.

Joe

Carlos said...

Hi again Jon!

Tha script is working, so many thanks for your help, and specially for your patience! ;)

Greets!

eacioban said...

Hi Joe
I tried the following in my sharepoint site but I doesn't do anything.
IE8 dev tools highlight the entire code and show an "Object Needed" error.

Where am I wrong?

Claus said...

Does this work only for Moss? I've tried it in our WSS 3.0 environment and nothing happens. I've also replaced the library links with CDN's to make sure I'm not dealing with wrong paths for the js and css files.
Thanks!

Joe said...

Hi Claus,

I can't see why it wouldn't work for WSS 3.0.

Are you sure that :
- your include from the CDNs are working ?
- the code you pasted in your page is reached ?

Jo

Claus said...

I used the CDN's from PACMAN's comment on the top of this blog. I'm not sure how to test if the code is reached. We are using IE6 and Firefox.
Thanks again!

Joe said...

Claus,

The last two links (Fancybox JS and css) aren't really from a CDNs, it's actually a source control platform. Anyhow, if you want to use it, you shall point to the files not the web page by using the "View Raw file".

Thus replacing the last two urls with :
http://yii.googlecode.com/svn/trunk/framework/gii/assets/js/fancybox/jquery.fancybox-1.3.1.pack.js

http://yii.googlecode.com/svn/trunk/framework/gii/assets/js/fancybox/jquery.fancybox-1.3.1.css

Be carefull not to mix the JS and CSS reference.

Din't you have any script error with your previous setup ? IE6 probably complained about the Javascript file being a bit rubbish, didn't it ?

Regards,
Jo

Claus said...

I replaced the two links per your advice but still no luck.
I don't see a debug feature in our IE6, it just shows "javascript:ClickThumbnail(1)" when I hover over the pictures. When I click on them, they open as usual in the DispForm.aspx page. I've tried mozilla and firebug tells me "No Javascript on this page

If script tags have a "type" attribute it should equal "text/javascript" or "application/javascript"
"

Joe said...

Claus,

The type attribute should be text/javascript indeed.

The "No javascript on this page" message is most peculiar as some javascript is found on most pages. Are you using a custom master pages ?

I would recommend you to :
- upgrade to IE8 or 9
- browse to your page
- open the IE Developer Tools
- Set a breakpoint on the "$(document).ready(function() {" line
- Cross your finger and hope it is reached :)

Jo

EricJtcb said...

Jonathan,

Thanks for a great post but I'm having some trouble making it work. I'm searching the source from a standard OOB "All pictures" view of a Picture Library (MOSS 2007) and don't see anything with a ".thumbnail" class. The selector doesn't find anything to replace so the magic doesn't happen. What did I miss?

EricJtcb said...

I did some more digging and found my problem. I was wrong about the selector not finding the thumbnails. The "if" was looking for an "alt" value of "Image". I changed that to "Picture" and everything works as described.

Kousalyaa Chandrasekar said...

Hi Joe,

Its an eexcellent post which i exactly looking for. You saved my time a lot.

Everything is working fine for able to display the picture, previous,next and close.

But the background color is not transparent (grey) as u shown in the blog.
It stops in the top around 10px.


Thanks & Regards,
Kousalyaa C

Kousalyaa Chandrasekar said...

Hi Joe,
Will this work in SP2010?

mihalych said...

JFYI - a solution for thumbnails preview in SharePoint 2010/2013:
It allows to generate preview in SharePoint libraries both for images and files (.doc, .xls, .pdf, etc).