Jquery image slide from Sharepoint picture library
<p>I'm trying to design a thumbnail image slider fetching items from a Picture library with the below script:It shows almost as in this page: <a href="http://jquery.malsup.com/cycle/after.htmlEverything" rel="nofollow">http://jquery.malsup.com/cycle/after.htmlEverything</a> works fine... </p>

<p>As of now it is showing only one image per paging.</p>

<p><strong>My question is how to show a set of images (Ex:4 images per set) each time i click >> next or &lt;&lt; prev</strong> </p>

<pre><code>&lt;IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/&gt;
&lt;center&gt;&lt;div id="slideshowContentArea" style="display:none; width:255px;"&gt;
    &lt;div class='nav'&gt;&lt;a id='prev' href='#'&gt;Prev&lt;/a&gt;&lt;a id='next' href='#'&gt;Next&lt;/a&gt;&lt;/div&gt;
    &lt;div id="slideshow" class="pics" style="position: relative; overflow-x: hidden; overflow-y: hidden; height:255px; width:255px"&gt;&amp;nbsp;&lt;/div&gt;
&lt;/div&gt;&lt;/center&gt;

&lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="http://malsup.github.com/chili-1.7.pack.js"&gt;&lt;/script&gt;

&lt;script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.2.72.js"&gt;&lt;/script&gt;


&lt;script&gt;
 function GetAllImages() 
{
$("#slideshowPicturePlaceholder").css("display", "block");    
var soapEnv = "&lt;soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'&gt;&lt;soapenv:Body&gt;&lt;GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'&gt;";
    //The name of the image library is called 'SlideShow'. Replace the name bewlo with the name of your image library
 soapEnv += "&lt;listName&gt;SlideShow&lt;/listName&gt;";
    soapEnv += "&lt;query&gt;&lt;Query&gt;&lt;OrderBy Override='TRUE'&gt;&lt;FieldRef Name='Created' Ascending='FALSE' /&gt;&lt;/OrderBy&gt;&lt;/Query&gt;&lt;/query&gt;";
    soapEnv += "&lt;viewFields&gt;&lt;ViewFields&gt;&lt;FieldRef Name='Title'/&gt;&lt;FieldRef Name='ows_FileLeafRef'/&gt;&lt;/ViewFields&gt;&lt;/viewFields&gt;&lt;rowLimit&gt;&lt;/rowLimit&gt;";
    soapEnv += "&lt;/GetListItems&gt;&lt;/soapenv:Body&gt;&lt;/soapenv:Envelope&gt;";

var port = window.location.port;
if (port.length &lt;= 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 &lt;= 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 ="&lt;a target='_blank' border='0' href='"+itemLink+"'&gt;&lt;img width='250' height='250'  src='"+ imageLink +"'/&gt;&lt;/a&gt;";

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

$("#slideshowPicturePlaceholder").css("display", "none"); 
$("#slideshowContentArea").css("display", "block");
$('#slideshow').cycle({fx:'scrollHorz',prev:'#prev',next:'#next',after:onAfter,timeout:0});

}

GetAllImages();
&lt;/script&gt;
</code></pre>
