Difference between revisions of "Image slider"
m |
(update) |
||
| Line 1: | Line 1: | ||
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. | 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. | ||
| − | |||
| − | |||
<div class="image-slider"> | <div class="image-slider"> | ||
| Line 17: | Line 15: | ||
// <![CDATA[ | // <![CDATA[ | ||
window.sliderdata = []; | window.sliderdata = []; | ||
| + | window.sliderdelay = 5; | ||
$(document).ready( function() { | $(document).ready( function() { | ||
| Line 28: | Line 27: | ||
window.sliderdata.push(slider); | window.sliderdata.push(slider); | ||
| − | // Store the image urls found in this slider in this sliders data | + | // Store the image urls found in this slider in this sliders data and preload them |
$('img', div).css('display','none').each( function() { | $('img', div).css('display','none').each( function() { | ||
| − | window.sliderdata[currentslider].images.push( | + | var src = $(this).attr('src'); |
| + | var image = $('<img />').attr('src', src); | ||
| + | window.sliderdata[currentslider].images.push( src ); | ||
window.sliderdata[currentslider].w = $(this).attr('width'); | window.sliderdata[currentslider].w = $(this).attr('width'); | ||
window.sliderdata[currentslider].h = $(this).attr('height'); | window.sliderdata[currentslider].h = $(this).attr('height'); | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
| − | // Set the cell size to the image size | + | // Restructure the content of this sliders div into a table with prev/next buttons |
| + | var prev = '<a class="is-prev" href="javascript:window.image_slider(' + window.currentslider + ',-1)">< prev</a>'; | ||
| + | var next = '<a class="is-next" href="javascript:window.image_slider(' + window.currentslider + ',1)">next ></a>'; | ||
| + | div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' ); | ||
| + | |||
| + | // Set the cell size to the image size and other css styles | ||
$('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); | $('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); | ||
| − | $('td,th',div).css({ padding: 0 }); | + | $('td,th',div).css({ padding: 0, 'vertical-align': 'middle' }); |
| + | $('.is-prev',div).css({ float: 'left' }); | ||
| + | $('.is-next',div).css({ float: 'right' }); | ||
// Initialise the table's images to first image with zero offset | // Initialise the table's images to first image with zero offset | ||
window.image_slider( window.currentslider, 0 ); | window.image_slider( window.currentslider, 0 ); | ||
| − | |||
}); | }); | ||
| Line 50: | Line 54: | ||
window.image_slider = function( slider, dir ) { | window.image_slider = function( slider, dir ) { | ||
| + | |||
| + | // Set the new image and animate to it (bail if already animating) | ||
var data = window.sliderdata[slider]; | var data = window.sliderdata[slider]; | ||
if( data.dir ) return; | if( data.dir ) return; | ||
data.image += dir; | data.image += dir; | ||
data.dir = dir; | data.dir = dir; | ||
| + | |||
| + | // Show next image on regular interval | ||
| + | if( 'timer' in data ) clearTimeout(data.timer); | ||
| + | data.timer = setTimeout('window.image_slider(' + slider + ',1)', window.sliderdelay * 1000); | ||
| + | |||
| + | // Play an animation from the current image to the next | ||
data.div.animate({ t: 1 }, { | data.div.animate({ t: 1 }, { | ||
duration: 1000, | duration: 1000, | ||
| Line 59: | Line 71: | ||
var div = $(fx.elem); | var div = $(fx.elem); | ||
var data = window.sliderdata[div.attr('id')]; | var data = window.sliderdata[div.attr('id')]; | ||
| + | |||
| + | // Get the URLs for the current and next image | ||
var l = data.images.length; | var l = data.images.length; | ||
var image = data.image; | var image = data.image; | ||
| Line 65: | Line 79: | ||
image %= l; | image %= l; | ||
var offset = -data.dir * fx.pos * data.w; | var offset = -data.dir * fx.pos * data.w; | ||
| − | $('th', div).css('background','transparent url("'+data.images[image]+'") no-repeat ' + (offset + data.w * dir) + 'px center' ); | + | |
| − | $('td', div).css('background','transparent url("'+data.images[next]+'") no-repeat '+ offset +'px center' ); | + | // 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) { | complete: function(now, fx) { | ||
var data = window.sliderdata[$(this).attr('id')]; | var data = window.sliderdata[$(this).attr('id')]; | ||
| − | data.dir = 0; | + | data.dir = 0; // mark current slider as no longer animating |
} | } | ||
}); | }); | ||
| Line 82: | Line 109: | ||
<js> | <js> | ||
window.sliderdata = []; | window.sliderdata = []; | ||
| + | window.sliderdelay = 5; | ||
$(document).ready( function() { | $(document).ready( function() { | ||
| Line 93: | Line 121: | ||
window.sliderdata.push(slider); | window.sliderdata.push(slider); | ||
| − | // Store the image urls found in this slider in this sliders data | + | // Store the image urls found in this slider in this sliders data and preload them |
$('img', div).css('display','none').each( function() { | $('img', div).css('display','none').each( function() { | ||
| − | window.sliderdata[currentslider].images.push( | + | var src = $(this).attr('src'); |
| + | var image = $('<img />').attr('src', src); | ||
| + | window.sliderdata[currentslider].images.push( src ); | ||
window.sliderdata[currentslider].w = $(this).attr('width'); | window.sliderdata[currentslider].w = $(this).attr('width'); | ||
window.sliderdata[currentslider].h = $(this).attr('height'); | window.sliderdata[currentslider].h = $(this).attr('height'); | ||
}); | }); | ||
| − | |||
| − | |||
| − | |||
| − | // Set the cell size to the image size | + | // Restructure the content of this sliders div into a table with prev/next buttons |
| + | var prev = '<a class="is-prev" href="javascript:window.image_slider(' + window.currentslider + ',-1)">< prev</a>'; | ||
| + | var next = '<a class="is-next" href="javascript:window.image_slider(' + window.currentslider + ',1)">next ></a>'; | ||
| + | div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' ); | ||
| + | |||
| + | // Set the cell size to the image size and other css styles | ||
$('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); | $('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); | ||
| − | $('td,th',div).css({ padding: 0 }); | + | $('td,th',div).css({ padding: 0, 'vertical-align': 'middle' }); |
| + | $('.is-prev',div).css({ float: 'left' }); | ||
| + | $('.is-next',div).css({ float: 'right' }); | ||
// Initialise the table's images to first image with zero offset | // Initialise the table's images to first image with zero offset | ||
window.image_slider( window.currentslider, 0 ); | window.image_slider( window.currentslider, 0 ); | ||
| + | |||
}); | }); | ||
}); | }); | ||
| Line 119: | Line 154: | ||
data.image += dir; | data.image += dir; | ||
data.dir = dir; | data.dir = dir; | ||
| + | |||
| + | // Show next image on regular interval | ||
| + | if( 'timer' in data ) clearTimeout(data.timer); | ||
| + | data.timer = setTimeout('window.image_slider(' + slider + ',1)', window.sliderdelay * 1000); | ||
// Play an animation from the current image to the next | // Play an animation from the current image to the next | ||
Revision as of 13:00, 21 March 2012
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 = []; window.sliderdelay = 5; $(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 and preload them $('img', div).css('display','none').each( function() { var src = $(this).attr('src'); var image = $('<img />').attr('src', src); window.sliderdata[currentslider].images.push( 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 with prev/next buttons var prev = '<a class="is-prev" href="javascript:window.image_slider(' + window.currentslider + ',-1)">< prev</a>'; var next = '<a class="is-next" href="javascript:window.image_slider(' + window.currentslider + ',1)">next ></a>';
div.html( '
|
|---|
' );
// Set the cell size to the image size and other css styles $('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' }); $('td,th',div).css({ padding: 0, 'vertical-align': 'middle' }); $('.is-prev',div).css({ float: 'left' }); $('.is-next',div).css({ float: 'right' });
// 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;
// Show next image on regular interval if( 'timer' in data ) clearTimeout(data.timer); data.timer = setTimeout('window.image_slider(' + slider + ',1)', window.sliderdelay * 1000);
// 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>
