pratie

ESPN slideshow using jQuery cycle

Published: November 30, 2008

This is a jQuery version of the flash slideshow that appears at espn.com. The code below uses a play/pause toggle button. The text for the anchor tags is pulled from the image alt attribute. The one feature that is missing from this jQuery version is the play length indicator. It is difficult to create that feature so that it stays in synch with the jquery cycle and the play/pause toggle.

NBA

Wilt Chamberlain & Muhammad Ali © vedia

curling

16th Pacific Curling Championships, Tokyo © Ken@Okinawa

NFL

Action Shot, 1940's © Duke University Archives. Durham, North Carolina, USA.

foosball

Foosball Table © cindyt7070

ping pong

The Language of Ping Pong © Richard.Asia

Here is the jQuery code used. View the source in your browser to see all code including the CSS.

$(document).ready(function() { 
	
$('.cycler').corner();
if ( $('#rotator').length > 0 ) {

	$('#rotator').cycle({
	timeout:5000,
	speed:'fast',
	pager:'#rotator-nav',
	pagerAnchorBuilder: function(idx, slide) { 
		var navlabel = $($(slide).html() + 'img').attr('alt');
		return '<span><a href="#">' + navlabel + '</a></span>';
		}
	}
	);
	$('#rotator-nav').append("<a id='pbtn' class='pause'></a>");
	var bplplay = true;
	$('#pbtn').click(function() {
	
		if (bplplay) {
	    	$('#rotator').cycle('pause');
			$('#pbtn').removeClass('pause').addClass('play')
			bplplay = false;
		}
		else {
			$('#rotator').cycle('resume');
			$('#pbtn').removeClass('play').addClass('pause')
			bplplay = true;
		}
	});
}

});