5/29/2010

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.

 

image

 

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>

 

 

 

.

24 comments:
Labels: , ,
Subscribe to: Posts (Atom)

Note to spammers!

Spammers, don't waste your time... all posts are moderated. If your comment includes unrelated links, is advertising, or just pure spam, it will never be seen.