Difference between revisions of "Image slider"

From Organic Design wiki
m
m
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.
  
 
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">
+
{{code|1=<xml><div class="image-slider thumbs">
 
     [[File:Butterfly3.jpg|512px]]
 
     [[File:Butterfly3.jpg|512px]]
 
     [[File:YellowButterfly.jpg|512px]]
 
     [[File:YellowButterfly.jpg|512px]]
Line 21: Line 23:
 
Here's a working example:
 
Here's a working example:
  
−
<div class="image-slider">
+
<div class="image-slider thumbs">
 
[[File:Butterfly3.jpg|500px]]
 
[[File:Butterfly3.jpg|500px]]
 
[[File:Orange and yellow butterfly 1.jpg|500px]]
 
[[File:Orange and yellow butterfly 1.jpg|500px]]
Line 28: Line 30:
 
[[File:2015 red butterfly 2.jpg|500px]]
 
[[File:2015 red butterfly 2.jpg|500px]]
 
</div>
 
</div>
−
 
−
[[File:Butterfly3.jpg|100px]][[File:Orange and yellow butterfly 1.jpg|100px]][[File:Butterfly1.jpg|100px]][[File:Blue butterfly on chia.jpg|100px]][[File:2015 red butterfly 2.jpg|100px]]
 
−
 
  
 
<html>
 
<html>
Line 39: Line 38:
 
"use strict";
 
"use strict";
  
−
var delay = 5;
+
var delay = 2;
 +
var thumbWidth = 100;
  
 +
/**
 +
* Initialise all image-slider elements i the page and start them sliding
 +
*/
 
$('div.image-slider').each(function() {
 
$('div.image-slider').each(function() {
−
var div = $(this), w, h;
+
var div = $(this), w, h, src, thumb, img, prev, next;
  
−
// Create default data for this slider and store it in the element
+
// Initialise data structure in this slider element
−
div.data('image', 0);
+
div.data({
−
div.data('dir', 0);
+
image: 1,
−
div.data('images', []);
+
last: 0,
 +
dir: 0,
 +
images: [],
 +
width: 0,
 +
height: 0,
 +
});
  
−
// Store the image urls found in this slider div in its data and preload them
+
// If the slider has class "thumbs" then add another div that will have the thumbs in it
 +
if(div.hasClass('thumbs')) thumb = $('<div />').addClass('thumbs');
 +
 
 +
// Store the image urls found in this slider div in its data and preload them, and add thumbs if set
 
$('img', div).css('display','none').each(function() {
 
$('img', div).css('display','none').each(function() {
−
var src = $(this).attr('src');
+
src = $(this).attr('src');
−
var image = $('<img />').attr('src', src);
+
img = $('<img />').attr('src', src);
 
div.data('images').push(src);
 
div.data('images').push(src);
−
w = $(this).width();
+
div.data('width', w = $(this).width());
−
h = $(this).height();
+
div.data('height', h = $(this).height());
 +
if(thumb) {
 +
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() {
 +
slide($('div.image-slider').has(this), 1, $(this).data('index'));
 +
});
 +
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
−
var prev = '<a class="is-prev" href="javascript:">&lt; prev</a>';
+
prev = '<a class="is-prev" href="javascript:">&lt; prev</a>';
−
var next = '<a class="is-next" href="javascript:">next &gt;</a>';
+
next = '<a class="is-next" href="javascript:">next &gt;</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>' );
−
$('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1, w); });
+
if(thumb) div.append(thumb);
−
$('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1, w); });
+
$('.is-prev', div).click(function() { slide($('div.image-slider').has(this), -1); });
 +
$('.is-next', div).click(function() { slide($('div.image-slider').has(this), 1); });
  
−
// Set the cell 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 });
  
−
// Initialise the table's images to first image with zero offset
+
// Start the sliding process
−
slide(div, 0, w);
+
slide(div, 1);
 
});
 
});
  
−
function slide(div, dir, w) {
+
/**
 +
* Start animating the passed div
 +
* - dir is -1 or +1 for the direction to animate (left or right)
 +
* - n allows the new image to be specified rather than just next/prev (it will scroll upward)
 +
*/
 +
function slide(div, dir, n) {
 +
var l = div.data('images').length,
 +
w = div.data('width'),
 +
h = div.data('height'),
 +
img1, img2;
 +
 
 +
// Bail if already animating, else set animation to start
 +
if(div.data('dir')) return; else div.data('dir', dir);
  
−
// Set the new image and animate to it (bail if already animating)
+
// Set the new image either to the next according to the passed direction, or to n if passed
−
if(div.data('dir')) return;
+
div.data('last', div.data('image'));
−
div.data('image', div.data('image') + dir);
+
div.data('image', n === undefined ? (div.data('image') + dir + l) % l : n);
−
div.data('dir', dir);
+
img1 = div.data('images')[div.data('image')];
 +
img2 = div.data('images')[div.data('last')];
  
 
// 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, w); }, delay * 1000));
+
div.data('timer', setTimeout(function() { slide(div, 1); }, delay * 1000));
  
 
// Play an animation from the current image to the next
 
// Play an animation from the current image to the next
Line 89: Line 124:
 
duration: 1000,
 
duration: 1000,
 
step: function(now, fx) {
 
step: function(now, fx) {
−
var div = $(fx.elem);
+
var div = $(fx.elem), offset, x1, y1, x2, y2;
  
−
// Get the URLs for the current and next image
+
// Set an offset in pixels for the transition between the current and last image
−
var l = div.data('images').length;
+
offset = -div.data('dir') * fx.pos * (n === undefined ? w : h);
−
var image = div.data('image');
 
−
image += l * 1000000;
 
−
var next = ( image - dir ) % l;
 
−
image %= l;
 
−
var offset = -(div.data('dir') * fx.pos * w);
 
  
−
// Set the URL and position for the current image
+
// Calculate the positions of the current and last image (images specified with n scroll upward)
−
$('.is-img1', div).css( 'background', 'transparent url("' + div.data('images')[image]
+
x1 = n === undefined ? offset + w * dir : 0;
−
+ '") no-repeat ' + (offset + w * dir) + 'px center' );
+
x2 = n === undefined ? offset : 0;
 +
y1 = n === undefined ? 0 : offset + h * dir;
 +
y2 = n === undefined ? 0 : offset;
  
−
// Set the URL and position for the next image
+
// Set the positions of the images with CSS
−
$('.is-img2', div).css( 'background', 'transparent url("'
+
$('.is-img1', div).css( 'background', 'url("' + img1 + '") no-repeat ' + x1 + 'px ' + y1 + 'px' );
−
+ div.data('images')[next] + '") no-repeat ' + offset + 'px center' );
+
$('.is-img2', div).css( 'background', 'url("' + img2 + '") no-repeat ' + x2 + 'px ' + y2 + 'px' );
 
},
 
},
 
complete: function(now, fx) {
 
complete: function(now, fx) {

Revision as of 18:16, 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.

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.

In the wiki you can use image links as follows:

<xml>
   Butterfly3.jpg
   YellowButterfly.jpg
   MonarchOnPinkTree3.jpg
   Butterfly1.jpg
</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):

<xml>
   <img src="Butterfly3.jpg" />
   <img src="YellowButterfly.jpg" />
   <img src="MonarchOnPinkTree3.jpg" />
   <img src="Butterfly1.jpg" />
</xml>


Here's a working example:

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

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