JQuery cycle plugin code with SharePoint

Question

I'm trying to replicate this functionality in SharePoint 2010. I've added "Content Editor" web part and modifying the source html. However, I'm not getting the desire result, something I'm missing in the code . My output is coming something like ,

Here is my 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://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 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("")
$("#slideshowContentArea").html("<table cellspacing='20'><tr><td>")
$("#slideshowContentArea").html("<div class='nav'><a id='prev href='#'>Prev</a><a id='next' href='#'>Next</a></div>")


$(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 ="<div style='padding: 10px;border:1px solid #ccc;background-color:#eee;width:270px;height: 270px;top:0;left: 0;'><a target='_blank' border='0' href='"+itemLink+"'><img width='250' height='250'  src='"+ imageLink +"'/></a><p align='center'></p></div><pre><code>$('#slideshow').cycle({fx:'scrollHorz',prev:'#prev',next:'#next',after:onAfter,timeout:0});</code></pre></td></tr></table>";

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

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


}

GetAllImages();
</script>

Where am I missing ?

Answer 1

Also note, the line with the find("z\\:row") method will not work in Safari and Chrome browsers. You should change it to:

$(xData.responseXML).find("[nodeName=z:row]").each(function() {

Hope this helps someone; took us a while to nut it out!

Answer 2

Try this:

<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>