Mike Hacker

As of today, June 24, 2009 I have moved my blog to Sogeti’s blog hosting at http://blogs.us.sogeti.com/mhacker.

Please update your RSS feed if you are a subscriber.

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='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[gallery]' 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.  

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

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!

Sogeti has released a new book called Me the Media which can be download for free in PDF format or purchased from Amazon.com.

Proclaiming that the rise of Web 2.0 will have an impact as far-reaching as the invention of the printing press or the birth of mass media, a new book titled Me the Media – Rise of the Conversation Society – Past, Present and Future of the Third Media Revolution presents a wide-ranging discussion of how today’s personal media tools are transforming communications as well as other aspects of society – including how companies market their products and services.

A special chapter called The Obama Moment, written by Peter Leyden - former managing editor at Wired magazine and currently CEO of NextAgenda, a think tank on the transformative use of new technologies, addresses the pivotal role of digital media in Barack Obama’s presidential campaign and its ushering in of a new conversational phase in the use of Web media. The 292-page book also covers topics such as:

How ’Me Media’ has displaced the voices of corporations, politicians and traditional journalists, creating the new ’Conversation Society’ in which individuals and ad-hoc communities hold the power.

The emergence of ’Hyperegos’ consisting of individuals, brands, companies, politicians individuals and organizations – well-known through outlets such as CNN’s iReport, iGoogle, iPhone, myBarackObama and YouTube, endlessly hyperlinked through social media, and what that means for businesses and society at large.

The importance of ’crowdsourcing’ as a key 21st century business strategy, presenting opportunities for businesses to make use of ideas flowing from existing and potential buyers through today’s open Web conversations while simultaneously establishing closer relationships with customers.

The way in which virtual worlds like Second Life, mirror worlds like Google Earth and other developments are converging to create a new ’Metaverse’ – a digital extension of the physical universe in which the lines between our online and offline identities will increasingly blur.

The book is filled with examples and graphics that underscore its points, ranging from Dell’s experience with customer forums to discussions of how disparate projects such as electronic design community Crowdspirit, the Obama Girl, LinkedIn, Digg, Twitter, Jaiku, OpenID, the film Waking Life and scores of others reflect and have contributed to altering the balance of power between brands, organizations, politics and the public.

Me the Media was written by Jaap Bloem, Menno van Doorn and Sander Duivestein, all affiliated with new technology analyst VINT (www.sogeti.com/vint). VINT is the new technology research arm of the Sogeti Group, a provider of professional technology services in 14 countries and a wholly owned subsidiary of Paris Stock Exchange-listed Cap Gemini S.A. VINT is available for speaking engagements on topics from Me the Media. Erik van Ommeren, Director of Innovation at VINT can be contacted for more information around the same.

I recently sat down with David Giard and spoke about single sign-on.   Check out the video on his website at www.davidgiard.com.   The video clocks in at about 21 minutes.