Image Slideshow with captions

This is a very simple image slide show script that uses jQuery, SharePoint webservices and the default images library to show images with captions. All the content is pulled from default fields in the images library but feel free to add more fields and customize the code to fit your needs. 

Slide show with captions
Slide show with captions

Setup

To get this slideshow up and running there are a few things we have to do to prepare.

  1. Create a standard image library.  You can add additional fields if needed but the list needs to have all of the out of the box fields.
  2. Get jQuery.  Either link to the latest version from Google or download it and put it in a location on your server.
  3. Download the s3 slider plugin and put it somewhere on your server.

Querying the SharePoint List

I am using the techniques described by Jan Tielnes for querying SP lists with javascript.  Here is the code.

<script type="text/javascript" language="javascript" src="Scripts/jquery-1[1].3.2.min.js"></script>
<script type="text/javascript" language="javascript" src="Scripts/s3Slider.js
"></script>
<script type="text/javascript">
    $(document).ready(function() {
        var soapEnv =
            "<soapenv:Envelope xmlns:soapenv='http://schemas.xmlsoap.org/soap/envelope/'> \
                <soapenv:Body> \
                     <GetListItems xmlns='http://schemas.microsoft.com/sharepoint/soap/'> \
                        <listName>Pictures</listName> \
                         <viewFields> \
                            <ViewFields> \
                               <FieldRef Name='Title' /> \
                               <FieldRef Name='FileDirRef' /> \
                               <FieldRef Name='NameOrTitle' /> \
                               <FieldRef Name='FileRef' /> \
                               <FieldRef Name='ID' /> \
                               <FieldRef Name='Description' /> \
                               <FieldRef Name='FileType' /> \
                           </ViewFields> \
                        </viewFields> \
                    </GetListItems> \
                </soapenv:Body> \
            </soapenv:Envelope>";
        $.ajax({
            url: "_vti_bin/lists.asmx",
            type: "POST",
            dataType: "xml",
            data: soapEnv,
            complete: processResult,
            contentType: "text/xml; charset=\"utf-8\""
        });
    });
    function processResult(xData, status) {
        $(xData.responseXML).find("z\\:row").each(function() {
            var urlValue = $(this).attr("ows_FileDirRef");
                                                var urlArray;
                                                var urlName;      
                                                     if (urlValue == undefined)
                                { 
                                urlName = "- - -";
                }  
                else {
                                urlArray = urlValue.split(";#");
                                urlName= urlArray[1];
                }
                                                var thumbUrl = $(this).attr("ows_NameOrTitle");
                                                var thumbArray;
                                                var thumb;          
                                                
                                                     if (thumbUrl == undefined)
                                { 
                                thumb = "- - -";
                }  
                else {
                                thumbArray = thumbUrl.split(".");
                                thumb= thumbArray[0];
                }                                              
            var liHtml = "<li class='s3sliderImage'><img src='/" + urlName + "/_w/" + thumb +"_" + $(this).attr("ows_FileType") + ".jpg'/><span><a href='" + urlName + thumb + "." + $(this).attr("ows_FileType") + "'>View Larger</a><h3>" + $(this).attr("ows_Title") + "</h3>" + $(this).attr("ows_Description") + "</span></li>";
            $("#s3sliderContent").append(liHtml);
        });
        $('#s3slider').s3Slider({timeOut: 4000 });
}
</script>
<div id="s3slider" >
   <ul id="s3sliderContent" />
</div>

Configuring the query.

In the code above I am querying a list named ‘Pictures’ and returning the title, link to the file, file name, file type, description and the ID. To change the name of the list just update this tag with the appropriate list name.

<listName>Name of the List you want to use</listName>

Note: If you have renamed a default Image library the name may not have actually changed from SharePoint’s perspective so double check by browsing to the list and reading the URL string.

If you want to include data from other fields in the html output just add the field names to the ‘ViewFields’ section of the soap envelope.

 <FieldRef Name='NameOfField' /> \

You will also need to add a reference to the field in the ‘liHtml’ variable. When referencing fields in the variable remember to put ‘ows_’ in front of the field name.

Remember the field name that is displayed through the SharePoint UI is not always the real field name.  In this post Heather Solomon describes a good way to find the real field names.

The CSS

I made a few changes to the CSS to set the size of the slideshow and the colors and fonts for the captions

 #s3slider {width: 450px; height: 300px; position: relative; overflow: hidden; border:1px solid #666;}
#s3sliderContent {width: 450px; position: absolute; top: 0; margin-left: 0;}
.s3sliderImage {float: left; position: relative; display: none;}
.s3sliderImage span {
   position: absolute;
   left: 0;
   font: 10px/15px Arial, Helvetica, sans-serif;
   padding: 5px 13px;
   width: 449px;
   background-color: #fff;
   filter: alpha(opacity=70);
   -moz-opacity: 0.7;
   -khtml-opacity: 0.7;
   opacity: 0.7;
   color: #000;
   display: none;
   top: 0;
}
.s3sliderImage span h3{margin:1px;	padding:1px; font:normal italic 18px/14px Georgia, serif;}
.s3sliderImage span a{float:right;color:#fff;background:#333;padding:2px;text-decoration:none;margin-top:5px;}
.clear {clear: both;}

Download all the the code in a .dwp here

davecavins

Dave is a SharePoint developer and graphic designer based in the DC area.

13 thoughts on “Image Slideshow with captions

  1. when trying to implement I get object doesn’t support this property or Method, pointing to the line with:
    “$(‘#s3slider’).s3Slider({timeOut: 9000 })

    I did change the name of the div to s3slider.

    1. Ok. Here are a few things you can try to troubleshoot the issue.

      Try creating a blank .aspx page in SP Designer and placing all the code there (does not need to be in a CEWP) and see if it works. There may be something in the masterpage / page layout causing the issue.
      Try using the code here. I made some changes and tried it on a couple of vm’s and it seems to work fine.
      Remove the CSS from the CEWP and remove the lin that runs the plugin. This will let you be sure that the web service is actually getting the content onto the page.

      Hope this helps. You can contact me directly if needed (dave [dot] cavins [at] gmail.com)

  2. I just can’t get the code to work. Any help is GREATLY appreciated. I tried this (along with syles) in a blank aspx…nothin.

    Thanks.

    $(document).ready(function() {
    var soapEnv = ” \
    \
    \
    /SamplePictures \
    \
    \
    \
    \
    \
    \
    \
    \
    \
    \
    \
    \
    \
    “;
    $.ajax({
    url: “_vti_bin/lists.asmx”,
    type: “POST”,
    dataType: “xml”,
    data: soapEnv,
    complete: processResult,
    contentType: “text/xml; charset=\”utf-8\””
    });
    });
    function processResult(xData, status) {
    $(xData.responseXML).find(“z\\:row”).each(function() {
    var urlValue = $(this).attr(“ows_FileDirRef”);
    var urlArray;
    var urlName;
    if (urlValue == undefined)
    {
    urlName = “- – -“;
    }
    else {
    urlArray = urlValue.split(“;#”);
    urlName= urlArray[1];
    }
    var thumbUrl = $(this).attr(“ows_NameOrTitle”);
    var thumbArray;
    var thumb;
    if (thumbUrl == undefined)
    {
    thumb = “- – -“;
    }
    else {
    thumbArray = thumbUrl.split(“.”);
    thumb= thumbArray[0];
    }
    var liHtml = “View Larger” + $(this).attr(“ows_Title”) + “” + $(this).attr(“ows_Description”) + “”;
    $(“#s3sliderContent”).append(liHtml);
    });
    $(‘#s3slider’).s3Slider({timeOut: 4000 });
    }

    1. @Keat do you have a link to the jQuery script and the s3 slider script on the page? Also make sure the list name is correct sometimes the name that displays through the UI is not the real name of the list.

  3. I’ve tried all the suggestions, built a seperate page, made sure its referenceing the JQuery and Slider Libraries. It returns an “Objects Not Found” error during the ” ” call.

    Any ideas?

    1. @Smashburn if you want to put code in your comment wrap it in [ ‘sourcecode’ ] [/ ‘sourcecode’ ] (take the quotes out) otherwise it gets stripped out.
      If it is saying object not found make sure you have a ul or div on the page with the right id value as referneced in the script.

Leave a Reply

Your email address will not be published. Required fields are marked *