Pages

Thursday 22 November 2012

Simple and Dynamic JQuery Slider For Sharepoint


Step 1
         Create One Picture Library to save image .(No extra columns are required)
         Create page in SharePoint designer.

Step 2

Apply master page from Menu for current page




Add Jquery reference as given below (these are online reference )
<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>

Or you can download these libraries, and add local SharePoint server path instead of online path


Step 3:
Add div to show images (Place this code in Content area)
<div id="ImageSlider" style="height:300px; width:500px">  </div>





Now Place the Below Code in below the References of Jquery.


<script>

function GetData(Picture)
{
//change 1    full path pointing to your picture library
var imageURL = "http://site url /pictures/";
//change 2   
var itemURL = "http://sp2010-sana/Banners/Forms/DispForm.aspx?ID";


$(Picture.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 ="<img width='500' height='300'  src='"+ imageLink +"'/>";

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

$('#BannerSlider').cycle({
    fx:    'scrollLeft',
    sync:  true,
    delay: -10000
 });
}
 function PlaySlideshow()
{
 var srvCAML = "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'><soapenv:Body><GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'>";
//Change 3 ---  put you picture library name in Listname tag
 srvCAML+= "<listName>Your Picture Library name </listName><query></query><viewFields> <ViewFields><FieldRef Name='Title'/><FieldRef Name='ows_FileLeafRef'/></ViewFields> </viewFields></GetListItems></soapenv:Body></soapenv:Envelope>";

//Change 4  ---change site url
var srvlists ="http://site url/_vti_bin/lists.asmx";

    $.ajax({ url: srvlists,type: "POST", dataType: "xml",data: srvCAML,complete: GetData,contentType: "text/xml; charset=utf-8",       
   
    });
}
PlaySlideshow();
</script>


Now make 4 changes according to your SharePoint site.
I have comment in code 4 four changes.
After this save change and preview this in browser.
This is simplest way to run Slider in SharePoint.



No comments:

Post a Comment