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=""></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript" src=""></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.


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 +"'/>";


    fx:    'scrollLeft',
    sync:  true,
    delay: -10000
 function PlaySlideshow()
 var srvCAML = "<soapenv:Envelope xmlns:soapenv=''><soapenv:Body><GetListItems xmlns=''>";
//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",       

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