Difference between revisions of "Image slider"
From Organic Design wiki
m |
m (show some source) |
||
| 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 | + | Here's a simple image slider written 100% in [[JavaScript]] and [[jQuery]]. In converts any ''div'' elements of class "image-slider" containing ''img'' elements into a slider like the one below. You can use your own CSS rules to give the next/prev links a nicer style and make a frame around the image. The images should all be the same size for it to work properly. The code is in our Subversion repository [http://svn.organicdesign.co.nz/filedetails.php?repname=extensions&path=%2FImageSlider.js here]. |
| − | + | In the wiki you can use image links as follows: | |
| + | {{code|1=<xml><div class="image-slider"> | ||
| + | [[File:Butterfly3.jpg|512px]] | ||
| + | [[File:YellowButterfly.jpg|512px]] | ||
| + | [[File:MonarchOnPinkTree3.jpg|512px]] | ||
| + | [[File:Butterfly1.jpg|512px]] | ||
| + | </div></xml>}} | ||
| + | |||
| + | |||
| + | Or in a pure HTML environment you just use image links like this, and add the code into the ''head'' element of the HTML (of course this assumes that the images are in the same location as the HTML): | ||
| + | {{code|1=<xml><div class="image-slider"> | ||
| + | <img src="Butterfly3.jpg" /> | ||
| + | <img src="YellowButterfly.jpg" /> | ||
| + | <img src="MonarchOnPinkTree3.jpg" /> | ||
| + | <img src="Butterfly1.jpg" /> | ||
| + | </div></xml>}} | ||
| + | |||
| + | |||
| + | Here's a working example: | ||
<div class="image-slider"> | <div class="image-slider"> | ||
| Line 16: | Line 34: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
// <![CDATA[ | // <![CDATA[ | ||
| − | $(document).ready( function() { | + | $(document).ready(function() { |
| + | |||
| + | "use strict"; | ||
var delay = 5; | var delay = 5; | ||
| − | $('div.image-slider').each( function() { | + | $('div.image-slider').each(function() { |
| − | var div = $(this); | + | var div = $(this), w, h; |
// Create default data for this slider and store it in the element | // Create default data for this slider and store it in the element | ||
| Line 33: | Line 53: | ||
var image = $('<img />').attr('src', src); | var image = $('<img />').attr('src', src); | ||
div.data('images').push(src); | div.data('images').push(src); | ||
| − | + | w = $(this).width(); | |
| − | + | h = $(this).height(); | |
}); | }); | ||
| − | // Restructure the content of this sliders div into | + | // Restructure the content of this sliders div into layered divs with prev/next buttons |
var prev = '<a class="is-prev" href="javascript:">< prev</a>'; | var prev = '<a class="is-prev" href="javascript:">< prev</a>'; | ||
var next = '<a class="is-next" href="javascript:">next ></a>'; | var next = '<a class="is-next" href="javascript:">next ></a>'; | ||
| − | div.html( '< | + | div.html( '<div class="is-img1"><div class="is-img2">' + prev + next + '</div></div>' ); |
| − | $('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1 ); }); | + | $('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1, w); }); |
| − | $('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1 ); }); | + | $('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1, w); }); |
// Set the cell size to the image size and other css styles | // Set the cell size to the image size and other css styles | ||
| − | $(' | + | $('div',div).css({ padding: 0, width: w, height: h }); |
| − | + | $('.is-prev',div).css({ float: 'left', 'margin-top': h/2 }); | |
| − | $('.is-prev',div).css({ float: 'left' }); | + | $('.is-next',div).css({ float: 'right', 'margin-top': h/2 }); |
| − | $('.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 | ||
| − | slide(div, 0); | + | slide(div, 0, w); |
}); | }); | ||
| − | function slide(div, dir) { | + | function slide(div, dir, w) { |
// Set the new image and animate to it (bail if already animating) | // Set the new image and animate to it (bail if already animating) | ||
| Line 63: | Line 82: | ||
// Show next image on regular interval | // Show next image on regular interval | ||
if(div.data('timer')) clearTimeout(div.data('timer')); | if(div.data('timer')) clearTimeout(div.data('timer')); | ||
| − | div.data('timer', setTimeout(function() { slide(div,1); }, delay * 1000)); | + | div.data('timer', setTimeout(function() { slide(div, 1, w); }, delay * 1000)); |
// Play an animation from the current image to the next | // Play an animation from the current image to the next | ||
| Line 77: | Line 96: | ||
var next = ( image - dir ) % l; | var next = ( image - dir ) % l; | ||
image %= l; | image %= l; | ||
| − | var offset = -(div.data('dir') * fx.pos * | + | var offset = -(div.data('dir') * fx.pos * w); |
// Set the URL and position for the current image | // Set the URL and position for the current image | ||
| − | $(' | + | $('.is-img1', div).css( 'background', 'transparent url("' + div.data('images')[image] |
| − | + | + '") no-repeat ' + (offset + w * dir) + 'px center' ); | |
| − | + '") no-repeat ' | ||
| − | |||
| − | |||
| − | |||
// Set the URL and position for the next image | // Set the URL and position for the next image | ||
| − | $(' | + | $('.is-img2', div).css( 'background', 'transparent url("' |
| − | + div.data('images')[next] + '") no-repeat ' | + | + div.data('images')[next] + '") no-repeat ' + offset + 'px center' ); |
| − | |||
| − | |||
| − | |||
}, | }, | ||
complete: function(now, fx) { | complete: function(now, fx) { | ||
Revision as of 12:42, 31 March 2015
Here's a simple image slider written 100% in JavaScript and jQuery. In converts any div elements of class "image-slider" containing img elements into a slider like the one below. You can use your own CSS rules to give the next/prev links a nicer style and make a frame around the image. The images should all be the same size for it to work properly. The code is in our Subversion repository here.
In the wiki you can use image links as follows:
|
Or in a pure HTML environment you just use image links like this, and add the code into the head element of the HTML (of course this assumes that the images are in the same location as the HTML):
Here's a working example:
