Difference between revisions of "Image slider"

From Organic Design wiki
m
 
(32 intermediate revisions by 2 users not shown)
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 in a slider like the one below. The code is shown below the example.
+
Here's a simple image slider written 100% in [[JavaScript]] and [[jQuery]]. It 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 Git repository [https://code.organicdesign.co.nz/extensions/blob/master/jQuery/ImageSlider.js here] (Github [https://github.com/OrganicDesign/extensions/blob/master/jQuery/ImageSlider.js here]). Just copy the JavaScript into your wiki's [[MediaWiki:Common.js]] article, and any CSS rules into your wiki's [[MediaWiki:Common.css]] article.
  
−
<div class="image-slider">
+
== Configuration options ==
−
[[File:Butterfly3.jpg|512px]]
+
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:
−
[[File:YellowButterfly.jpg|512px]]
+
{|class=od-info
−
[[File:MonarchOnPinkTree3.jpg|512px]]
+
!Name!!Default!!Description
−
[[File:Butterfly1.jpg|512px]]
+
|-
−
</div>
+
|''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)
 +
|}
  
−
[[File:Butterfly3.jpg|125px]] [[File:YellowButterfly.jpg|125px]] [[File:MonarchOnPinkTree3.jpg|125px]] [[File:Butterfly1.jpg|125px]]
+
== Usage ==
 +
In the wiki you can use image links as follows:
 +
<source lang="xml"><div class="image-slider" data-thumbs="100" data-direction="-1">
 +
    [[File:Butterfly3.jpg|512px]]
 +
    [[File:YellowButterfly.jpg|512px]]
 +
    [[File:MonarchOnPinkTree3.jpg|512px]]
 +
    [[File:Butterfly1.jpg|512px]]
 +
</div></source>
  
  
−
<html>
+
Here's an example of a pure HTML page which has the links to the scripts and images included:
−
<script type="text/javascript">
+
<source lang="xml"><!DOCTYPE html>
−
// <![CDATA[
+
<html lang="en">
−
window.sliderdata = [];
+
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
−
window.sliderdelay = 5;
+
  <head>
−
$(document).ready( function() {
+
      <title>Image Slider</title>
 +
      <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
 +
      <script src="https://code.organicdesign.co.nz/extensions/raw/master/jQuery/ImageSlider.js" type="text/javascript"></script>
 +
  </head>
 +
  <body>
 +
      <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/f/f2/Red_hairy_caterpillar.jpg/500px-Red_hairy_caterpillar.jpg" />
 +
        <img src="http://www.organicdesign.co.nz/files/thumb/1/17/Green_and_red_caterpillar_2.jpg/500px-Green_and_red_caterpillar_2.jpg" />
 +
        <img src="http://www.organicdesign.co.nz/files/thumb/1/13/Black_caterpillar_with_yellow_stripes_1.jpg/500px-Black_caterpillar_with_yellow_stripes_1.jpg" />
 +
        <img src="http://www.organicdesign.co.nz/files/thumb/3/39/Yellow_hairy_caterpillar_2.jpg/500px-Yellow_hairy_caterpillar_2.jpg" />
 +
      </div>
 +
  </body>
 +
</html></source>
  
−
$('div.image-slider').each( function() {
 
−
var div = $(this);
 
  
−
// Create entry in common data for this slider
+
== Example ==
−
window.currentslider = window.sliderdata.length;
+
Here's a working example which has the following syntax.
−
div.attr('id', window.currentslider);
+
<source lang="xml">
−
var slider = { image: 0, dir: 0, images:[], div: div };
+
<div class="image-slider" data-thumbs="100">
−
window.sliderdata.push(slider);
+
  [[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>
 +
</source>
  
−
// Store the image urls found in this slider in this sliders data and preload them
 
−
$('img', div).css('display','none').each( function() {
 
−
var src = $(this).attr('src');
 
−
var image = $('<img />').attr('src', src);
 
−
window.sliderdata[currentslider].images.push( 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 with prev/next buttons
+
<div class="image-slider" data-thumbs="100">
−
var prev = '<a class="is-prev" href="javascript:window.image_slider(' + window.currentslider + ',-1)">&lt; prev</a>';
+
[[File:Butterfly3.jpg|520px]]
−
var next = '<a class="is-next" href="javascript:window.image_slider(' + window.currentslider + ',1)">next &gt;</a>';
+
[[File:Orange and yellow butterfly 1.jpg|520px]]
−
div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' );
+
[[File:Butterfly1.jpg|520px]]
−
 
+
[[File:Blue butterfly on chia.jpg|520px]]
−
// Set the cell size to the image size and other css styles
+
[[File:2015 red butterfly 2.jpg|520px]]
−
$('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' });
+
</div>
−
$('td,th',div).css({ padding: 0, 'vertical-align': 'middle' });
+
<div style="clear:both"></div>
−
$('.is-prev',div).css({ float: 'left' });
 
−
$('.is-next',div).css({ float: 'right' });
 
−
 
 
−
// Initialise the table's images to first image with zero offset
 
−
window.image_slider( window.currentslider, 0 );
 
−
 
 
−
});
 
−
});
 
−
 
 
−
window.image_slider = function( slider, dir ) {
 
−
 
 
−
// Set the new image and animate to it (bail if already animating)
 
−
var data = window.sliderdata[slider];
 
−
if( data.dir ) return;
 
−
data.image += dir;
 
−
data.dir = dir;
 
−
 
 
−
// Show next image on regular interval
 
−
if( 'timer' in data ) clearTimeout(data.timer);
 
−
data.timer = setTimeout('window.image_slider(' + slider + ',1)', window.sliderdelay * 1000);
 
−
 
 
−
// Play an animation from the current image to the next
 
−
data.div.animate({ t: 1 }, {
 
−
duration: 1000,
 
−
step: function(now, fx) {
 
−
var div = $(fx.elem);
 
−
var data = window.sliderdata[div.attr('id')];
 
−
 
 
−
// Get the URLs for the current and next image
 
−
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;
 
−
 
 
−
// Set the URL and position for the current image
 
−
$('th', div).css('background', 'transparent url("'
 
−
+ data.images[image]
 
−
+ '") no-repeat '
 
−
+ (offset + data.w * dir)
 
−
+ 'px center'
 
−
);
 
−
 
 
−
// Set the URL and position for the next image
 
−
$('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; // mark current slider as no longer animating
 
−
}
 
−
});
 
−
};
 
−
// ]]>
 
−
</script>
 
−
</html>
 
−
 
 
−
 
 
−
== The code ==
 
−
<js>
 
−
window.sliderdata = [];
 
−
window.sliderdelay = 5;
 
−
$(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 and preload them
 
−
$('img', div).css('display','none').each( function() {
 
−
var src = $(this).attr('src');
 
−
var image = $('<img />').attr('src', src);
 
−
window.sliderdata[currentslider].images.push( 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 with prev/next buttons
 
−
var prev = '<a class="is-prev" href="javascript:window.image_slider(' + window.currentslider + ',-1)">&lt; prev</a>';
 
−
var next = '<a class="is-next" href="javascript:window.image_slider(' + window.currentslider + ',1)">next &gt;</a>';
 
−
div.html( '<table><tr><th><table><tr><td>' + prev + next + '</td></tr></table></th></tr></table>' );
 
−
 
 
−
// Set the cell size to the image size and other css styles
 
−
$('table',div).css({ background: 'transparent', width: slider.w, height: slider.h, 'border-collapse': 'collapse' });
 
−
$('td,th',div).css({ padding: 0, 'vertical-align': 'middle' });
 
−
$('.is-prev',div).css({ float: 'left' });
 
−
$('.is-next',div).css({ float: 'right' });
 
−
 
 
−
// Initialise the table's images to first image with zero offset
 
−
image_slider( window.currentslider, 0 );
 
−
});
 
−
 
 
−
function image_slider( slider, dir ) {
 
−
 
 
−
// Set the new image and animate to it (bail if already animating)
 
−
var data = window.sliderdata[slider];
 
−
if( data.dir ) return;
 
−
data.image += dir;
 
−
data.dir = dir;
 
−
 
 
−
// Show next image on regular interval
 
−
if( 'timer' in data ) clearTimeout(data.timer);
 
−
data.timer = setTimeout('window.image_slider(' + slider + ',1)', window.sliderdelay * 1000);
 
−
 
 
−
// Play an animation from the current image to the next
 
−
data.div.animate({ t: 1 }, {
 
−
duration: 1000,
 
−
step: function(now, fx) {
 
−
var div = $(fx.elem);
 
−
var data = window.sliderdata[div.attr('id')];
 
−
 
 
−
// Get the URLs for the current and next image
 
−
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;
 
  
−
// Set the URL and position for the current image
 
−
$('th', div).css('background', 'transparent url("'
 
−
+ data.images[image]
 
−
+ '") no-repeat '
 
−
+ (offset + data.w * dir)
 
−
+ 'px center'
 
−
);
 
  
−
// Set the URL and position for the next image
+
== CSS styles ==
−
$('td', div).css('background', 'transparent url("'
+
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.
−
+ data.images[next]+'") no-repeat '
+
<source lang="css">
−
+ offset
+
/* style for next/prev links in "Image slider" page */
−
+ 'px center'
+
.image-slider .is-next, .image-slider .is-prev {
−
);
+
    background-color: black;
−
},
+
    color: white;
−
complete: function(now, fx) {
+
    text-decoration: none;
−
var data = window.sliderdata[$(this).attr('id')];
+
    outline: 0;
−
data.dir = 0; // mark current slider as no longer animating
+
    font-size: 15px;
−
}
+
    font-weight: bold;
−
});
+
    -moz-border-radius: 11px;
−
};
+
    -webkit-border-radius: 11px;
−
});
+
    -khtml-border-radius: 11px;
−
</js>
+
    border-radius: 11px;
 +
    padding: 5px 14px;
 +
    margin: 5px;
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
 +
    filter: alpha(opacity=50);  /* IE 5-7 */
 +
    -moz-opacity: 0.5;          /* Netscape */
 +
    -khtml-opacity: 0.5;        /* Safari 1.x */
 +
    opacity: 0.5;               /* Good browsers */
 +
}
 +
.image-slider .is-next:hover, .image-slider .is-prev:hover {
 +
    text-decoration: none;
 +
    outline: 0;
 +
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
 +
    filter: alpha(opacity=100);
 +
    -moz-opacity: 1;
 +
    -khtml-opacity: 1;
 +
    opacity: 1;
 +
}
 +
.image-slider .thumbs {
 +
    width: 525px !important;
 +
}
 +
.image-slider .thumbs img {
 +
    margin: 5px 5px 0 0;
 +
}
 +
</source>
 +
[[Category:JavaScript]][[Category:Examples]]

Latest revision as of 08:26, 10 April 2016

Here's a simple image slider written 100% in JavaScript and jQuery. It 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 Git repository here (Github here). Just copy the JavaScript into your wiki's MediaWiki:Common.js article, and any CSS rules into your wiki's MediaWiki:Common.css article.

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: 

<div class="image-slider" data-thumbs="100" data-direction="-1">
    [[File:Butterfly3.jpg|512px]]
    [[File:YellowButterfly.jpg|512px]]
    [[File:MonarchOnPinkTree3.jpg|512px]]
    [[File:Butterfly1.jpg|512px]]
</div>


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

<!DOCTYPE html>
<html lang="en">
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <head>
      <title>Image Slider</title>
      <script src="http://code.jquery.com/jquery-1.11.1.min.js" type="text/javascript"></script>
      <script src="https://code.organicdesign.co.nz/extensions/raw/master/jQuery/ImageSlider.js" type="text/javascript"></script>
   </head>
   <body>
      <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/f/f2/Red_hairy_caterpillar.jpg/500px-Red_hairy_caterpillar.jpg" />
         <img src="http://www.organicdesign.co.nz/files/thumb/1/17/Green_and_red_caterpillar_2.jpg/500px-Green_and_red_caterpillar_2.jpg" />
         <img src="http://www.organicdesign.co.nz/files/thumb/1/13/Black_caterpillar_with_yellow_stripes_1.jpg/500px-Black_caterpillar_with_yellow_stripes_1.jpg" />
         <img src="http://www.organicdesign.co.nz/files/thumb/3/39/Yellow_hairy_caterpillar_2.jpg/500px-Yellow_hairy_caterpillar_2.jpg" />
      </div>
   </body>
</html>


Example

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

<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>


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

/* style for next/prev links in "Image slider" page */
.image-slider .is-next, .image-slider .is-prev {
    background-color: black;
    color: white;
    text-decoration: none;
    outline: 0;
    font-size: 15px;
    font-weight: bold;
    -moz-border-radius: 11px;
    -webkit-border-radius: 11px;
    -khtml-border-radius: 11px;
    border-radius: 11px;
    padding: 5px 14px;
    margin: 5px;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; /* IE 8 */
    filter: alpha(opacity=50);  /* IE 5-7 */
    -moz-opacity: 0.5;          /* Netscape */
    -khtml-opacity: 0.5;        /* Safari 1.x */
    opacity: 0.5;               /* Good browsers */
}
.image-slider .is-next:hover, .image-slider .is-prev:hover {
    text-decoration: none;
    outline: 0;
    -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
    filter: alpha(opacity=100);
    -moz-opacity: 1;
    -khtml-opacity: 1;
    opacity: 1;
}
.image-slider .thumbs {
    width: 525px !important;
}
.image-slider .thumbs img {
    margin: 5px 5px 0 0;
}
Retrieved from "https://organicdesign.nz/wiki/index.php?title=Image_slider&oldid=121205"