SharePoint: Rotating Pictures, Random Pictures (updated)

 

Yet another update!  People can be such a pest… you keep asking for “captions, for buttons, for Play/Pause… Well I finally took the time to do it. Rather than complicate this post any more, I have the update here:
http://techtrainingnotes.blogspot.com/2010/05/sharepoint-rotating-pictures-random.html

Here’s a what the updated one looks like (without the animation):

 

SP 2010 Update: Will this work in SharePoint 2010?  Who cares!  SP 2010 has a new “Picture Library Slide Show web part” that can display random pictures every “x” seconds! (But my new version above is customizable!)

 

Updated to support Firefox and to add an optional hyperlink.

 

Many web sites have pictures that keep changing while the page is displayed. If you were doing ASP.NET development you might use the AdRotator control to do this. You can find some custom web parts that can be installed on your web server to do this.

But… I wanted a way to do this with no C# programming, no server deployment issues and even without SharePoint Designer. This is yet another Content Editor Web Part trick!

 

How this works:

• Add a picture library and upload some pictures
• Add a the web part for this new library on your home page
• Customize the view used by the web part
• Add a Content Editor Web Part to the same page and paste the HTML and JavaScript code below
• Sit back and watch!

Options:

When you paste the JavaScript you can set a few options to control the appearance of the images:

• One is required:
  • The name of the web part
• The rest are optional:
  • Show in thumbnail size (160 pixels wide) or full size
  • Show in the order found in the web part or random
  • Set how long each picture is displayed
  • Set how long to take to transition between images
  • Set if you would like to make the images clickable to a custom URL

Important note: This has only been tested in Internet Explorer and Firefox 3.5.2 so far. I will try to some testing with other browsers soon.

 

Steps:

• Create your picture library and upload your pictures
• If you would like to supply links for the pictures, add a hyperlink 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)”
  • Optional: check a column to use as a custom hyperlink (must be the second 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
• 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"; // 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 = false;     //true to use second column as URL for picture clicks
var RotatingPicturesLoopTime = 5000;  //2000 = 2 seconds
var imgToImgTransition = 1.0;         //2 = 2 seconds  

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

function RotatingPictures()
{

  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).id.match("row")!=null)
    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 (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];
    }
  }
  RotatingPicturesLoop();
}


// now show the pictures...
function RotatingPicturesLoop()
{
  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 (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();
  }
  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; 
}


// 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">
    <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>
    </tr>
  </table>
</center>

 

 

 

 

.