- The first step was using the Announcements list for the announcements slider. Then create two custom list columns, “Image” and “Body”. The “Image” column is a “Hyperlink or Picture” column type and “Body” is a “multiple lines of text” column type.
- Reference SP Services, jQuery, jShowoff, and copy below JavaScript code to pull an image column from the Announcements list.
$(document).ready(function () { var emptyResults = "<div class='sliderDiv'><p class='announceTitle'>Company Name</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 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
No comments:
Post a Comment