Difference between revisions of "Image slider"

From Organic Design wiki
m
(new code and config info)
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 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].
 
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].
  
−
There are two variables at the start of the code, '''delay''' and '''thumbWidth''', these determine the time in seconds before the next image change, and the width in pixels of the thumbnail images below the sliding image. Each image slider div element can be configured to have a row of clickable thumbnail images below the sliding image by adding "thumbs" to the ''class'' attribute as in the example code following.
+
== 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:
 +
{|class=od-info
 +
!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:
 
In the wiki you can use image links as follows:
−
{{code|1=<xml><div class="image-slider thumbs">
+
{{code|1=<xml><div class="image-slider" data-thumbs="100" data-direction="-1">
 
     [[File:Butterfly3.jpg|512px]]
 
     [[File:Butterfly3.jpg|512px]]
 
     [[File:YellowButterfly.jpg|512px]]
 
     [[File:YellowButterfly.jpg|512px]]
Line 22: Line 39:
 
   </head>
 
   </head>
 
   <body>
 
   <body>
−
       <div class="image-slider thumbs">
+
       <div class="image-slider" data-thumbs="100">
 
         <img src="http://www.organicdesign.co.nz/files/thumb/1/12/Yellow_caterpillar_with_red_face.jpg/500px-Yellow_caterpillar_with_red_face.jpg" />
 
         <img src="http://www.organicdesign.co.nz/files/thumb/1/12/Yellow_caterpillar_with_red_face.jpg/500px-Yellow_caterpillar_with_red_face.jpg" />
 
         <img src="http://www.organicdesign.co.nz/files/thumb/f/f2/Red_hairy_caterpillar.jpg/500px-Red_hairy_caterpillar.jpg" />
 
         <img src="http://www.organicdesign.co.nz/files/thumb/f/f2/Red_hairy_caterpillar.jpg/500px-Red_hairy_caterpillar.jpg" />
Line 33: Line 50:
  
  
−
Here's a working example:
+
== Example ==
 +
Here's a working example which has the following syntax.
 +
{{code|<xml><div class="image-slider" data-thumbs="100">
 +
[[File:Butterfly3.jpg|520px]]
 +
[[File:Orange and yellow butterfly 1.jpg|520px]]
 +
[[File:Butterfly1.jpg|520px]]
 +
[[File:Blue butterfly on chia.jpg|520px]]
 +
[[File:2015 red butterfly 2.jpg|520px]]
 +
</div></xml>}}
  
−
<div class="image-slider thumbs">
+
<div class="image-slider" data-thumbs="100">
 
[[File:Butterfly3.jpg|520px]]
 
[[File:Butterfly3.jpg|520px]]
 
[[File:Orange and yellow butterfly 1.jpg|520px]]
 
[[File:Orange and yellow butterfly 1.jpg|520px]]
Line 43: Line 68:
 
</div>
 
</div>
  
−
 
+
== CSS styles ==
−
If you want to use the same CSS as this working example, the rules are as follows:
+
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 to make your own rules.
 
{{code|<css>/* style for next/prev links in "Image slider" page */
 
{{code|<css>/* style for next/prev links in "Image slider" page */
 
.image-slider .is-next, .image-slider .is-prev {
 
.image-slider .is-next, .image-slider .is-prev {
Line 83: Line 108:
  
 
"use strict";
 
"use strict";
−
 
−
var delay = 2;
 
−
var thumbWidth = 100;
 
  
 
/**
 
/**
Line 91: Line 113:
 
*/
 
*/
 
$('div.image-slider').each(function() {
 
$('div.image-slider').each(function() {
−
var div = $(this), w, h, src, thumb, img, prev, next;
+
var div = $(this), i, j, w, h, img, thumb, prev, next;
  
 
// Initialise data structure in this slider element
 
// Initialise data structure in this slider element
 
div.data({
 
div.data({
−
image: 1,
+
images: [],  // array of all the images in this slider (preloaded)
−
last: 0,
+
image: 1,   // the currently displaying image in this slider
−
dir: 0,
+
last:   0,   // the previous image transitioning out
−
images: [],
+
dir:   0,   // the direction of the current transition (-1 or +1)
−
width: 0,
+
width: 0,   // width of this sliders images
−
height: 0,
+
height: 0,   // height of this sliders images
 
});
 
});
  
−
// Only continue initualising this slider after the first image has loaded so we can get the dimensions
+
// Set config defaults if not supplied in html data
−
$('img:first',div).load(function() {
+
if(!div.data('delay')) div.data('delay', 5);
 +
if(!div.data('direction')) div.data('direction', 1);
 +
if(!div.data('duration')) div.data('duration', 1000);
 +
if(!div.data('thumbs')) div.data('thumbs', 0);
 +
 
 +
// Store the images in the slider element's data
 +
j = $('img', div).get();
 +
for( i = 0; i < j.length; i++ ) {
 +
img = $(j[i]);
 +
img.css('display','none');
 +
div.data('images').push(img);
 +
}
 +
 
 +
// Only continue initialising this slider after the first image has loaded so we can get the dimensions
 +
div.data('images')[0].load(function() {
  
 
// Store the image dimentions in our slider div element's data
 
// Store the image dimentions in our slider div element's data
Line 110: Line 146:
 
div.data('height', h = $(this).height());
 
div.data('height', h = $(this).height());
  
−
// If the slider has class "thumbs" then add another div that will have the thumbs in it
+
// If the slider has thumbs set then add another div with clickable thumbs in it (using the original images for the thumbs)
−
if(div.hasClass('thumbs')) thumb = $('<div />').addClass('thumbs');
+
if(div.data('thumbs') > 0) {
−
 
+
thumb = $('<div />').addClass('thumbs').css({height: 'auto'});
−
// Store the image urls found in this slider div in its data and preload them, and add thumbs if set
+
for( i = 0; i < div.data('images').length; i++ ) {
−
$('img', div).css('display','none').each(function() {
+
img = div.data('images')[i];
−
src = $(this).attr('src');
+
img.width(div.data('thumbs'));
−
img = $('<img />').attr('src', src);
+
img.height(h*div.data('thumbs')/w);
−
div.data('images').push(src);
+
img.css({float: 'left', cursor: 'pointer', display: ''});
−
if(thumb) {
+
img.data('index', i);
−
img.width(thumbWidth);
 
−
img.height(h*thumbWidth/w);
 
−
img.css({float: 'left', cursor: 'pointer'});
 
−
img.data('index',div.data('images').length - 1);
 
 
img.click(function() {
 
img.click(function() {
 
slide($('div.image-slider').has(this), 1, $(this).data('index'));
 
slide($('div.image-slider').has(this), 1, $(this).data('index'));
Line 128: Line 160:
 
thumb.append(img);
 
thumb.append(img);
 
}
 
}
−
});
+
}
  
 
// 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
Line 140: Line 172:
 
// Set the container size to the image size and other css styles
 
// Set the container size to the image size and other css styles
 
$('div',div).css({ padding: 0, width: w, height: h });
 
$('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', 'margin-top': h / 2 });
−
$('.is-next',div).css({ float: 'right', 'margin-top': h/2 });
+
$('.is-next',div).css({ float: 'right', 'margin-top': h / 2 });
  
 
// Start the sliding process
 
// Start the sliding process
−
slide(div, 1);
+
slide(div, div.data('direction'));
 
});
 
});
 
});
 
});
Line 154: Line 186:
 
*/
 
*/
 
function slide(div, dir, n) {
 
function slide(div, dir, n) {
−
var l = div.data('images').length,
+
var nx = n === undefined,
 +
    l = div.data('images').length,
 
w = div.data('width'),
 
w = div.data('width'),
 
h = div.data('height'),
 
h = div.data('height'),
Line 164: Line 197:
 
// Set the new image either to the next according to the passed direction, or to n if passed
 
// Set the new image either to the next according to the passed direction, or to n if passed
 
div.data('last', div.data('image'));
 
div.data('last', div.data('image'));
−
div.data('image', n === undefined ? (div.data('image') + dir + l) % l : n);
+
div.data('image', nx ? (div.data('image') + dir + l) % l : n);
−
img1 = div.data('images')[div.data('image')];
+
img1 = div.data('images')[div.data('image')].attr('src');
−
img2 = div.data('images')[div.data('last')];
+
img2 = div.data('images')[div.data('last')].attr('src');
  
 
// 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, div.data('direction')); }, div.data('delay') * 1000));
  
 
// Play an animation from the current image to the next
 
// Play an animation from the current image to the next
 
div.animate({ t: 1 }, {
 
div.animate({ t: 1 }, {
−
duration: 1000,
+
duration: div.data('duration'),
 
step: function(now, fx) {
 
step: function(now, fx) {
 
var div = $(fx.elem), offset, x1, y1, x2, y2;
 
var div = $(fx.elem), offset, x1, y1, x2, y2;
  
 
// Set an offset in pixels for the transition between the current and last image
 
// Set an offset in pixels for the transition between the current and last image
−
offset = -div.data('dir') * fx.pos * (n === undefined ? w : h);
+
offset = -div.data('dir') * fx.pos * (nx ? w : h);
  
 
// Calculate the positions of the current and last image (images specified with n scroll upward)
 
// Calculate the positions of the current and last image (images specified with n scroll upward)
−
x1 = n === undefined ? offset + w * dir : 0;
+
x1 = nx ? offset + w * dir : 0;
−
x2 = n === undefined ? offset : 0;
+
x2 = nx ? offset : 0;
−
y1 = n === undefined ? 0 : offset + h * dir;
+
y1 = nx ? 0 : offset + h * dir;
−
y2 = n === undefined ? 0 : offset;
+
y2 = nx ? 0 : offset;
  
 
// Set the positions of the images with CSS
 
// Set the positions of the images with CSS

Revision as of 13:37, 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:

<xml>
   Butterfly3.jpg
   YellowButterfly.jpg
   MonarchOnPinkTree3.jpg
   Butterfly1.jpg
</xml>


Here's an example of a pure HTML page which has the links to the scripts and images included:

<xml><!DOCTYPE html>

Image Slider

</xml>


Example

Here's a working example which has the following syntax.

{{{1}}}

Butterfly3.jpg Ethilla Longwing 1.jpg Butterfly1.jpg Blue butterfly on chia.jpg 2015 red butterfly 2.jpg

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 to make your own rules.

{{{1}}}

Retrieved from "https://organicdesign.nz/wiki/index.php?title=Image_slider&oldid=119500"