HOW TO Display a Slideshow in SharePoint using jQuery/HTML

The code below shows how to display a slideshow in SharePoint using jQuery/HTML. I am using the jQuery Cycle plugin, which can be downloaded from the link below:

 

http://jquery.malsup.com/cycle/

 

Embed the entire code in a Content Editor Web Part.

 

<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>

<div id="slideshowContentArea" style="display:none">&nbsp;</div>

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery-1.3.2.min.js"></script>

<script type="text/javascript" src="http://intranet.na.kraft.com/sites/TC/jQuery/jquery.cycle.all.2.88.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/'>";

   

 soapEnv += "<listName>Kraft Traveler's Pictures</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+"/Kraft%20Travelers%20Pictures/";

var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/Kraft%20Travelers%20Pictures/Forms/DispForm.aspx?ID=";

 

$("#slideshowContentArea").html("")

$(xData.responseXML).find("[nodeName=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' border='0'  src='" + imageLink +"'/></a><p align='center'>"+ title + "</p></div>";

        $("#slideshowContentArea").append(liHtml);

    });

 

$("#slideshowPicturePlaceholder").css("display", "none");

$("#slideshowContentArea").css("display", "block");

 

$('#slideshowContentArea').cycle({

    fx:     'fade',

    timeout: 6000,

    delay:  -3000

});

}

 

GetAllImages();

</script>