Untitled

Jquery image slide from Sharepoint picture library

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

<center><div id="slideshowContentArea" style="display:none; width:255px;">

    <div class='nav'><a id='prev' href='#'>Prev</a><a id='next' href='#'>Next</a></div>

    <div id="slideshow" class="pics" style="position: relative; overflow-x: hidden; overflow-y: hidden; height:255px; width:255px">&nbsp;</div>

</div></center>

 

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

 

<script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"></script>

 

<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/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 onAfter(curr, next, opts) {

    var index = opts.currSlide;

    $('#prev')[index == 0 ? 'hide' : 'show']();

    $('#next')[index == opts.slideCount - 1 ? 'hide' : 'show']();

}

 

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=";

 

 

$(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 Html ="<a target='_blank' border='0' href='"+itemLink+"'><img width='250' height='250'  src='"+ imageLink +"'/></a>";

 

        $("#slideshow").append(Html);

    });

 

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

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

$('#slideshow').cycle({fx:'scrollHorz',prev:'#prev',next:'#next',after:onAfter,timeout:0});

 

}

 

GetAllImages();

</script>