Simple image slideshow - Revision history

Ash: /* Usage */

2017-03-29T15:02:46Z

‎Usage

Ash: /* Javascript */

2017-03-29T15:01:59Z

‎Javascript

Ash: /* CSS */

2017-03-29T15:01:29Z

‎CSS

Ash: /* CSS */

2017-03-29T15:01:15Z

‎CSS

Orry Verducci: Page creation

2016-12-16T10:44:12Z

Page creation

New page

The following code snippets allow you to add simple image slideshow functionality to your page or site, which will fade nicely between images after a set duration. The duration defaults to 5 seconds, but can be adjusted per slideshow if needed.

The CSS and Javascript snippets can be added to either a single page's CSS and Javascript, or can be added to your Global CSS and Global Javascript to enable the functionality site wide.

'''Please Note:''' The slideshow will be the size of the first image in the sequence. Ideally all the images in the sequence should be the same size.

== CSS ==

<nowiki>
.image-slideshow {
position: relative;
overflow: hidden;
}

.image-slideshow img {
top: 0;
left: 0;
position: absolute;
z-index: 1;
transition: opacity 1s;
opacity: 0;
width: 100% !important;
height: auto !important;
vertical-align: top;
will-change: opacity;
}

.image-slideshow img:first-child {
position: relative;
}

.image-slideshow img.active-image {
z-index: 3;
opacity: 1;
}

.image-slideshow img.previous-image {
z-index: 2;
opacity: 1;
}
</nowiki>

== Javascript ==

<nowiki>
$(function() {
$('.image-slideshow').each(function(index) {
var slideshowElement = this;
var duration = $(slideshowElement).attr('data-speed');
if (typeof duration == typeof undefined || duration == false) {
duration = 5;
} else {
duration = parseInt(duration);
}
$(slideshowElement).children('img:first').addClass('active-image');
setInterval(function() { CycleImage(slideshowElement); }, duration * 1000);
});
});

function CycleImage(slideshowElement){
var active = $(slideshowElement).children('.active-image');
var next = (active.next().length > 0) ? active.next() : $(slideshowElement).children('img:first');
active.addClass('previous-image');
active.removeClass('active-image');
next.addClass('active-image');
}

$(".image-slideshow").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
$(this).children('.previous-image').removeClass('previous-image');
});
</nowiki>

== Usage ==

To use the slideshow on a page, change the editor (CKEditor) to source view, and insert the follow snippet where you want the slideshow to appear:

<nowiki>
PUT IMAGES HERE
</nowiki>

Then change back to normal view, and replace the "PUT IMAGES HERE" text with the images you want to use, by inserting images as normal.

If you want to change the duration between each image change from 5 seconds to something else, add a "data-speed" attribute to the <code><nowiki></nowiki></code> tag set to the number of seconds you want the duration to be. For example for a 10 second duration, you tag would look like this:

<nowiki>
PUT IMAGES HERE
</nowiki>

@@ Line 74: / Line 74: @@
 To use the slideshow on a page, change the editor (CKEditor) to source view, and insert the follow snippet where you want the slideshow to appear:
-  <nowiki>
+  <syntaxhighlight lang="html" line='line'>
 <p class="image-slideshow">PUT IMAGES HERE</p>
-</nowiki>
+</syntaxhighlight>
 Then change back to normal view, and replace the "PUT IMAGES HERE" text with the images you want to use, by inserting images as normal.
@@ Line 82: / Line 82: @@
 If you want to change the duration between each image change from 5 seconds to something else, add a "data-speed" attribute to the <code><nowiki><p></nowiki></code> tag set to the number of seconds you want the duration to be. For example for a 10 second duration, you tag would look like this:
-  <nowiki>
+  <syntaxhighlight lang="javascript" line='line'>
 <p class="image-slideshow" data-speed="10">PUT IMAGES HERE</p>
-</nowiki>
+</syntaxhighlight>

@@ Line 42: / Line 42: @@
 == Javascript ==
-  <nowiki>
+  <syntaxhighlight lang="javascript" line='line'>
 $(function() {
      $('.image-slideshow').each(function(index) {
@@ Line 68: / Line 68: @@
      $(this).children('.previous-image').removeClass('previous-image');
 });
-</nowiki>
+</syntaxhighlight>
 == Usage ==

@@ Line 6: / Line 6: @@
 == CSS ==
-<syntaxhighlight lang="html" line='line'>
+<syntaxhighlight lang="css" line='line'>
 .image-slideshow  {
      position: relative;