0
votes

I'm using the HillBilly slider for one of my sites. It's working great but I also wanted to use the title field in the slider. I adjusted the code but where the title is suppose to be I just get "Undefined". As far as I can tell the code is correct. Can anyone look at my code to see where I messed up?

Thanks

<style type="text/css">
.hillbillyBanner { position: relative; overflow: auto;   }
.hillbillyBanner li { list-style: none; }
.hillbillyBanner ul li { float: left; height: 200px; width: auto;}
.hillbillyBanner ul {margin-left: -40px;}
p {margin-left: 25px;}
h2 {margin-left: 15px;}
</style>
<script type="text/javascript">
   jQuery(document).ready(function($) {
      var sliderList = "Announcements";// Name of the list that contains slides
      var slideTitleField = "Title"; 
      var slideContentField = "Body"; //Name of the Rich text field that has slide content
      var slideBackgroundImageField = "Image"; //Name of the picture field to use as background image
      HillbillySlider(sliderList,slideTitleField,slideContentField,slideBackgroundImageField);
  });
 function HillbillySlider(sliderList,slideTitleField,slideContentField,slideBackgroundImageField) {
     //query to retrieve all items
     var query = "<Query><Where><And><Neq><FieldRef Name='ID' /><Value Type='Number'></Value></Neq><Eq><FieldRef Name='Active' /><Value Type='Boolean'>1</Value></Eq></And></Where></Query>";
     //return fields for slide content and background picture
     var camlViewFields = "<ViewFields><FieldRef Name='"+slideTitleField+"' /><FieldRef Name='"+slideContentField+"' /><FieldRef Name='"+slideBackgroundImageField+"' /></ViewFields>";
     $().SPServices({
          operation: "GetListItems",
          async: true,
          listName: sliderList,
          CAMLViewFields: camlViewFields,
          CAMLQuery: query,
          completefunc: function(xData, Status) {
               $(xData.responseXML).SPFilterNode("z:row").each(function() {
               var slideTitleField = ($(this).attr("ows_"+slideTitleField));
               var slideContent = ($(this).attr("ows_"+slideContentField));
               var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
               //create slide (li) and append it to other slides
               $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\"><h2>"+slideTitleField+"</h2><p>"+slideContent+"</p></li>");
          }); // end completefunc
          //start the slider
          $('.hillbillyBanner').unslider();
        }
     }); // end SPServices call`enter code here`
 }
 </script>
1

1 Answers

0
votes

Ah found the answer I accidentally set the Title var twice and it was canceling itself out.

So this

var slideTitleField = ($(this).attr("ows_"+slideTitleField));
           var slideContent = ($(this).attr("ows_"+slideContentField));
           var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
           //create slide (li) and append it to other slides
           $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"');\"><h2>"+slideTitleField+"</h2><p>"+slideContent+"</p></li>");

Was changed to this:

var slideTitle = ($(this).attr("ows_"+slideTitleField));
               var slideContent = ($(this).attr("ows_"+slideContentField));
               var picture = $(this).attr("ows_"+slideBackgroundImageField)==undefined?"":$(this).attr("ows_"+slideBackgroundImageField).split(",")[0];
               //create slide (li) and append it to other slides
               $("#hillbillySlider").append("<li style=\"background-image: url('"+picture +"'); background-repeat: no-repeat;\"><h2>"+slideTitleField+"</h2><p>"+slideContent+"</p></li>");