SharePoint Photo Gallery using jQuery

One of the requests I receive many times while working with SharePoint is to create a photo gallery.   Most of the time the users are not satisfied with just a picture library.   After seeing some nice looking “lightbox” like photo galleries I decided to come up with one that would work with images stored in a SharePoint picture library.

This solution does not require any custom web part development, .NET code or files deployed directly to the SharePoint server.

Requirements
To get started you will need the following:

  1. jQuery 1.3.2
  2. PrettyPhoto jQuery plugin

Installation

  1. Create a new picture library in your SharePoint site.
  2. Create a new document library called scripts to hold the jQuery and plug-in script files.
  3. Upload the jQuery file jquery-1.3.2.min.js to the scripts document library.
  4. Create a folder in the scripts document library called images.
  5. Unzip the PrettyPhoto plug-in and copy the 4 folders located in the /images/prettyPhoto folder into the images folder of your scripts document library.   The quickest way to do this is to switch to explorer view on the scripts document library.
  6. Upload the jquery.prettyPhoto.js file to the root of the scripts document library.
  7. Before uploading the prettyPhoto.css file open it in a text editor and update all or the image references so that they point to the images in the scripts document library.   After you have made the updates,  upload the prettyPhoto.css to the root of the scripts document library.
  8. Add a content editor web part to the zone where you wish to display the photo gallery.
  9. Paste the code listed below into the source editor window of the content editor web part.   DO NOT CLICK SAVE.
    <script type="text/javascript" src="/scripts/jquery-1.3.2.min.js"></script>
    
    <script type="text/javascript" src=/Scripts/jquery.prettyPhoto.js"></script>
    
    <link href=/Scripts/prettyPhoto.css" media="screen" rel="Stylesheet" type="text/css" />
    
    <script type="text/javascript">
    
    _spBodyOnLoadFunctionNames.push("LoadPhotoListData");
    
    
    
        function LoadPhotoListData() {
    
            var soapEnv =
    
                "<soapenv:Envelope xmlns:soapenv=''http://schemas.xmlsoap.org/soap/envelope/''> 
    
                    <soapenv:Body> 
    
                         <GetListItems xmlns=''http://schemas.microsoft.com/sharepoint/soap/''> 
    
                            <listName>Photo Gallery</listName> 
    
                            <viewFields> 
    
                                <ViewFields> 
    
                                   <FieldRef Name=''EncodedAbsThumbnailUrl'' /> 
    
                                   <FieldRef Name='2012-04-10 22:09:46'FileRef'' /> 
    
                                   <FieldRef Name=''Title'' /> 
    
                                   <FieldRef Name=''NameOrTitle'' /> 
    
                               </ViewFields> 
    
                            </viewFields> 
    
                        </GetListItems> 
    
                    </soapenv:Body> 
    
                </soapenv:Envelope>";
    
    
    
            jQuery.ajax({
    
                url: "/_vti_bin/lists.asmx",
    
                type: "POST",
    
                dataType: "xml",
    
                data: soapEnv,
    
                complete: processResult,
    
                contentType: "text/xml; charset="utf-8""
    
            });
    
        }
    
        function processResult(xData, status) {
    
            jQuery(xData.responseXML).find("z:row").each(function() {
    
                var url = $(this).attr("ows_FileRef");
    
                url = url.substring(url.indexOf('';#'') + 2);
    
                var title = $(this).attr("ows_Title");
    
                if (title == undefined)
    
                    title = $(this).attr("ows_NameOrTitle");
    
                var liHtml = "<a rel=''prettyPhoto'' class=''group'' title=''" + title + "'' href=''/" + url + "''><img border=''0'' src=''" + $(this).attr("ows_EncodedAbsThumbnailUrl") + "'' alt=''" + title + "''></a> ";
    
                jQuery("#myThumbs").append(liHtml);
    
            });
    
    
    
            jQuery("a[rel^=''prettyPhoto'']").prettyPhoto({
    
                animationSpeed: ''normal'', /* fast/slow/normal */
    
                padding: 40, /* padding for each side of the picture */
    
                opacity: 0.35, /* Value betwee 0 and 1 */
    
                showTitle: true,/* true/false */
    
                allowresize: true,/* true/false */
    
                counter_separator_label: ''/'', /* The separator for the gallery counter 1 "of" 2 */
    
                theme: ''light_rounded'', /* light_rounded / dark_rounded / light_square / dark_square */
    
                callback: function() { }
    
            });
    
    
    
    
    
        }
    
    </script>
    
    
    
    <div id="myThumbs" />

  10. Review all of the script tags and make updates to the src attribute so that they are properly referencing the js files in your scripts document library.
  11. Review the link tag and verify that the hfref attribute is properly referencing the css file located in your scripts document library.
  12. In the soapEnv variable make sure the value for the <listName> node is set to the name of your photo library.
  13. In the jQuery.ajax call verify that the url property is referencing the _vti_bin/lists.asmx file for your SharePoint site.   If your sharepoint site URL is http://somesite.com/sites/mysite then the url property should be set to http://somesite.com/sites/mysite/_vti_bin/lists.asmx.

  14. Click on the Save button on the source editor window.

  15. Upload images into your new picture library.

If you have all of the files and urls properly referenced you should now see thumbnails of every photo in the library.

PhotoGallery1

Clicking on a photo will open the full size version in a nice lightbox like window.

PhotoGallery2

Note:   This method will not work if you want to have multiple photo galleries on a single page.

With jQuery and the content editor web part you can do some pretty amazing things within SharePoint!

Digg This

12 thoughts on “SharePoint Photo Gallery using jQuery”

  1. Had a problem with the slideshow.

    Added “autoplay_slideshow: true” at the end, it started “sliding” but it stayed on the same image.

    Also had a similar problem where the “next” and “previous” buttons didn””t show up. Couldn””t be a path issue as the “close” button appeared.

    thanks!

  2. With jQuery and the content editor web part you can do some pretty amazing things within SharePoint!

    I””m new with JQuery could you give me as a sample how CEWP+jQuery work to the picture gallery?

    Thanks

  3. Hey there.
    I got it to work and its great!
    The only problem I have though is that the Next and Previous buttons are not showing up.
    I checked the css file and the links seem perfect.
    Do you have any ideas?

  4. works great! How you deal with folders in the picture library?, would like to display folders then click on folder to render gallery? Got a massive picture library and need filter ability, is this possible?

  5. I haven””t tried creating a navigation system for the photos. Recenty I took the ideas from this original post and created a custom webpart that shows a configurable number of thumbnails with forward and back button paging. The web part was written so that each SharePoint site could have one photo gallery and the web part pulls from that single photo gallery list. I may write a blog post in the near future on how I accomplished this task and show some screen shots.

  6. Hi Michael, I have spent lots of time trying to create the photo album, following your steps to the dot – but there is no photo album, nor the thumbnails show up on the Content Editor webpart.

    I do have a number of questions –
    1. The valude for the node: I am assuming that I have to use ””%20”” for spaces? The script will ””find”” my photo library by just giving it the name of the library?
    2. I will just have to append the URL of my site before _vti_bin/lists.asmx and the script will find it?

    Thanks a lot!

    Amanda

    1. The value of the listname node should be the name of your photo library. If your photo library has a space in it””s name you do not need to replace it with %20.

      You are correct about the URL. Put the full path to your site that has the photo library in front of /_vti_bin/lists.asmx. Example: http://myweb/mysite/_vti_bin/lists.asmx.

  7. It does not work for me. I tested it with a simple jQuery alert message and it worked. Thus jQuery is working on my site but the script above is not. Could someone tell me something smart?

  8. Hi I’ve had some of the same problems as others. Arrows dont show up and when using slideshow option I get the same image appearing.

    Can anyone help with this?

Leave a Reply