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.
Wilt Chamberlain & Muhammad Ali © vedia
16th Pacific Curling Championships, Tokyo © Ken@Okinawa
Action Shot, 1940's © Duke University Archives. Durham, North Carolina, USA.
Foosball Table © cindyt7070
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;
}
});
}
});