SharePoint: Rotating Pictures, Random Pictures (yet again!)

 

This little Content Editor Web Part trick has turned out to be pretty popular. Too popular… it has generated a lot of requests for “could also add…”.  So here are two of those, navigation buttons, and caption text.

 

 

First go the original article and read about how this all works:
   http://techtrainingnotes.blogspot.com/2009/07/sharepoint-rotating-pictures-random.html

 

What’s been added:

• Two new options:
  • manualClick – set this to true to display the First, Previous, Play, Next and Last buttons
  • customTextColumn – set this to true to add a “caption” or custom text

What else you will need/want to do:

• Customize the HTML at the end of the code. My example puts the picture on the left and the text on the right and left aligns the buttons
• Replace the navigation hyperlinks with real buttons or images

Now the revised steps to setup this up:

• Create your picture library and upload your pictures
   
• If you would like to supply text/captions for the pictures, add a “Single line of text” or “Multiple lines of text” column 
   
• If you would like to filter the list of pictures to be displayed, customize the library to add additional columns to how the filter data. (Event name, department, product, etc)
   
• Go to your web part page and add the web part for the new library
   
• Important steps:
  • Click Edit, Modify Shared Web Part
  • Optional: In the appearance section give the web part a meaningful name
  • Click Edit the Current View
  • Un-checkmark all of the columns except for “Name (linked to document)”
  • Checkmark a column to use for the custom URL (if you don’t have a custom URL then select any column)   (this must be the second column in the view)
  • Checkmark a column to use as a custom text/caption (this must be the third column in the view)
  • Optional: Set the sort order
  • Optional: Set filter options to select only the pictures you want displayed
  • Make sure the the list web part view is not using a "Item Limit" less then the number of pictures in the list. (You could just set this to be BIG number).
  • Click OK to save the view changes
  • Click OK to save the web part changes
     
• Add a Content Editor Web Part (CEWP) below the picture library web part
   
• Click Edit, Modify Shared Web Part
   
• Click Source Editor
   
• Copy and paste the code from below
  
• Edit the “vars” at the beginning of the JavaScript
• pictureWebPartName – enter the web part, and if your library has a description, then include it:
     Example: Library name: “Airshow Pictures”
             var pictureWebPartName="Airshow Pictures
     Example: Library name: “Airshow Pictures”,  description: “Pictures from the Dayton Airshow” 
             var pictureWebPartName="Airshow Pictures -  Pictures from the Dayton Airshow”
   
• Also edit showThumbnails, randomImg, useCustomLinks, RotatingPicturesLoopTime, imgToImgTransition, manualClick and customTextColumn as needed
   
• Click OK for the Source Editor
   
• Click OK to save the web part changes
   
• Click Exit Edit Mode and see if it works!
   

The Code

<script>
// another CEWP trick from http://techtrainingnotes.blogspot.com
var pictureWebPartName="Airshow Pictures - Pictures from the Dayton Airshow"; // name of the picture library web part
var showThumbnails = true;      //otherwise show full sized images
var randomImg = true;           //set to true to show in random order
var useCustomLinks = true;     //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000;  //2000 = 2 seconds
var imgToImgTransition = 1.0;         //2 = 2 seconds  
var manualClick = true;         //true to use the play pause buttons
var customTextColumn = true;    //true to display text / caption

// don't change these
var selectedImg = 0;
var imgCache = [];
var imgTag;

function RotatingPictures()
{

  if (manualClick) {buttonRow.style.display="inline"};
  if (customTextColumn == "") {customTextTD.style.display="none"}

  imgTag = document.getElementById("RotatingImage");
  //Find the picture web part and hide it
  var Imgs = [];
  var x = document.getElementsByTagName("TD"); // find all of the table cells
  var LinkList;
  var i=0;

  for (i=0;i<x.length;i++) 
  {
    if (x[i].title == pictureWebPartName)
    {
      // tables in tables in tables... ah SharePoint!
      LinkList = x[i].parentNode.parentNode.parentNode.parentNode.parentNode.parentNode.parentNode;
      // hide the links list web part
      LinkList.style.display="none"; 
      break;
    } 
  }

  if (!LinkList)
  {
    document.all("RotatingImageMsg").innerHTML="Web Part '" + pictureWebPartName + "' not found!";
  }

  //Copy all of the links from the web part to our array

  var links = LinkList.getElementsByTagName("TR") // find all of the rows
  var url;
  var len;
  for (i=0;i<links.length;i++) 
  {
    
    if (links[i].childNodes[0].className=="ms-vb2")
    {
      len=Imgs.length
      Imgs[len]=[]
      Imgs[len][0] = links[i].childNodes[0].childNodes[0].href;
      if (useCustomLinks)
      {
        if (links[i].childNodes[1].childNodes.length>0)
         { Imgs[len][1] = links[i].childNodes[1].childNodes[0].href; }
         else
         { Imgs[len][1] = "" }
      }
      if (customTextColumn)
      { 
        if (links[i].childNodes[1].childNodes.length>0)
         {Imgs[len][2] = links[i].childNodes[1].nextSibling.childNodes[0].innerHTML;}
         else
         {Imgs[len][2] = "" }      }
    }
  }
  if (Imgs.length==0)
  {
    document.all("RotatingImageMsg").innerHTML="No images found in web part '" + pictureWebPartName + "'!";
  }
  for (i = 0; i < Imgs.length; i++)
  {
    imgCache[i] = new Image();
    imgCache[i].src = Imgs[i][0];
    if (useCustomLinks)
    {
      imgCache[i].customlink=Imgs[i][1];
    }
    if (customTextColumn)
    {
      imgCache[i].customtext=Imgs[i][2];
    }

  }
  RotatingPicturesLoop();
}


// now show the pictures...
function RotatingPicturesLoop()
{
  if (!manualClick)
    if (randomImg)
    {
      selectedImg=Math.floor(Math.random()*imgCache.length);
    }

  if (document.all){
      imgTag.style.filter="blendTrans(duration=" + imgToImgTransition + ")";
      imgTag.filters.blendTrans.Apply();
  }

  url=imgCache[selectedImg].src
  if (useCustomLinks)
  { RotatingImageLnk.href=imgCache[selectedImg].customlink; } 
  else
  { RotatingImageLnk.href = url; }

  if (customTextColumn) 
     customTextTD.innerHTML = imgCache[selectedImg].customtext.replace(/&lt;/g,'<').replace(/&gt;/g,'>');
  else
     customTextTD.innerHTML = "";

  if (showThumbnails)
  {
    // convert URLs to point to the thumbnails...
    //   from  airshow%20pictures/helicopter.jpg
    //   to    airshow%20pictures/_t/helicopter_jpg.jpg

    url = revString(url);
    c = url.indexOf(".");
    url = url.substring(0,c) + "_" + url.substring(c+1,url.length);
    c = url.indexOf("/");
    url = url.substring(0,c) + "/t_" + url.substring(c,url.length);
    url = revString(url) + ".jpg";
  }


  imgTag.src = url;
  if (document.all){
    imgTag.filters.blendTrans.Play();
  }

  if (!manualClick)
  {
    selectedImg += 1;
    if (selectedImg > (imgCache.length-1)) selectedImg=0;

    setTimeout(RotatingPicturesLoop, RotatingPicturesLoopTime);
  }
}


// utility function revString found here:
// http://www.java2s.com/Code/JavaScript/Language-Basics/PlayingwithStrings.htm
function revString(str) { 
   var retStr = ""; 
   for (i=str.length - 1 ; i > - 1 ; i--){ 
      retStr += str.substr(i,1); 
   } 
   return retStr; 
}

function moveFirst() {manualClick = true; selectedImg = 0; RotatingPicturesLoop()}
function moveNext() {manualClick = true; selectedImg += 1; if (selectedImg > (imgCache.length-1)) selectedImg=0; RotatingPicturesLoop()}
function movePrev() {manualClick = true; selectedImg -= 1; if (selectedImg < 0 ) selectedImg=imgCache.length-1; RotatingPicturesLoop()}
function moveLast() {manualClick = true; selectedImg = imgCache.length-1;  RotatingPicturesLoop()}

function movePlay() {
  if (PlayButton.innerHTML=="Play") 
  {
    manualClick = false; 
    PlayButton.innerHTML="Pause"; 
  } 
  else
  {
    manualClick = true; 
    PlayButton.innerHTML="Play"; 
  }

RotatingPicturesLoop()}




// add our function to the SharePoint OnLoad event
_spBodyOnLoadFunctionNames.push("RotatingPictures"); 

</script>




<!-- add your own formatting here... -->
<center>
  <table border="0" cellpadding="0" cellspacing="0" width="100%">
    <tr>
      <td id="VU" height="125" width="160" align="center" valign="middle">
<a name="RotatingImageLnk" id="RotatingImageLnk" alt="click for larger picture">
        <img src="/_layouts/images/dot.gif" name="RotatingImage" id="RotatingImage" border=0>
</a>
        <span name="RotatingImageMsg" id="RotatingImageMsg"></span>
      </td>
      <td ID="customTextTD" name="customTextTD"  width="100%" style="padding: 4px 1ex 4px 4px;">
         <span name="RotatingImageText" id="RotatingImageText"></span>
      </td>
    </tr>
    <tr id="buttonRow" style="display:none"><td colspan="2" align="left">
      <a href="" onclick="moveFirst();return false;">First</a>
      <a href="" onclick="movePrev();return false;">Previous</a>
      <a href="" onclick="movePlay();return false;" name="PlayButton" ID="PlayButton">Play</a>
      <a href="" onclick="moveNext();return false;">Next</a>
      <a href="" onclick="moveLast();return false;">Last</a>
    </td></tr>
  </table>
</center>

 

 

 

.