Posted By

rumremix on 03/10/11

Tagged

Versions (?)

Last Edited at 03/10/11 05:08am

Statistics

Viewed 693 times

Favorited by 0 user(s)

Related snippets

jquery templating

/ Published in: JavaScript

Most of spservices function can be ignored -- not specifically relevant to templating. Important code in that block is the array push.

Expand | Embed | Plain Text

Copy this code and paste it in your HTML

<script type="text/javascript" src="../Style%20Library/Scripts/jquery-1.5.min.js"></script>
<script type="text/javascript" src="../Style%20Library/Scripts/jquery.tmpl.min.js"></script>	
<script type="text/javascript">
var bannerpath = "../HomeRotator/";
 
function getRotator(){
var banners = [];
 
$().SPServices({
		  operation: "GetListItems",
		  async: false,
		  listName: "HomeRotator",
         CAMLQuery: '<Query><Where><Eq><FieldRef Name="Active" /><Value Type="Boolean">1</Value></Eq></Where></Query>',
		  completefunc: function (xData, Status) {
//printObject(xData);
 
		 		$(xData.responseXML).find("[nodeName='z:row']").each(function(i) {
 
		 			banners.push ( {
		 			"banImg": bannerpath + $(this).attr('ows_NameOrTitle'), 
		 			"banHead": $(this).attr('ows_Headline'),
		 			"banSubHead": $(this).attr('ows_Sub_x0020_Headline'),
		 			"banLink": $(this).attr('ows_Link').split(",")[0] 
		 			} );
 
					});
				}	
 
		});/*-End SpServices*/
 
 
$( "#bannerTemplate" ).tmpl( banners ).appendTo( "#homeSlider" );
$('#homeSlider').jshowoff({controls:false, speed:8000});
    $('#homeSlider').css("visibility","visible");
 
 
 
 
}/*End readThenWrite*/
 
 
 
</script>
<script id="bannerTemplate" type="text/x-jquery-tmpl">
	<div>
        <a href="${banLink}"><img class="imgBg" src="${banImg}" alt="${banHead}" /></a>
 
        <div class="slidelabel"><p><h2>${banHead}</h2><h3>${banSubHead}</h3></p><div class="slidecorner"></div></div>
    </div>
	</script>	
<div id="homeSlider" ></div>