Create a Slide Show in SharePoint 2013 using an Announcements List and SPServices

Aug 13, 2013 at 5:24 PM
Edited Aug 13, 2013 at 5:26 PM
I am using SharePoint 2013 with the following scripts stored in a doc library:
  • jquery-1.10.2.min.js
  • jquery.SPServices-2013.02.js
  • jshowoff.min.js
    Added a Script Editor WP, and made reference to these above. Do I need to add the Announcements list (AL) to the page too? Right now, with/without AL I do not get it to work.: I do not get any errors, but it does not display anything either...
    I tested & the script is loading though… Please any help is highly appreciated! Thank you!
<script type="text/javascript" src="/Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript" src="/Scripts/jquery.SPServices-2013.02.js"></script>
<script type="text/javascript" src="/Scripts/jshowoff.min.js" ></script>

<link type="text/css" href="/Scripts/jshowoff.css">
<style type="text/css">
.sliderDiv {margin-left:5px; overflow:hidden;margin-top:5px;}
.announceTitle {font-weight:bold; border-bottom:3px red solid;}
.announceBody {padding-left:20px;}
.announceFooter {font-size:8pt; color:gray;}
.announceFooter span {font-style:italic;}
</style>
<script type="text/javascript">
$(document).ready(function () {
// Check that jQuery is loaded:  
//   alert(typeof($));
  var emptyResults = "<div class='sliderDiv'><p class='announceTitle'>There are no current announcements.</p></div>";
  var maxVal = 0;
  var toShow = false;
  var heightTemp = 0;
  $().SPServices({
    operation : "GetListItems",
    async : false,
    listName : "Announcements",
    CAMLViewFields : "<ViewFields><FieldRef Name='Title' /><FieldRef Name='Image' /><FieldRef Name='Body' /><FieldRef Name='Modified' /></ViewFields>",
    CAMLQuery : "<Query><OrderBy><FieldRef Name='Created' /></OrderBy>" + "<Where><Or><Geq><FieldRef Name='Expires' /><Value Type='DateTime'>" + "<Today /></Value></Geq><IsNull><FieldRef Name='Expires' /></IsNull></Or></Where></Query>",

    completefunc : function (xData, Status) {
      var itemCount = $(xData.responseXML).SPFilterNode('rs:data').attr("ItemCount");
      if (itemCount > 0) {
        toShow = true;

        $(xData.responseXML).SPFilterNode('z:row').each(function () {
          var modDate = $(this).attr("ows_Modified");
          modDate = modDate.substr(5, 2) + "/" + modDate.substr(8, 2) + "/" + modDate.substr(0, 4);

          var titleHtml = "<div class='sliderDiv'><p class='announceTitle'>" + $(this).attr("ows_Title") + "</p>";
          var imgBody = "<img class='anImage' src='" + $(this).attr("ows_Image").split(',')[0] + "'></img>";
          var bodyHtml = "<p class='announceBody'>" + $(this).attr("ows_Body") + "</p>";
          var expireHtml = "<p class='announceFooter'>Modified: <span>" + modDate + "</span></p></div>";

          //div announcements is added by jshowoff js.

          $("#announcements").append(titleHtml + imgBody + bodyHtml + expireHtml);

        });

      } else {

        $("#announcements").append(emptyResults);

      }

    } //completefunc

  }); //SPServices

// Check that a specific function is loaded:
   alert(typeof(completefunc));

  if (toShow == true) {
    $('.sliderDiv').each(function () {
      heightTemp = $(this).height();
      if (heightTemp > maxVal) {
        maxVal = heightTemp
      };
    });
    $('#announcements').css('min-height', maxVal);
    $('#announcements').jshowoff({
      speed : 12000,
      changeSpeed : 3000,
      controls : true,
      animatePause : false,
      effect : 'fade',
      cssClass : true,
      links : true
    });
  } //if stm
}); //ready
</script>