Difference between revisions of "Image slider"
From Organic Design wiki
m (→CSS styles) |
m |
||
| Line 105: | Line 105: | ||
.image-slider .thumbs { | .image-slider .thumbs { | ||
width: 525px !important; | width: 525px !important; | ||
| − | |||
} | } | ||
.image-slider .thumbs img { | .image-slider .thumbs img { | ||
| Line 113: | Line 112: | ||
<script type="text/javascript"> | <script type="text/javascript"> | ||
// <![CDATA[ | // <![CDATA[ | ||
| + | /** | ||
| + | * ImageSlider.js | ||
| + | * | ||
| + | * Converts div elements containing sequences of images into a sliding image display | ||
| + | * - requires jQuery | ||
| + | * | ||
| + | * Copyright (c) 2012-2015, Aran Dunkley (http://www.organicdesign.co.nz/aran) | ||
| + | * | ||
| + | * Released under the GNU General Public Licence 2.0 or later | ||
| + | * | ||
| + | */ | ||
$(document).ready(function() { | $(document).ready(function() { | ||
| Line 120: | Line 130: | ||
* Initialise all image-slider elements in the page and start them sliding | * Initialise all image-slider elements in the page and start them sliding | ||
*/ | */ | ||
| − | $('div.image-slider').each(function() { | + | $('div.image-slider').each(function() { |
var div = $(this), i, j, w, h, img, thumb, prev, next; | var div = $(this), i, j, w, h, img, thumb, prev, next; | ||
| Line 154: | Line 164: | ||
div.data('height', h = $(this).height()); | div.data('height', h = $(this).height()); | ||
| − | // If the slider has thumbs set then | + | // If the slider has thumbs set then create another div with clickable thumbs in it (using the original images for the thumbs) |
if(div.data('thumbs') > 0) { | if(div.data('thumbs') > 0) { | ||
thumb = $('<div class="thumbs" />'); | thumb = $('<div class="thumbs" />'); | ||
| Line 170: | Line 180: | ||
} | } | ||
| − | // Restructure the content of this sliders div into layered divs with prev/next buttons | + | // Restructure the content of this sliders div into layered divs with prev/next buttons and thumbs below |
prev = '<a class="is-prev" href="javascript:">< prev</a>'; | prev = '<a class="is-prev" href="javascript:">< prev</a>'; | ||
next = '<a class="is-next" href="javascript:">next ></a>'; | next = '<a class="is-next" href="javascript:">next ></a>'; | ||
div.html( '<div class="is-img1"><div class="is-img2">' + prev + next + '</div></div>' ); | div.html( '<div class="is-img1"><div class="is-img2">' + prev + next + '</div></div>' ); | ||
| − | if(thumb) | + | if(thumb) div.append(thumb); |
| − | |||
| − | |||
| − | |||
$('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1); }); | $('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1); }); | ||
$('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1); }); | $('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1); }); | ||
// Set the container size to the image size and other css styles | // Set the container size to the image size and other css styles | ||
| − | $(' | + | $('.is-img1,.is-img2',div).css({ padding: 0, width: w, height: h }); |
$('.is-prev',div).css({ float: 'left', 'margin-top': h / 2 }); | $('.is-prev',div).css({ float: 'left', 'margin-top': h / 2 }); | ||
$('.is-next',div).css({ float: 'right', 'margin-top': h / 2 }); | $('.is-next',div).css({ float: 'right', 'margin-top': h / 2 }); | ||
| Line 199: | Line 206: | ||
var nx = n === undefined, | var nx = n === undefined, | ||
l = div.data('images').length, | l = div.data('images').length, | ||
| − | + | w = div.data('width'), | |
| − | + | h = div.data('height'), | |
| − | + | url1, url2; | |
// Bail if already animating, else set animation to start | // Bail if already animating, else set animation to start | ||
| Line 209: | Line 216: | ||
div.data('last', div.data('image')); | div.data('last', div.data('image')); | ||
div.data('image', nx ? (div.data('image') + dir + l) % l : n); | div.data('image', nx ? (div.data('image') + dir + l) % l : n); | ||
| − | + | url1 = div.data('images')[div.data('image')].attr('src'); | |
| − | + | url2 = div.data('images')[div.data('last')].attr('src'); | |
// Show next image on regular interval | // Show next image on regular interval | ||
| Line 216: | Line 223: | ||
div.data('timer', setTimeout(function() { slide(div, div.data('direction')); }, div.data('delay') * 1000)); | div.data('timer', setTimeout(function() { slide(div, div.data('direction')); }, div.data('delay') * 1000)); | ||
| − | // | + | // Animation the last image out and the new current image in |
div.animate({ t: 1 }, { | div.animate({ t: 1 }, { | ||
duration: div.data('duration'), | duration: div.data('duration'), | ||
| Line 232: | Line 239: | ||
// Set the positions of the images with CSS | // Set the positions of the images with CSS | ||
| − | $('.is- | + | $('.is-url1', div).css( 'background', 'url("' + url1 + '") no-repeat ' + x1 + 'px ' + y1 + 'px' ); |
| − | $('.is- | + | $('.is-url2', div).css( 'background', 'url("' + url2 + '") no-repeat ' + x2 + 'px ' + y2 + 'px' ); |
}, | }, | ||
complete: function(now, fx) { | complete: function(now, fx) { | ||
Revision as of 14:32, 1 April 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.
Configuration options
There are a few configuration options which you can include in the slider element's data attributes, using the syntax shown in the usage section below. The available configuration options are as follows:
| Name | Default | Description |
|---|---|---|
| thumbs | 0 | The pixel size of the thumbnails shown below the sliding image (0 means don't show thumbnails) |
| direction | 1 | Specifies whether the images' automatically slide to the left (-1) or right (1) |
| delay | 5 | The number of seconds delay until the image automatically slides to the next image |
| duration | 1000 | The number of milliseconds that the transition effect takes (note that this must be less than the delay) |
Usage
In the wiki you can use image links as follows:
|
Here's an example of a pure HTML page which has the links to the scripts and images included:
|
Example
Here's a working example which has the following syntax.
CSS styles
If you want to use the same CSS as this working example, the rules are as follows. Or you can see the CSS class attributes used here to make your own rules.
