E_Interactive Custom AJAX Slideshow

slideshow-api-example.js

// XML from Basestation Slideshow API -- AJAX
// - requires jQuery

$(document).ready(function() {					   
	var slide = [];
	var rotator = "872";
	
	$.ajax({
		type:'GET',
		url:'http://www.ei_domain.com/_SHARED/ApplicationData/Public/FlashWriter.aspx?RotatorGroupID=' 
			+ rotator,
		dataType: "XML", /* this parameter MUST BE UPPER CASE for it to work in IE */
		success: function(data){	
			$(data).find("jpg").each(function(sIndex){
				slide.push({ // populate an associative array with the XML data
					"title" : $(this).attr("title"),
					"headline" : $(this).attr("head"),
					"description" : $(this).attr("desc"),
					"img" : $(this).attr("image"),
					"url" : $(this).attr("link"),
					"target" : $(this).attr("targetLink")
				});
			});
			makeSlideShow(slide);
		}
	});
});

function makeSlideShow(slide) {
	for(i=0; i < slide.length; i++) {
		var currentSlide;
		// make <IMG> tag
		currentSlide = '<img src="' + slide[i].img + '" title="'+slide[i].title+'" />';
			// does slide have a headline and no description? Append <span> with headline
			if(slide[i].headline.length > 0 && slide[i].description.length === 0) {
				currentSlide += '<span class="headline"><h1>'+slide[i].headline+'</h1></span>';		
			}
			// does slide have both a headline and a description? Append <span> with both
			if(slide[i].headline.length > 0 && slide[i].description.length > 0 ) {
				currentSlide += '<span class="headline"><h1>'+slide[i].headline+'</h1><p>'+slide[i].description+'</p></span>';
			}
		// wrap whatever you just made in an <a> link	
		currentSlide = '<a href="' + slide[i].url + '">'+ currentSlide + '</a>';
		// append it to some DOM container and keep moving, maybe fire jQuery Cycle 
		// when you're finished
		$("div.slideshow").append(currentSlide);
	}

}