Here are steps on setting up a slideshow on your SharePoint site really fast using a Content Editor WebPart (CEWP), jQuery and a Picture Library.
The jQuery for the slide show makes use of the Cycle plug-in located at http://jquery.malsup.com/cycle/
There are plenty of demos on the site along with instructions on using the API.
Here are the steps to implement the slideshow on a SharePoint site:
- Download the jQuery library and the Cycle plug-in and upload them to a document library
- Create a picture library that will hold the images
- Add a CEWP to you page.
- Go to the web parts property pane and add the following to the source
- Place the below code in the source window:
<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<div id="slideshowContentArea" style="display:none"> </div>
// Update the below urls to point to the location where the jQuery files are stored on your site
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery.cycle.all.2.72.js"></script>
<script>
function GetAllImages()
{
$("#slideshowPicturePlaceholder").css("display", "block");
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 bewlo 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'/></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=";
$("#slideshowContentArea").html("")
$(xData.responseXML).find("z\\:row").each(function() {
var title = $(this).attr("ows_Title");
var imageLink = imageURL+$(this).attr("ows_FileLeafRef").substring($(this).attr("ows_FileLeafRef").indexOf('#')+1);
var itemLink = itemURL+$(this).attr("ows_ID");
var liHtml = "<div><a href='"+itemLink+"' target='_blank' border='0'><img width='200' height='200' src='" + imageLink +"'/></a><p align='center'>"+ title + "</p></div>";
$("#slideshowContentArea").append(liHtml);
});
$("#slideshowPicturePlaceholder").css("display", "none");
$("#slideshowContentArea").css("display", "block");
$('#slideshowContentArea').cycle({
fx: 'scrollDown',
timeout: 6000,
delay: -3000
});
}
GetAllImages();
</script>
The above code will asynchronously fetch the images from the image library and then call the slideshow method.
Pretty simple, isn’t it? Have Fun!!!