[SP2010] - Image Rotator Web Part that links to a SharePoint Picture Library

If you have used the OOTB SharePoint Image Rotator (Picture Library Slideshow ) web part then I'm sure you will agree that there is room for improvement.  I've taken some time to build an alternative easy to use jQuery slideshow web part that can be used on any page in your SharePoint site.  This solution reads images from a SharePoint Picture Library and transition through them using the jQuery slider plugin.

This code is easy to use, but if you're looking for a more scalable and robust solution then I suggest you look at building and packaging a solution using Visual Studio.

NB!  Ensure that your SharePoint Server Publishing Infrastructure Site Collection feature is enabled on your site.  By activating this, SharePoint will create the Style Library that we will use to store our JavaScript files.

Step 1:  Copy jQuery and CSS files to Site Collection Style Library
Step 2:  Add JavaScript reference and CSS reference to Site MasterPage
Step 3:  Create Picture Library
Step 4:  Add Content Editor web part to SharePoint page

-------------------------------------------------------------------------------------------------------------------

Step 1:  Copy jQuery and CSS files to Site Collection Style Library

• Click here to download the jQuery slider plugin file (slides.min.jquery.js)
• Click here to download the CSS Stylesheet (jslider.css)
• Open your site in SharePoint Designer 2010 and navigate to your Style Library
• Copy the CSS file to the root Style Library folder
• Create a new folder called js in the root Style Library folder

 

• Copy the download jquery plugin and paste it into the created js folder

Step 2: Add JavaScript reference and CSS reference to Site MasterPage

• In SharePoint Designer 2010, Check Out your Master Page and edit the file in Advanced Mode

• Add the code below just above the closing </head> tag

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
  
 <script src="../../Style Library/js/slides.min.jquery.js" type="text/javascript"></script>
  
 <link rel="stylesheet" type="text/css" href="../../Style%20Library/jslider.css"/>
  

• Ensure that your can access all the files referenced in the code and save all changes.

Step 3: Create Picture Library

• Create a Picture Library called SlideShow on the root site of your Site Collection
• Upload sample images and give each image a Title value

Step 4:  Add Content Editor web part to SharePoint page

• Add a Content Editor web part to your SharePoint Page
• Click on the "Click here to add new content" text to show the web part options in the Ribbon
• On the Ribbon, select the HTML button in the Markup section as shown below

• Paste the code below in the HTML Source Modal dialogue window and click OK. (download file here)

 <div id='container'>  
 <div id='example'>  
 <div id='slides'>  
 <div class='slides_container'>  
 </div>  
 <a href='#' class='prev'><img src='/Style Library/Images/jslides/arrow-prev.png' width='24' height='43' alt='Arrow Prev'/></a>  
 <a href='#' class='next'><img src='/Style Library/Images/jslides/arrow-next.png' width='24' height='43' alt='Arrow Next'/></a>  
 </div>  
 <img src='/Style Library/Images/jslides/example-frame.png' width='739' height='341' alt='Example Frame' id='frame'/>  
 </div>  
 </div>  
 <script type="text/javascript">  
 $(function(){  
 function GetAllImages()   
 {  
      var soapEnv = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";  
   //The name of the image library is called 'SlideShow'. Replace the name below with the name of your image library  
  soapEnv += "<listName>SlideShow</listName>";  
   soapEnv += "<query><Query><OrderBy Override='TRUE'><FieldRef Name='Created' Ascending='FALSE' /></OrderBy></Query></query>";  
   soapEnv += "<viewFields><ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/><FieldRef Name='Description'/></ViewFields></viewFields><rowLimit></rowLimit>";  
   soapEnv += "</GetListItems></soapenv:Body></soapenv:Envelope>";  
 var port = window.location.port;  
 if (port.length <= 0)  
  port = "";   
 else  
  port = ":"+port;  
 var webservice = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/_vti_bin/lists.asmx";  
   $.ajax({  
     url: webservice,  
     type: "POST",  
     dataType: "xml",  
     data: soapEnv,  
     complete: processQueryResults,  
     contentType: "text/xml; charset=utf-8",  
      error: function(xhr) {  
     alert('Error! Status = ' + xhr.status);}  
   });  
 }  
 function processQueryResults(xData, status)  
 {  
 var port = window.location.port;  
 if (port.length <= 0)  
  port = "";  
 else  
  port = ":"+port;  
 //Change the below to point to your image library  
 var imageURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/";  
 var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/Forms/DispForm.aspx?ID=";  
 $(".slides_container").html("")  
 $(xData.responseXML).find("z\\:row").each(function() {  
  var title = $(this).attr("ows_Title");  
  var desc = $(this).attr("ows_Description");  
  var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);   
  var itemLink = itemURL+$(this).attr("ows_ID");  
  var liHtml = "<div class='slide'><img width='570' border='0' height='270' src='" + imageLink +"'/><div class='caption' style:'botton:0'><p>" + title + "</p></div></div>";  
      $(".slides_container").append(liHtml);  
   });  
 $('#slides').slides({  
           preload: true,  
           preloadImage: 'http://demo/Style Library/Images/jslides/loading.gif',  
           play: 5000,  
           pause: 2500,  
           hoverPause: true,  
           animationStart: function(current){  
                $('.caption').animate({  
                bottom:-35  
                },100);  
                if (window.console && console.log) {  
                     // example return of current slide number  
                     console.log('animationStart on slide: ', current);  
                };  
           },  
           animationComplete: function(current){  
                $('.caption').animate({  
                     bottom:0  
                },200);  
                if (window.console && console.log) {  
                     // example return of current slide number  
                     console.log('animationComplete on slide: ', current);  
                };  
           },  
           slidesLoaded: function() {  
                $('.caption').animate({  
                     bottom:0  
                },200);  
           }  
      });     
 }  
 GetAllImages();  
 });  
 </script>