Geeks With Blogs

News These postings are provided "AS IS" with no warranties, and confers no rights.
Locations of visitors to this page virtusa corp sharepoint virtusa.com shehan peruma
Shehan Peruma

 

Here are steps on setting up a slideshow on your SharePoint site really fast using a Content Editor WebPart (CEWP), jQuery and a Picture Library.

The jQuery for the slide show makes use of the Cycle plug-in located at http://jquery.malsup.com/cycle/

There are plenty of demos on the site along with instructions on using the API.

Here are the steps to implement the slideshow on a SharePoint site:

  1. Download the jQuery library and the Cycle plug-in and upload them to a document library
  2. Create a picture library that will hold the images
  3. Add a CEWP to you page.
  4. Go to the web parts property pane and add the following to the source
  5. Place the below code in the source window:
<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<div id="slideshowContentArea" style="display:none">&nbsp;</div>
// Update the below urls to point to the location where the jQuery files are stored on your site
<script type="text/javascript" src="http://intranet/InternalDocuments/jquery-1.2.6.min.js"></script>
<script type="text/javascript" src="http://intranet/InternalDocuments/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("")
$(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 liHtml = "<div><a href='"+itemLink+"' target='_blank' border='0'><img width='200' height='200'  src='" + imageLink +"'/></a><p align='center'>"+ title + "</p></div>";
        $("#slideshowContentArea").append(liHtml);
    });
  
$("#slideshowPicturePlaceholder").css("display", "none"); 
$("#slideshowContentArea").css("display", "block");

$('#slideshowContentArea').cycle({
    fx:     'scrollDown',
    timeout: 6000,
    delay:  -3000
});
}

GetAllImages();
</script>

 

The above code will asynchronously fetch the images from the image library and then call the slideshow method.

 

Pretty simple, isn’t it? Have Fun!!!

 

Technorati Tags: ,,,
Posted on Tuesday, March 2, 2010 1:02 AM MOSS , WSS , Customization , jQuery | Back to top


Comments on this post: jQuery Slideshow

# re: jQuery Slideshow
Requesting Gravatar...
Its not working.

How should i replace the image library path and the path where Jquery files are stored.

Left by palz on Apr 15, 2010 9:07 PM

# re: jQuery Slideshow
Requesting Gravatar...
I'd like to know the same as palz above.

I can't get the slideshow to work.

Left by AJ on Jun 11, 2010 1:14 AM

# re: jQuery Slideshow
Requesting Gravatar...
Not working for me either. I updated the URLs in the code to point to the jQuery documents in my Document library and replaced "Slideshow" with the name of my picture library. After pasting the revised code into the CEWP, "Please wait while scripts are loaded..." is displayed at the bottom of the web page and nothing shows in the CEWP.
Left by RJ on Jul 07, 2010 4:49 AM

# re: jQuery Slideshow
Requesting Gravatar...
Works perfect.
Thanks,
WebKMS developer
Left by WebKMS on Aug 15, 2010 6:36 PM

# re: jQuery Slideshow
Requesting Gravatar...
This code works fine !

@Rj-for those who not, i would advice to create the pic lib with the name "SlideShow".

@palz- you can find the direct url for the jquery file from google and provide that as reference as well.

@shehan - i have same question for you again - how to make it work for the sub-folders, or pictures within one level down to pic library....your quick responce would be help full..thnks in advance
Left by Ashish javiya on Oct 13, 2010 4:16 PM

# re: jQuery Slideshow
Requesting Gravatar...
@Ashish javiya - appending the following to the query should help you with querying folders: "<ViewAttributes Scope=\"Recursive\" />"

This is the msdn like for more info on the property: http://msdn.microsoft.com/en-us/library/microsoft.sharepoint.spquery.viewattributes.aspx
Left by Shehan on Oct 13, 2010 4:25 PM

# re: jQuery Slideshow
Requesting Gravatar...
@Shehan - for some reason it;s not working out for me ... could you please check and let me knw :(
quick responce would be appriciated !
Left by Ashish J on Oct 19, 2010 12:34 AM

# re: jQuery Slideshow
Requesting Gravatar...
Is it possible to place this web part several times on a web page?
Left by Jochen on Dec 09, 2010 7:50 PM

# re: jQuery Slideshow
Requesting Gravatar...
Great code! Works perfect in IE and Firefox, however it fails to load in chrome and safari any ideas?
Left by Kevin on Feb 15, 2011 4:20 PM

# re: jQuery Slideshow
Requesting Gravatar...
it is not working

it displays all the images at once below each other
Also it writes the word undefined below each image
Left by Hameed on Mar 13, 2011 4:22 PM

# re: jQuery Slideshow
Requesting Gravatar...
Hi, this worked just fine, and this can be rewritten in many ways. Hameed, undefined should be if you have not set a titel for the images, and Levitraenligne; if you are using jQuery > 1.5 & need to get this work in other browsers try use:

$(xData.responseXML).find("[nodeName='z:row']").each(function(i) {
instead of:
$(xData.responseXML).find("z\\:row").each(function() {

Thanx for your piece of work Shehan

/ Christian Stahl, SharePoint Server MVP
Left by Christian Stahl on Apr 05, 2011 9:14 PM

# re: jQuery Slideshow
Requesting Gravatar...
We all need fiber to stay healthy, and sadly this is the one area in our diets where most people are seriously lacking. In fact if you ask anyone what he or she

would like removed from a healthy diet plan, it would definitely be fiber.
Left by Fiber Rich Foods on Apr 22, 2011 1:37 PM

# re: jQuery Slideshow
Requesting Gravatar...
Very useful. I want to use a custom URL column to link the image to a SharePoint page. By example:

<FieldRef Name='URL'/>

var linkURL = $(this).attr("ows_URL");

The output is however they URL, URL Description. Is there a way to only output the URL and NOT the URL Description

Thanks!
Left by Bastiaan Jacobs on May 17, 2011 12:55 PM

# re: jQuery Slideshow
Requesting Gravatar...
This is the HTML:

<p align='left'>" + 'More info..' + "</p>

A example output will show the following:

www.google.nl,%20www.google.nl
Left by Bastiaan Jacobs on May 17, 2011 12:59 PM

# re: jQuery Slideshow
Requesting Gravatar...
I answered my own question :)

var linkURL = $(this).attr("ows_URL").split(";#");

Needs to be changed in:

var linkURL = $(this).attr("ows_URL").substring(0, $(this).attr("ows_URL").indexOf(","));

Left by Bastiaan Jacobs on May 17, 2011 1:49 PM

# re: jQuery Slideshow
Requesting Gravatar...
What's the deal? I put this content in the html source of the cewp. and save the page. I come back and everything is gone except the gears_in.gif line.
Left by Amber on May 27, 2011 9:44 AM

# re: jQuery Slideshow
Requesting Gravatar...
Hi ...I need to change border color from BLUE to RED.How can i change it.Please help .
Left by Sree on Jun 02, 2011 11:35 AM

# re: jQuery Slideshow
Requesting Gravatar...
i am not able to display the images , i could see the slide show running but images from the library are being shown

i have the library and the slide show in the same folder "CVC Pictures"

here is my code can you please look into it ?

<IMG ID="slideshowPicturePlaceholder" src="/_layouts/images/GEARS_AN.GIF" style="display:none"/>
<div id="slideshowContentArea" style="display:none">&nbsp;</div>

<script type="text/javascript" src="https://share.ptc.com/sites/sales/ic/tdd/Shared%20Documents/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://share.ptc.com/sites/sales/ic/tdd/Shared%20Documents/jquery.cycle.all.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>CVC Pictures</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+"/https://share.ptc.com/sites/sales/sales/cvc_needham/CVC%20Pictures/";
var itemURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/https://share.ptc.com/sites/sales/sales/cvc_needham/CVC%20Pictures/Forms/AllItems.aspx";

$("#slideshowContentArea").html("")
$(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 liHtml = "<div><img width='200' height='200' src='" + imageLink +"'/><p align='center'>"+ title + "</p></div>";
$("#slideshowContentArea").append(liHtml);
});

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

$('#slideshowContentArea').cycle({
fx: 'scrollDown',
timeout: 6000,
delay: -3000
});
}

GetAllImages();
</script>
Left by Sri on Jul 22, 2011 11:06 PM

# re: jQuery Slideshow
Requesting Gravatar...
Great writeup. This worked perfectly. I used it to display a slideshow of over 400 pictures. One thing I ran across was that it only displayed the pictures on the list's default view. If the view only showed 40 pictures, it would only pull 40. I was able to specify which view I wanted to use by adding the following line of code underneath where we specified the listName.

soapEnv += "<viewName>{025CE599-57AD-4901-ACA0-6ABA2A5E185E}</viewName>";

I created a view to show all 400 pictures, but did not want to specify that view as the default. You can get the viewName ID by the source code when the view is in your browser.

Left by Andrew Tjandra on Sep 08, 2011 3:54 AM

# re: jQuery Slideshow
Requesting Gravatar...
Hi,
This script is working fine but i have a problem while i inserted below site script "http://sharepointjavascript.wordpress.com/2010/11/23/poll-for-sharepoint/" the slideshow is not working fine.can you please help me to sortout this issue.

Regards,
Sudhakar
Left by Sudhakar on Oct 17, 2011 4:29 PM

# re: jQuery Slideshow
Requesting Gravatar...
I'm brand new to jquery, and I got this to work (hurray!), but each of my photos says "undefined" under it. Can you tell me where in the code I can adjust so it pulls the name of the photo? Thanks!
Left by Elizabeth on Dec 28, 2011 6:02 AM

# re: jQuery Slideshow
Requesting Gravatar...
thannk you very much
Left by davetiye on Feb 28, 2012 7:01 AM

# re: jQuery Slideshow
Requesting Gravatar...
This works great in IE and Firefox, but I still can't get it to work in Chrome. Any ideas?
Left by Lee on Mar 13, 2012 9:19 PM

# re: jQuery Slideshow
Requesting Gravatar...
Hi, I have a couple of questions please:

1. The 1st URLS to replace refer to 2 types of .js file. I only have one (all.js) - do I just replace both urls with the /all.js url

2. Linking to picture source. What part of the line am i replacing please as its a little confusing to a novice:

var imageURL = window.location.protocol+"//"+window.location.hostname+port+L_Menu_BaseUrl+"/SlideShow/";

Thanks, Ben
Left by Ben on Mar 14, 2012 7:19 PM

# re: jQuery Slideshow
Requesting Gravatar...
All sorted. Great work & thanks
Left by Ben on Mar 15, 2012 1:52 AM

# re: jQuery Slideshow
Requesting Gravatar...
Thank you so much for writing this up.
The slider works perfectly for me. However, in Chrome/Safari the images are not displayed for some reason. This seems to be an issue with the "z:row" namespace (see: http://sympmarc.com/2009/11/08/sharepoints-web-services-jquery-and-the-zrow-namespace-in-safari-and-chrome/ )

I have tried updating the code with each of the lines below. However, the images are still not displaying in Chrome. The <ul id="imagesUL"/> element never gets populated with ui elements. I have spent almost 3 hours trying to resolve this. I would be really grateful if you were able to provide some guidance.

1. $(xData.responseXML).find("[nodeName='z:row']").each(function(i) {
2. $(xData.responseXML).find("[nodeName=z:row]").each(function(i) {
3. $(xData.responseXML).find("[nodeName='z:row']").each(function() {
4. $(xData.responseXML).find("[nodeName=z:row]").each(function() {

Thanks in advance,
Greg
Left by Greg on Apr 09, 2012 9:40 PM

# re: jQuery Slideshow
Requesting Gravatar...
Greg--- I have the same problem and have seen quite a few posts with the same solution(s). Not working for me either. In fact, when I change from z\\ I lose the images in IE / FF.

If anyone has another solution, that would be super.
Left by Terri on May 17, 2012 4:30 AM

# re: jQuery Slideshow
Requesting Gravatar...
Found this ... and it's working for me.

$(xData.responseXML).find("z\\:row, row").each(function(i)

http://bugs.jquery.com/ticket/10377
Left by Terri on May 17, 2012 4:37 AM

# re: jQuery Slideshow
Requesting Gravatar...
The slide show works very well. Thank you .

can I ask how do I get the whole thing align at the center at the moment it's align to the top left. New to website thing.
Left by Rizz on May 25, 2012 9:57 AM

# re: jQuery Slideshow
Requesting Gravatar...
OK it's working fine for me. For some reason, I can not connect the image to a URL (blank page). One field of my picture library is "Link". How can I link all of this? It should be simple but...any help appreciated!
Left by Olivier on Jun 25, 2012 12:36 PM

# re: jQuery Slideshow
Requesting Gravatar...
hey, how do i get to run a slideshow in the master page? i want to run a slideshow of pictures on the master page of my site, in the section where the site title appears. please help.....
Left by Ankush on Jul 02, 2012 9:35 PM

# re: jQuery Slideshow
Requesting Gravatar...
Hi,
I'm brand new to jquery, and slide show is working, but each of my photos says "undefined" under it. Can you tell me where in the code I can adjust so it pulls the name of the photo?
Left by swathih on Aug 30, 2012 4:39 PM

# re: jQuery Slideshow
Requesting Gravatar...
Doesn't work.
Your explanation is not clear!
Please explain for non specialists!
Left by Emil on Dec 11, 2012 3:20 AM

# re: jQuery Slideshow
Requesting Gravatar...
Yay! I was able to make it work, using the original code and tweaking for URL link assigned to each image. Also removed the "Title" that was appearing below the image.
Left by Jeepy2 on Jan 29, 2013 3:41 AM

# re: jQuery Slideshow
Requesting Gravatar...
the slider doesnot work. . . :((
the code just displays the pictures below each other and writes undefined for each picture
Left by sam on May 09, 2013 3:47 PM

# re: jQuery Slideshow
Requesting Gravatar...
can you please provide the quick response. .
Left by sam on May 09, 2013 4:07 PM

# re: jQuery Slideshow
Requesting Gravatar...
its not working..:((((.Please help me out its very urgent
Left by Wangmaya on Aug 27, 2013 4:16 PM

Your comment:
 (will show your gravatar)


Copyright © shehan | Powered by: GeeksWithBlogs.net