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(/</g,'<').replace(/>/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>
.
