Difference between revisions of "Simple image slideshow"
(→CSS) |
(→Usage) |
||
| (2 intermediate revisions by the same user not shown) | |||
| Line 6: | Line 6: | ||
== CSS == | == CSS == | ||
| − | <syntaxhighlight lang=" | + | <syntaxhighlight lang="css" line='line'> |
.image-slideshow { | .image-slideshow { | ||
position: relative; | position: relative; | ||
| Line 42: | Line 42: | ||
== Javascript == | == Javascript == | ||
| − | < | + | <syntaxhighlight lang="javascript" line='line'> |
$(function() { | $(function() { | ||
$('.image-slideshow').each(function(index) { | $('.image-slideshow').each(function(index) { | ||
| Line 68: | Line 68: | ||
$(this).children('.previous-image').removeClass('previous-image'); | $(this).children('.previous-image').removeClass('previous-image'); | ||
}); | }); | ||
| − | </ | + | </syntaxhighlight> |
== Usage == | == Usage == | ||
| 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: | 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: | ||
| − | < | + | <syntaxhighlight lang="html" line='line'> |
<p class="image-slideshow">PUT IMAGES HERE</p> | <p class="image-slideshow">PUT IMAGES HERE</p> | ||
| − | </ | + | </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. | 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: | 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: | ||
| − | < | + | <syntaxhighlight lang="javascript" line='line'> |
<p class="image-slideshow" data-speed="10">PUT IMAGES HERE</p> | <p class="image-slideshow" data-speed="10">PUT IMAGES HERE</p> | ||
| − | </ | + | </syntaxhighlight> |
Latest revision as of 15:02, 29 March 2017
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
1 .image-slideshow {
2 position: relative;
3 overflow: hidden;
4 }
5
6 .image-slideshow img {
7 top: 0;
8 left: 0;
9 position: absolute;
10 z-index: 1;
11 transition: opacity 1s;
12 opacity: 0;
13 width: 100% !important;
14 height: auto !important;
15 vertical-align: top;
16 will-change: opacity;
17 }
18
19 .image-slideshow img:first-child {
20 position: relative;
21 }
22
23 .image-slideshow img.active-image {
24 z-index: 3;
25 opacity: 1;
26 }
27
28 .image-slideshow img.previous-image {
29 z-index: 2;
30 opacity: 1;
31 }
Javascript
1 $(function() {
2 $('.image-slideshow').each(function(index) {
3 var slideshowElement = this;
4 var duration = $(slideshowElement).attr('data-speed');
5 if (typeof duration == typeof undefined || duration == false) {
6 duration = 5;
7 } else {
8 duration = parseInt(duration);
9 }
10 $(slideshowElement).children('img:first').addClass('active-image');
11 setInterval(function() { CycleImage(slideshowElement); }, duration * 1000);
12 });
13 });
14
15 function CycleImage(slideshowElement){
16 var active = $(slideshowElement).children('.active-image');
17 var next = (active.next().length > 0) ? active.next() : $(slideshowElement).children('img:first');
18 active.addClass('previous-image');
19 active.removeClass('active-image');
20 next.addClass('active-image');
21 }
22
23 $(".image-slideshow").bind("transitionend webkitTransitionEnd oTransitionEnd MSTransitionEnd", function(){
24 $(this).children('.previous-image').removeClass('previous-image');
25 });
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:
1 <p class="image-slideshow">PUT IMAGES HERE</p>
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 <p> 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:
1 <p class="image-slideshow" data-speed="10">PUT IMAGES HERE</p>
