Create a Simple Slideshow Using MooTools
One excellent way to add dynamism to any website is to implement a slideshow featuring images or sliding content. Of course there are numerous slideshow plugins available but many of them can be overkill if you want to do simple slideshow without controls or events. We're going to create a simple slideshow from which we'll build on.
The HTML
<div id="slideshow-container"> <img src="slideshow/cricci1.jpg" alt="Christina Ricci" /> <img src="slideshow/cricci2.jpg" alt="Christina Ricci" /> <img src="slideshow/cricci3.jpg" alt="Christina Ricci" /> <img src="slideshow/cricci4.jpg" alt="Christina Ricci" /> <img src="slideshow/cricci5.jpg" alt="Christina Ricci" /> </div>
The HTML is as simple as it can be -- one slideshow container DIV and the images that will be part of the show. This slideshow doesn't require that you use images -- you could just as easily use DIVs instead.
The CSS
#slideshow-container { width:512px; height:384px; position:relative; }
#slideshow-container img { display:block; position:absolute; top:0; left:0; z-index:1; }
It's important that the slideshow container receive a set height and width as well as its position set to relative. Slideshow items must have an absolute position with top and left set to 0.
The MooTools JavaScript
window.addEvent('domready',function() {
/* settings */
var showDuration = 3000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
/* opacity and fade */
images.each(function(img,i){
if(i > 0) {
img.set('opacity',0);
}
});
/* worker */
var show = function() {
images[currentIndex].fade('out');
images[currentIndex = currentIndex < images.length - 1 ? currentIndex+1 : 0].fade('in');
};
/* start once the page is finished loading */
window.addEvent('load',function(){
interval = show.periodical(showDuration);
});
});
The first step in the slideshow creation process is to define the show duration, grab the container and slideshow items, etc. Then we cycle through each image/slide to set its opacity to 0 if it's not in the first position. Next we create the function that fades out the current image and fades in the next image. The last step is directing the slideshow to start when the page has completed loading. Simple!
More to Come
This post will be the first of many with regard to improving upon this simple slideshow. In future posts, we'll be adding start/stop/pause controls, table of contents, and making this simple slideshow a MooTools class with loads of options. In the mean time, enjoy this simple slideshow!
Discussion
Be Heard!
Share your thoughts with fellow developers of all skill levels! I want to hear from you!
Nice script, I’ll use that in a “class” manner. I have been using xFade (http://slayeroffice.com/code/imageCrossFade/xfade2.html) before, some experiment I found on the web a few years ago. I hadn’t the time to rewrite a Mootools version, and you did the job for me…
Good work! ^^
Hey David,
just to say nice touch with the textmate/coda snippet buttons. Love your posts, keep it up!
@Alex: You really writes touching stuff!
I Prefer a Class for this stuff to. But props. Never use periodical but just the function again with delay.
@René: Making the slideshow into a class will be the 3rd or fourth article of the series.
@David Walsh: Indeed, that’s actually what I finally notice upon re-reading the article… Right below “More to Come”…
Gee, I should read better! :D
@David Walsh: You need threaded comments :)
i did something similar some time ago http://xrado.hopto.org/post/moofader2
greetings
Awesome, this is just what I need. I can’t wait for the next post to learn more.
Nice tut David, keep ‘em coming. I’m looking forward to the completed class…
I can already tell this is going to be … hmm … what’s the word? Gripping comes to mind.
Actually a slideshow exactly like this was my very first own created Mootools class :) still using it on alot of new projects
Thanks for sharing your slide show. You are half my age and three times farther along – and I am happy for you.
What I’d really like to know is how you get the banner menu to stay fixed.
You can use modulus (%) to shorten the code even more:
images[currentIndex++].fade(‘out’);
images[currentIndex %= images.length].fade(‘in’);
@Rasmus: Awesome, really tricky~~
David-
Thanks! Exactly what I was looking for. Is there any way to set the fade time, to make the fade process longer or shorter?
Hi there! My jQuery, Moo tools slideshow stopped working suddenly and I have no idea why since I haven’t touched in several weeks. It just doesn’t slide anymore and the images are spread on top of my posts.Can you check it up? I don’t know where to look for help. My blog is http://pepua.blogspot.com/
Thanks for this article!
Is there a way to make the fade transition last longer?
@Daryl: http://davidwalsh.name/create-a-simple-slideshow-iii
It becomes a class in the last part of the series, where there’s a slideDuration option.
Thank you very much! I needed this and you made it absolutely simple.
I have no experience using Mootools at all. That said, am I the only one getting a strange start-up from the images? Right as the page loads each one of the images flashes befores it settles in on the first image to display. Also about 1/5 times it doesnt ever transition onto the next image. Im just wondering if Im doing something wrong.
In case anyone knows what I was talking about and gets the same effect I was, it can just be fixed by loading the js last at the end of the DOM. Works for me anyway.
David, thanks a lot. This saved me a huge amount of time. Great work.
Thanks for this script. I’ve got it working in all browsers except for IE. In IE I don’t get any errors, but the images don’t change.
I don’t know why it’s not working.
http://www.theresessions.co.uk
@Tony: The issue of images not changing in IE comes from putting window.addEvent(“load”) + the call to the show function inside the initial domready-event.
See this example:
http://jsfiddle.net/kHBUD/
@Daryl: You can do
currentImage.set(“tween”, { duration: 2000 }).tween(“opacity”, 0);
via http://net.tutsplus.com/tutorials/javascript-ajax/make-your-mootools-code-shorter-faster-and-stronger/
@Ryan: I haven’t read to the end of this series yet but I couldn’t spot a slideDuration option in the solutions given there(?)
@David: Thanks for sharing this code with us!
@David
Hey David,
just to say always a very nice work and thanks sharing this code with us !
A question/idea : How do you imagine the best way to make thumnails of websites and incorporate them then into this slideshow (thumbnails like thoses you find in Chrome for example ) ?
@Christian Your a legend! Thanks for helping sort that out. I’m not too good at using js, so would have never got it working otherwise.
Excellent.
I try to deploy it in my blogger site and it works in Chrome and FF.
However, when I use IE to open the site, after I change the page, it freezes the IE. Do you have any solution for that?
Thanks!
Great work!! This was very simple to implement and looks great!! Thanks!
I really like this basic slideshow. The only thing that I would like to change would be the fade duration. Any ideas on how to do it?
Hi, I have just implemented this on my site and it looks great. However I am also using a mootools accordian on another page and it stops working. I take the slideshow stuff away and it works again. I include the mootools-1.2.4-core file first.
Any ideas?
Thanks
Love the script, works great in FF however does not transition in IE8… any fixes?
I’m with rob – this works great in FF, but doesn’t seem to work in IE8. I was able to get it to work in IE8 … but only if I include at least 1 of the original pictures in the array. (very weird). As soon as I replace the img src links with localized pics, it breaks. But if at least one points to the Christina Ricci photos, it works fine. Any help would be appreciated!!!