Image slider
Here's a simple image slider written 100% in JavaScript and jQuery. In converts any div elements of class "image-slider" containing img elements in a slider like the one below. The code is shown below the example.
The code
<js> window.sliderdata = []; $(document).ready( function() {
$('div.image-slider').each( function() { var div = $(this);
// Create entry in common data for this slider window.currentslider = window.sliderdata.length; div.attr('id', window.currentslider); var slider = { image: 0, dir: 0, images:[], div: div }; window.sliderdata.push(slider);
// Store the image urls found in this slider in this sliders data $('img', div).css('display','none').each( function() { window.sliderdata[currentslider].images.push( $(this).attr('src') ); window.sliderdata[currentslider].w = $(this).attr('width'); window.sliderdata[currentslider].h = $(this).attr('height'); });
// Restructure the content of this sliders div into a table
div.html( '
' );
// Set the cell size to the image size $('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); $('td,th',div).css({ padding: 0 });
// Initialise the table's images to first image with zero offset window.image_slider( window.currentslider, 0 ); }); });
window.image_slider = function( slider, dir ) {
// Set the new image and animate to it (bail if already animating) var data = window.sliderdata[slider]; if( data.dir ) return; data.image += dir; data.dir = dir;
// Play an animation from the current image to the next data.div.animate({ t: 1 }, { duration: 1000, step: function(now, fx) { var div = $(fx.elem); var data = window.sliderdata[div.attr('id')];
// Get the URLs for the current and next image var l = data.images.length; var image = data.image; image += l * 1000000; var next = ( image - dir ) % l; image %= l; var offset = -data.dir * fx.pos * data.w;
// Set the URL and position for the current image $('th', div).css('background', 'transparent url("' + data.images[image] + '") no-repeat ' + (offset + data.w * dir) + 'px center' );
// Set the URL and position for the next image $('td', div).css('background', 'transparent url("' + data.images[next]+'") no-repeat ' + offset + 'px center' ); }, complete: function(now, fx) { var data = window.sliderdata[$(this).attr('id')]; data.dir = 0; // mark current slider as no longer animating } }); }; </js>
