SimpleSlideshowIt – MooTools Slideshow

Posted: March 14th, 2009 | Author: Matt | Filed under: IE6, IT, JavaScript, MooTools, Optimization, Web Programming | Tags: , , | 2 Comments »

I’ve been trying to find a simple, easy to use MooTools 1.2 slideshow class that can be applied to things other than images.  This is my solution.  I primarily wrote it to deal with images but later I modified it so work with any HTML content.  I hope to add more features in the future when I get the time.

Demo:

The images below were all taken by me, if used please credit me in some way.

Bellingham, WABellingham, WAWhistler, BCWhistler, BCWhistler, BCWhistler, BC

Features:

  • Fade in of new elements.
  • You can set the time between slides.
  • You can set the time for the transition to last.
  • You can easily add a menu to control slides.
  • You can set a delay after a user selects a slide.
  • You can start slide show at defined slide.

Requirements:

Usage:

window.addEvent('domready', function() {
	var slideshow = new SimpleSlideshowIt(elementsContainer[, options]);
});

elementsContainer

The ID attribute of the element containing all the images or slides.

options

Below are the possible options you can set and their default values as seen on this page.

duration : 750, // how long the effect lasts (miliseconds)
delay : 7000, // how long each slide is displayed (miliseconds)
start : 0, // the slideshow starts on when the page first loads
 
caption_id : null, // the ID attribute of the element that will contain the caption for each slide which is held in the TITLE attribute of each element
 
menu : { // a set of items are to be linked to each slide
	togglers : null, // a collection of elements
	delay_after_click : 0 // how long a slide is displayed after a user toggles to a new slide (miliseconds)
}

Download:

SimpleSlideshowIt.js

2 Comments on “SimpleSlideshowIt – MooTools Slideshow”

  1. #1 Erken said at 12:21 pm on December 6th, 2009:

    Great work!:) I wanted to use phatfusion’s slideshow at first but because it uses Mootools v 1.1 it didn’t fit with my website.

    Thanks to your js it looks the same and works perfect!

    One thing I haven’t tried yet (maybe you could do it as an example) : Could you replace the squares you use by thumbnails of the pictures?

    Thanks again!

  2. #2 Matt said at 9:51 pm on December 8th, 2009:

    Erken, thanks for the comment.

    I haven’t decided if i want to add this option to the JS because i’d rather not create a script that ends up being really huge. I know it wouldn’t take much work to add the thumbs support but I just haven’t decided how i want to deal with detailed customizations like this. Hopefully i’ll get the time over the holidays.

Leave a Reply