Create a Simple Slideshow Using MooTools, Part IV: Thumbnails and Captions
My "Create a Simple Slideshow Using MooTools" series has been hugely successful. The first step was laying the groundwork for the slideshow, the second step was adding controls and events to the slideshow, and the third step was recoding the slideshow into a sexy class. This fourth slideshow tutorial will add thumbnail previews and captions to the slideshow.
No Class? WTF!?
I've chosen to revert back to the "inline" code from the second tutorial. Why? I'm going a little bit off of the reservation with this one. I think classes are important to use when you want a more generic slideshow; this one will be a bit more customized. That isn't to say, however, that I wont be creating another class in the future.
The HTML
Isn't it nice that our base HTML code hasn't changed since the first tutorial? :)
The CSS
#slideshow-container { width:512px; height:384px; position:relative; }
#slideshow-container img { width:512px; height:384px; display:block; position:absolute; top:0; left:0; z-index:1; }
#slideshow-container-controls { margin:10px 0 0 0; }
#slideshow-container-controls img { cursor:pointer; width:100px; height:75px; border:1px solid #ccc; float:left; margin:0 1px 0 0; }
#slideshow-container-caption { height:70px; position:absolute; bottom:0; left:0; right:0; background:#000; z-index:10; overflow:hidden; }
* html #slideshow-container-caption { width:100%; }
#slideshow-container-caption h3 { font-size:24px; font-weight:bold; color:#fff; padding:10px 10px 3px 10px; }
#slideshow-container-caption p { color:#eee; font-size:11px; padding:0 10px 10px 10px; }
.toc-active { border-color:#000; }
We've added a bit of CSS for the forthcoming controls/thumbnails and the caption elements. The caption will have a black background with light text. The thumbnails will be very small, floated next to each other, with fixed dimensions.
The MooTools JavaScript
window.addEvent('domready',function() {
/* settings */
var showDuration = 5000;
var container = $('slideshow-container');
var images = container.getElements('img');
var currentIndex = 0;
var interval;
var toc = [];
var tocActive = 'toc-active';
var thumbOpacity = 0.7;
/* new: create caption area */
var captionDIV = new Element('div',{
id: 'slideshow-container-caption',
styles: {
//display:none,
opacity: thumbOpacity
}
}).inject(container);
var captionHeight = captionDIV.getSize().y;
captionDIV.setStyle('height',0);
/* new: starts the show */
var start = function() { interval = show.periodical(showDuration); };
var stop = function() { $clear(interval); };
/* worker */
var show = function(to) {
images[currentIndex].fade('out');
toc[currentIndex].removeClass(tocActive).fade(thumbOpacity);
images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');
toc[currentIndex].addClass(tocActive).fade(1);
captionDIV.set('tween',{
onComplete: function() {
captionDIV.set('tween',{
onComplete: $empty
}).tween('height',captionHeight);
/* parse caption */
var title = '';
var captionText = '';
if(images[currentIndex].get('alt')) {
cap = images[currentIndex].get('alt').split('::');
title = cap[0];
captionText = cap[1];
captionDIV.set('html','' + title + '
' + (captionText ? '' + captionText + '
' : ''));
}
}
}).tween('height',0);
};
/* new: create preview area */
var preview = new Element('div',{
id: 'slideshow-container-controls'
}).inject(container,'after');
/* new: control: table of contents */
images.each(function(img,i){
/* add to table of contents */
toc.push(new Element('img',{
src: img.get('src'),
title: img.get('alt'),
styles: {
opacity: thumbOpacity
},
events: {
click: function(e) {
if(e) e.stop();
stop();
show(i);
start();
},
mouseenter: function() {
this.fade(1);
},
mouseleave: function() {
if(!this.hasClass(tocActive)) this.fade(thumbOpacity);
}
}
}).inject(preview));
if(i > 0) { img.set('opacity',0); }
});
/* control: start/stop on mouseover/mouseout */
container.addEvents({
mouseenter: function() { stop(); },
mouseleave: function() { start(); }
});
/* start once the page is finished loading */
window.addEvent('load',function(){ show(0); start(); });
});
The first step is creating the caption container within the main image container. We measure the height of the caption container and hide it right away to prevent it from being seen. The next step is adding a few chained tweens within the show method that parses the image's alt attribute, sets the HTML within the caption container, and slides it up and down. I set the HTML of the caption container instead of using MooTools to create new H3 and P elements because (a) setting the HTML is faster and (b) we have no plan to do anything with each element individually.
A preview container is also created to hold the thumbnails. As we cycle through the large images, we create IMG elements with a fixed size (from the CSS above) that will act as thumbnail navigation for the slideshow. As an image receives focus, it's border and opacity changes to show focus. Awesome!
Do you like this version better than the previous? I certainly do. Look forward to a class version soon. Have any improvement ideas? Share them!
I believe that the most correct way to mark up images and captions is to use definition lists. The img element’s alt attribute allows us to provide fallback content; captions, however, are not fallback content.
I’ve created a JavaScript slider for images captioned in this way. [http://davidchambersdesign.com/examples/prototype-image-slider/]
It’s a bit buggy…sometimes an image shows for longer than normal, and then the next caption and image appears and disappears immediately only to be replaced by the following caption and image…weird… on firefox 3.6
Wow, very nice :DDD
And how do i do this with div’s?
That is very good stuff, thanks for sharing
@Adriaan Nel: Mac or PC? I’m on Mac and it’s silky smooooth.
haunting picture to say the least! thanks for taking the time putting together the tut.
AMD Turion 2.3, Chrome 4, Windows 7 Home Premium: the animation is quite jumpy…
Just tested on all Mac browsers (Firefox, Chrome, Safari, Opera) and looks good. Slight jump in Opera but still looks good. Will investigate Windows-based browsers more.
Checked on Virtual Box / IE6, IE7, IE8 and it looked all good. I’ll check on native Windows tomorrow.
make it more user friendly – animation should stop when mouse pointer is on main image or thumbnails
anyway, nice tut!
@David Walsh: on Windows 7, but did you adjust the display time of each slide or something, as it seems much slower now…I am also no longer able to reproduce the buggy behaviour.
@Adriaan Nel: Nope, didn’t touch anything.
@David Walsh: mmm, maybe there was something buggy on my machine then, I’ve been working (browsing,experimenting with js, php, photoshop, etc) the whole day on it…this morning just after booting, everything seems fine
Hi David, will you be making a jQuery demo of this as well. It’s good to have only one JS-framework to add to our websites ;-) Otherwise the http-requests get too big!
Nice adittion to this series. I also noticed the bug Adriaan reported (on win XP FF 3.6) but today it seems ok. I can’t say exaclty what conditions generate the bug but I’m guessing it might have something to do with more then one timer running simultaneously, maybe related to page-reload but not sure. Anyway, tks again and I’m looking forward for more on this series
Hi all,
tks for this new lesson.
Re : pb mentionned by posts above
this line is not addressed
var interval;
on FF with this : var interval = 100; its OK
I was having the same Firefox problem a few others mentioned… a fast image followed by a slow image…
The fix that ghazal posted above fixed it for me… thanks!
Hi, David
Thanks for your work, it would be better for beginners if make your works available for zip download.
Thanks any way
im using chrome in windows vista and its very buggy… but it works
@ghazal: I tried that one. Doesn’t change anything in FF3.6 Whenever I am using the thumbnail navigation the slideshow still gets a bit jumpy.
I had the same problem with FF3.6
Since the issue just occured whenever I used the thumbnails to navigate, I tried to remove the start()-Event from the function there. It solved the problem for me.
Now it works just fine, even after navigating with the thumbs.
Great script. I’d really love to use this on my site but I have a question: I’m trying to implement two slideshows on one page and only the first one seems to be working. On the second one it just shows the image and nothing else – no thumbnails and no captions. I’ve tried cloning the javascript section with a different name for the div slideshow-container, but that doesn’t help either. Is there something more I should think of, or is it impossible to use this twice on one page?
@Zinco: hehehhehe a href=”image” rel=”lightbox” , to the big image :D
Hey how can you slow it down so that it blends into the next image a little slower?
On some images in IE7 the caption only poops up for a millisecond (windows xp x64) Any ideas why?
How would you write this for jQuery?
Any tips on how to make the captions and subtitle area slightly larger?
Adjust the CSS for #slideshow-container-caption. Change the height to be 100px or more and test and you’ll see the difference. Fine tune it to your needs.
hi. how do u disable / hide the thumbnails?
Thank you for this tutorial I did a lot of searching online and couldn’t find anything else that did what I needed. Keep the tutorials coming!
David is there an easy way to get the preview images to show on the right hand side instead of the bottom? In the below javascript I tried changing the word after to before which did part of the trick but not all the way. Is there a way to do this in the javascript or css or would I need to edit the mootools library? Any help would be much appreciated.
/* new: create preview area */ var preview = new Element('div',{ id: 'slideshow-container-controls' }).inject(container,'before');David Hi
I really admire your talent and if I am to be honest I am just a tad jealous.
I am a landscape designer and have been looking for a more simple way of displaying my images than what I am doing at the moment (each image is hyperlinked to a new page with a thumbnail) It works ok but is not a very smooth transition on slow browsers. I really loved the Nina Ricci slideshow but cannot work out for the life of me how to do this within my current template. For that matter I cannot work out how to do it at all.
I am a good landscape designer but as you can see my website skills are very limited to basic stuff. If you can help I would really appreciate it
Regards from not so sunny London
Peter Phillips
I am also having a problem on Firefox 3.6 on Windows XP with the same css, javascript, and html. When the page loads it pulls up the correct image but then it goes to a blank image. But it works fine in chrome and Internet Explorer. I tried the fix with the interval and removing the start event but neither of those worked for me.
@bsmith95610
I was facing the same problem as you. Googled it, and it turns out mootool’s ‘periodical’ function is not exactly compatible with FF.
According to https://mootools.lighthouseapp.com/projects/2706/tickets/1062
the fix is to replace
show.periodical(showDuration)in the above code TO
show.delay(showDuration, this, [])Tested this and it works perfectly on all 3 browsers
Cheers
This also works with Mootools 1.3- using it in Joomla 1.6
Good Stuff. Much appreciated
Thanks
I’m using the same code shown here, but I have a bug when viewing in IE. The thumbnail images are appearing behind the background color of the
divthey are being displayed in.I’ve tried messing with
z-indexa bunch but to no avail.Hi David,
The code example for html seems to be rendering. Think it’s just a matter of adding in a few ascii characters i.e. < changed to <
Ohh damn it rendered my ascii code as well. I meant change < to (& lt ;) all one word though.
Hi Thanks for sharing it. If I like to add link to big image how do I do that?
Thanks again.
One more thing after I hit post Comment, it didn’t say anything. So I click the button again then it says duplicated in a next page.
Thanks.
Hey there,
This has probably been discussed all ready but im curious top know to set up the part of the HTML code for the Sideshow_container.
Could you please shed some likght on this for me?
thank you
Hi David,
Really nice stuff, helped me a lot. But I have one issue, slideshow and thumbnails work perfect in firefox and chrome but not in IE (especially slideshow). I am new bee to javascript, so dont know what is causing this issue.
Will be really thankful if you can help me in this.
Hey. The gallery is great! I love mootools, so much better than jQuery!!
Anyway, is there a simple way of firing the gallery onclick rather than on domready?
Basically I want to apply it to a HTML5 app which I am writing and everything is loaded from a huge javascript function on click(touch) events. Obviously your gallery is loading before the content, I would quite like to load the gallery in the same function as loading the images.
Any help will be much appreciated!!
What’s with IE9? This slideshow works well in every other browser except IE9. Have a look here:
http://www.triplepeakadventures.co.nz/photo_gallery.php
Can anyone shed light on this one?
Actually, I wasn’t using the most up to date version of mootools. Updated that and everything was sweet!
Ok Guys I found the problem. The slideshow works in the latest joomla but doesn’t work in j1.6. Maybe different versions of mootools? How can I get it work on j16 as well?
Hi, thanks for this beautiful stuff.
I would like to change the font of the caption to a Garamond, using fontsquirel. How do I do that?
Everything works perfect in Chome and Firefox but in IE 8 it’s not autoplaying (works only when I click on thumbs). But if i view your demo in IE 8 it works. Please HELP!. I have copy pasted everything.
I forgot to say that your site is sluggish in IE 8, almost not responding, but in Firefox runs smoothly.
hey it’s very nice but do you have the same with jquery ? thanks
it takes the thumbnails by adding “t” to the file name.
How can I make slideshow take the original image as the thumbnail image ?
thank you for your post. Hope you can help me.
Very cool, learned a lot in this series, I hope you find the time to make some more :)
yeah, i get it, i’ll try to implemented in codeigniter, ^^
Nice tut. Thanks for all the great work. Was wondering if you have a simple solution to make the thumbnails act as a carousel with controls? I have combined a few different parts of the different tut’s in this series and the only thing I am missing is the ability to have the thumbs scroll horizontally. Any suggestions?
Tested in all my browsers, it doesn’t work in IE9 in the demo at all. I changed the browser mode to compatibility mode and even IE8, still nothing.