Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
A simple slide show
/*
Author: Qawelesizwe Mlilo
Email: qawemlilo@gmail.com
Dependency: Mootools
Notes: This code was used in a Joomla! project and can be easily modified to run without a library
*/
var slideShow = function (img, o) {
this.element = $(img);
this.images = o.images;
this.speed = o.speed;
this.repeats = o.repeats;
this.start = function () {
//local variables
var main = this.element, imgs = this.images, i, c = 0, r = 0, imageFolder = [],
interval_id, imgObj = new Image(), repeates = this.repeates speed = this.speed;
//preload first image
imageFolder[c] = imgObj;
imageFolder[c].src = imgs[c];
main.addEvent('mouseover', function() {
clearInterval(interval_id)
});
main.addEvent('mouseout', function() {
interval_id = window.setInterval(change, speed);
});
function change () {
if (c < imgs.length) {
//check if next image is preloading
if (!(imageFolder[c + 1]) && (c + 1) < imgs.length) {
imageFolder[c + 1] = imgObj;
imageFolder[c + 1].src = imgs[c + 1]; // preload next image
}
// if this image has not completed preloading
if (!imageFolder[c].complete) {
imageFolder[c].addEvent('load', function () {
main.src = imgs[c]; // only change the slide once it has been loaded
});
}
else { //image is loaded
main.src = imgs[c]; // change current image
}
c++; // next image please
}
// check if slide should repeat
else if (repeates > 0 && r < repeates) { //end of slide
c = 0; // reset slide
change(); // start again;
r++;
}
}
interval_id = window.setInterval(change, speed);
};
};
// how it is used
var myPresentation = new slideShow("image_id", {
images: ['img_one_url.jpg','img_two_url.jpg','img_three_url.jpg'], // slide images
speed: 4000, // slide time interval
repeats: 1 // repeats slide once
});
myPresentation.start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment