SharePoint 2010 and JQuery Slideshow

SharePoint doesn’t provide very good slide show functionality which end users ask oftentimes.It can be done using custom JavaScript but I believe JQuery best suited on this scenario. Here is the simple code,

  • Add “Content Editor” web part on the page and modify HTML with following code ,
<IMG ID=”slideshowPicturePlaceholder” src=”/_layouts/images/GEARS_AN.GIF” style=”display:none”/>
<center><div id=”slideshowContentArea” style=”display:none”>&nbsp;</div></center>
<script type=”text/javascript” src=”http://server_path/Configurations/jquery.min.js”></script&gt;
<script type=”text/javascript” src=”http://server_path/Configurations/jquery.cycle.all.2.72.js”></script&gt;
<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/’>&#8221;;
//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(‘Media Library error : Unable to retrieve pictures ‘);}
});
}
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 style=’padding: 10px;border:0px solid #FFFFFF;background-color:#FFFFFF;width:250px;height: 250px;top:0;left: 0;’><a href='”+itemLink+”‘ target=’_blank’ border=’0′><img width=’250′ height=’250′ src='” + imageLink +”‘/></a><p align=’center’>”+ title + “</p></div>”;
$(“#slideshowContentArea”).append(liHtml);
});
$(“#slideshowPicturePlaceholder”).css(“display”, “none”);
$(“#slideshowContentArea”).css(“display”, “block”);
$(‘#slideshowContentArea’).cycle({
fx: ‘fade’,
speed: 600,
timeout: 3000,
next: ‘#slideshowContentArea’,
pause: 1
});
}
GetAllImages();
</script>
 
Don’t forget following ,
 
  • Correct the path of “jquery.min.js” and “jquery.cycle.all.2.72.js” files in above code.
  • Change the picture library name as per actual , above it’s “Slide Show”.

Here is my slide show web part, Sorry you can see only still image but believe me it’s perfect for your end users.

Advertisements

One Comment on “SharePoint 2010 and JQuery Slideshow”

  1. tejdixit says:

    Good one:)


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s