1602 1535 bas.jacobs
Blog Posts
SharePoint 2010 jQuery Slideshow

EDIT: I added a picture of the final result (with the new design) thanks to Tim de Groot (http://www.timthing.me).

Coming across this jQuery Slideshow I wanted to adjust the Slideshow to my needs. For example I want a custom URL column that can link a Banner to a different page.

There were a few steps and tricks I had to find out to come to the final result. In this post I will describe these taken steps that had the following result:

Features:

The jQuery Slideshow has a navigation and title linked to a custom URL column. The transition effect is ‘Fade’ and when people hover over the ‘SlideShowContainer’ the jQuery Slideshow pauses.

More jQuery Slideshow transition effects and styling can be found at this site.

When the Expire date SharePoint 2010 column of the image is greater then today’s date it will not be shown in the jQuery SlideShow.

The following SharePoint 2010 Columns are used:

All columns are (*) Required while else the query will fail and no Slideshow will be shown.

 

The following code is used:

Click here to see the code

As you can see the code is slightly different than the original jQuery Slideshow code. These differences are:

 

Styling (CSS):

This new style includes positioning for navigation items (#nav) and breaking long titles in separate lines (#slideshowContentArea p { width:370px; })

<style type=”text/css”>

#nav a { background: #fff; text-decoration: none; margin: 0 5px; padding: 3px 5px; color:#333;}

#nav a.activeSlide { background: #E5E4F1; color:#333;}

#nav a:focus { outline: none; }

#slideshowContentArea p { background-color:#fff; margin-top:0px; width:370px;}

</style>

 

Query:

The new query will get all the necessary columns and even use a where clause that will not show the expired Banners from today’s date. The URL Column is a custom column that will link a Banner to a specific target (e.g. SharePoint page). Some more query information can be found here.

soapEnv += “<query><Query><Where><Or><IsNull><FieldRef Name=’Expires’/></IsNull><Geq><FieldRef Name=’Expires’/><Value Type=’DateTime’><Today /></Value> </Geq></Or></Where><OrderBy Override=’TRUE’><FieldRef Name=’Created’ Ascending=’FALSE’ /></OrderBy></Query></query>”;
soapEnv += “<viewFields><ViewFields><FieldRef Name=’Expires’/><FieldRef Name=’Title’/><FieldRef Name=’ows_FileLeafRef’/><FieldRef Name=’URL’/></ViewFields></viewFields><rowLimit></rowLimit>”;

JavaScript and HTML:

All the display items (Banner and Title) will link to the custom URL column.

//Use target=’_blank’ in order to open new window

var liHtml = “<div><a href='” + linkURL + “‘ target=” border=’0′><img width=’368′ height=’200’ border=’none’src='” + imageLink + “‘/></a><a href='” + linkURL + “‘ target=” border=’0′><p align=’left’><strong>” + title + “</strong></p></a></div>”;

 


One trick you have to do is to strip the description from the URL column. SharePoint stores a URL like the following: (URL, Description) so when your URL is www.bing.com it will output www.bing.com%20www.bing.com. To make this work use the following line of code for your custom URL column:


//Dubble data in URL (URL%20Description) var linkURL = $(this).attr(“ows_URL”);

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

After some more testing I found out that Safari and Google Chrome would not show the jQuery Slideshow. The following line:

// Not Working in Safari and Chrome

$(xData.responseXML).find(“z\\:row”).each(function () {

was changed into:

// Also working in safari and Chrome

$(xData.responseXML).find(“[nodeName=’z:row’]”).each(function(i) {

One last small reminder is that you can copy this code in a Content Editor web part, BUT the web part uses the requested HTML and saves it when the SharePoint page is edited and saved. So there will be dubble data shown.

 

I prefer to paste the code into the page layout. You also can put the jQuery references between the masterpage <head> tags like this:

<head>
<!–jQuery References–>
<script type=”text/javascript” src=”../Style Library/jQuery/jquery-1.6.1.min.js”></script>
<script type=”text/javascript” src=”../Style Library/jQuery/jquery.cycle.all.2.74.js”></script>
</head>
Just make sure you link it correctly. My masterpage is located in the /_catalogs/masterpage/Forms/AllItems.aspx library so I needed to level up by adding (../)
Have fun!

Comments - 20 Responses to “SharePoint 2010 jQuery Slideshow”

  1. Gus says:

    Hello!
    Seems to work great, but when I Edit/Stop_Edit on the browser (IE), for example, to add another webpart, the nav bar gets repeated… like [1][2][3][1][2][3]…. do you know how to fix this?

    This ONLY happens when you Stop Editing Page through the browser…

  2. Bastiaan says:

    Hi Gus,

    Where do you add the code? In the master page, page layout or in a Content Editor?

    The code can conflict with the Javascript that SharePoint loads. Especially the Ribbon Javascript.

    Try to add it in your page layout or a Content Editor.

    Let me know.

  3. samuel says:

    Hello,
    I was wondering how did you created those columns. Did you created them in custom list or picture library.

    Thank You

  4. Bastiaan says:

    Hi Samuel, I created them in a standard Picture Library.

  5. Miriam says:

    Actually i tried with Content Editor webpart and got the page repeated. When i tried to paste the code in page layout and script tag in master page, image is showing one by one and no slide show and no pager too.

  6. John Adams says:

    When I add a content editor web part and use your code (after making changes for library name and location), the web part gives the error: “WebPartPages:ContentEditorWebPart – The file you imported is not valid. Verify that the file is a Web Part description file (*.webpart or *.dwp) and that it contains well-formed XML.”
    Obviously there are some missing steps in the instructions or I am not understanding the actual steps (of where exactly to put the code in the code view of the web part). Any help would be greatly appreciated!

  7. Bastiaan says:

    Hi John, You can try to put the code in a Text file and upload it to SharePoint. When you link to this file in your CEWP SharePoint doesn’t strip or add any ugly HTML. You must also check if the SOAP is well formated so paste the code in SP Designer or Visual Studio to see if the code is ok.

    Let me know!

  8. Tenille Bennett says:

    Hi there, brilliant post. I have a similar requirement I hope this solution can be applied to it. My Intranet is SP 2010 MSO environment. I do not want to use the OOTB Slide Show webpart, I want to create mine as I don’t like the way it handles images. I would like to adapt this solution to creating a custom slide show webpart. the main requirement is to Display a series of images held in a picture library or asset library. And allow user to specify:
    • Whether image is shown at native size or reduced to specified width
    • Size of web part so there does not have to be a lot of space around the image
    • Background colour of web part
    • Type of transition
    • Length of display for each item
    • Whether additional text e.g. title & description is shown and if so where
    • Ability to select images from library based on metadata or view

    What I want is for these properties to be controlled in the properties of the webpart by the person responsible for setting up the web part on that particular page. So when the webpart is added to the page the user can set these properties in the browser. Is this possible using the CQWP you have written for. i am not sure of the implications of adding plug ins to an online implementation of Sp2010. thanks in advance for your help.

  9. Robert says:

    Great, works like a charm. By the way the nav menu appears above the slideshow while I want it to appear under the slideshow. Do you know how to do that please?

    nav menu = the navigation 1, 2, 3 etc which shows the sequence of current slide.

    Thanks in advance.

  10. Bastiaan says:

    Hi Robert,

    Never seen that before. Try installing Firebug and Web Developer add-ons for FireFox or use Chrome (F12) to find the element and styling. You should be able to easily find out why the (“#nav”) element is above the (“#slideshowContentArea”).

    This is my styling:

    (“#slideshowContentArea”) = (style display: block;)
    (“#nav”) = (margin: 10px auto 20px auto; width: 100%; text-align: center;)

    Good luck, let me know!

  11. SPbb says:

    Hi Bastiaan,

    I pasted your code to Content Editor and got this error.

    Error! Status = 500

    Any idea?

  12. Lan says:

    How do I get the buttons to display as you have in your screenshot at the top of this page? My slider works, each image goes ti a separate page on the site. However, when I update the HTML in the CEWP, I believe that the jquery calling the images is constantly duplicating, as the numbers in hte top left navigation now appears as: 1 2 3 1 2 3 1 2 3 1 2 3 1 2 3 and if I save the code again, I am sure it will add another set of “1 2 3”. Take a look at what is at the top of the HTMNL coide in the CEWP:
    123123123123123

    Any advice to fix this issue?

  13. Anita says:

    If you get around to investigate changing this to SP2013 (using Rest or Csom to retrieve list items), please let me know. I’d happily be a tester.

  14. Alvin Ubiera says:

    I’m having the same Error! Status = 500. Console reports “LOG: [cycle] terminating; too few slides: 0

  15. Bastiaan says:

    Hi Alvin, I get this error when I use a newer version of jQuery…

    I use jQuery 1.6.1 now. Also check if the listname and request (“fields”) are correct.

  16. GIRISHKUMAR says:

    Thank you os much for the post.,..
    its helps me lot..

    now this slide show working fine in all browsers except IE- internet explorer.. please help me
    my code is given below

     

    $(document).ready(function () {
    $().SPServices({
    operation: “GetListItems”,
    async: false,
    listName: “BGLBanners”,
    CAMLRowLimit: 10,
    completefunc: function (xData, Status) {
    $(“#slideshowContentArea”).html(“”);

    $(xData.responseXML).SPFilterNode(“z:row”).each(function () {
    var title = $(this).attr(“ows_Title”);
    var pictureURL = ‘/’ + $(this).attr(“ows_RequiredField”);
    var bannerLinkURL = $(this).attr(“ows_BannerLinkURL”);
    var n = bannerLinkURL.indexOf(‘,’);
    bannerLinkURL = bannerLinkURL.substring(0, n != -1 ? n : s.length);

    var liHtml = “” + title + ““;
    alert(liHtml);
    $(“#slideshowContentArea”).append(liHtml);
    });
    $(“#slideshowContentArea”).css(“display”, “block”);

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

  17. Chelsi says:

    Works like a charm! Thanks so much =)

  18. So, in order to place your jQuery code into a Content Editor and have the code work, do we have to name the columns exactly as you have them? I am trying to achieve this solution for our healthcare team’s intranet SharePoint site. We are a national team with a singular site “home” that displays information that brings each team together, and having the URLs active is essential to the homepage function.

    Thank you so much for your help on this!

  19. priya says:

    Hi Bastian, I have placed the script in content editor but cannt see the image?!? do I need to have a picture rotator or nay webpart?

Leave a Reply




HTML5 Accepted Tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>