Difference between revisions of "Image slider"
| Line 1: | Line 1: | ||
| + | {| | ||
| + | |- | ||
| + | |valign=top| | ||
<div class="image-slider"> | <div class="image-slider"> | ||
[[File:Butterfly3.jpg|512px]] | [[File:Butterfly3.jpg|512px]] | ||
| Line 70: | Line 73: | ||
}); | }); | ||
}; | }; | ||
| − | |||
| − | |||
// ]]> | // ]]> | ||
</script> | </script> | ||
| Line 78: | Line 79: | ||
</html> | </html> | ||
| + | | | ||
| + | <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( '<table><tr><th><table><tr><td> </td></tr></table></th></tr></table>' ); | ||
| + | |||
| + | // 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 ) { | ||
| + | var data = window.sliderdata[slider]; | ||
| + | if( data.dir ) return; | ||
| + | data.image += dir; | ||
| + | data.dir = dir; | ||
| + | data.div.animate({ t: data.w }, { | ||
| + | duration: 1000, | ||
| + | step: function(now, fx) { | ||
| + | var div = $(fx.elem); | ||
| + | var data = window.sliderdata[div.attr('id')]; | ||
| + | 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; | ||
| + | |||
| + | $('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' | ||
| + | ); | ||
| + | }, | ||
| + | complete: function(now, fx) { | ||
| + | var data = window.sliderdata[$(this).attr('id')]; | ||
| + | data.dir = 0; | ||
| + | } | ||
| + | }); | ||
| + | }; | ||
| + | </js> | ||
Revision as of 18:50, 20 March 2012
|
|
<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 ) { var data = window.sliderdata[slider]; if( data.dir ) return; data.image += dir; data.dir = dir; data.div.animate({ t: data.w }, { duration: 1000, step: function(now, fx) { var div = $(fx.elem); var data = window.sliderdata[div.attr('id')]; 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; $('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' ); }, complete: function(now, fx) { var data = window.sliderdata[$(this).attr('id')]; data.dir = 0; } }); }; </js> |
