How to Create a Simple Slideshow using Mootools / JQuery

By nitin on March 13, 2010

slide_show_icon When we want to show lots of content in limited screen space, Slideshows comes to rescue. Making use of slideshows is the optimal way to present large amount of information. In this post i'll walk you through the process of making a very simple(minimilistic) slideshow using Mootools / Jquery.

You must have seen various types of slideshows around the web. Creating such slideshow is also very simple. With little smart code one can make it very quickly.

As it is said “A picture is worth a thousand words”, similarly I believe a demo is worth a thousand words. So lets hit the demo and try it ourselves.

Demo using Mootools

Demo using JQuery

So, Interested ??? Lets head over to its implementation.

Action Plan

Step 1 : HTML Code Markup
Step 2 : Setup CSS for the Slideshow
Step 3 : Javascript for getting desired effect

Step 1 : HTML code

In this step we’ll make basic markup for the slideshow. This basically consists two parts, one which shows the bigger picture and second to show list of thumbnails. Here is the necessary HTML code for these two parts.

<div id="bigPic">
    <img alt="" src="imgs/1.jpg" />
    <img alt="" src="imgs/2.jpg" />
    <img alt="" src="imgs/3.jpg" />
    <img alt="" src="imgs/4.jpg" />
    <img alt="" src="imgs/5.jpg" />
    <img alt="" src="imgs/6.jpg" />
    <img alt="" src="imgs/7.jpg" />
    <img alt="" src="imgs/8.jpg" />
    <img alt="" src="imgs/9.jpg" />
    <img alt="" src="imgs/10.jpg" />
</div>
 
<ul id="thumbs">
    <li class="active" rel="1"><img alt="" src="imgs/1_thumb.jpg" /> </li>
    <li rel="2"><img alt="" src="imgs/3_thumb.jpg" /> </li>
    <li rel="3"><img alt="" src="imgs/4_thumb.jpg" /> </li>
    <li rel="4"><img alt="" src="imgs/5_thumb.jpg" /> </li>
    <li rel="5"><img alt="" src="imgs/6_thumb.jpg" /> </li>
    <li rel="6"><img alt="" src="imgs/7_thumb.jpg" /> </li>
    <li rel="7"><img alt="" src="imgs/8_thumb.jpg" /> </li>
    <li rel="8"><img alt="" src="imgs/9_thumb.jpg" /> </li>
    <li rel="9"><img alt="" src="imgs/10_thumb.jpg" /> </li>
    <li rel="10"><img alt="" src="imgs/2_thumb.jpg" /> </li>
</ul>

Here fist div#bigPic contains all the big images in the slideshow. Whereas, the ul#thumbs contains thumbnails images.

Step 2 : Necessary CSS Code

This section shows, the necessary CSS code. CSS style used in demo for other styles are not included here.

#bigPic{
	width:940px;
	height:300px;
	padding:1px;
	border:1px solid #CCC;
	background-color:#FFF;
	margin-bottom:10px;
}
#bigPic img{
	position:absolute;
	display:none;
}
ul#thumbs li.active{
	border:2px solid #000;	
	background:#fff;
	padding:2px;
}
ul#thumbs, ul#thumbs li{
	margin:0;
	padding:0;
	list-style:none;
}
 
ul#thumbs li{
	float:left;
	margin-right:7px;
	margin-bottom:5px;
	border:1px solid #CCC;	
	padding:3px;
	cursor:pointer;
}
ul#thumbs img{
	float:left;
	width:80px;
	height:80px;
	line-height:80px;
	overflow:hidden;
	position:relative;
	z-index:1;		
}

Step 3 : Javascript Magic

The basic idea to get the effect is in following steps:

Increase the z-index of current shown image
Show next image to be shown just below current image.
Now using fade out current image. This way next image will become visible.

Equivalent JS code used is as follows.

Using Mootools

If you use JQuery directly head on to next section with JQuery code.

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index<$('bigPic').getElements('img').length){
        var indexImage = $$('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).setStyle('z-index',2);
                $clear(myTimer);
                var myFx = new Fx.Tween(currentImage, {
                    duration: 250,
                    onComplete:function(){
                        $(this).setStyles({'display':'none','z-index':1});
                        myTimer = showNext.delay(3000);
                    }.bind(currentImage)
                }).start('opacity',0);
            }
        }
        indexImage.setStyles({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $$('#thumbs li').removeClass('active');
        $$('#thumbs li')[index].addClass('active');
    }
}
 
function showNext(){
    var len = $('bigPic').getElements('img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
window.addEvent('domready',function(){
    myTimer = showNext.delay(3000);
    showNext(); //loads first image
    $('thumbs').getElements('li').addEvent('click',function(e){
        var count = this.get('rel');
        showImage(parseInt(count)-1);
    });
});

JQuery Implementation

var currentImage;
var currentIndex = -1;
var interval;
function showImage(index){
    if(index < $('#bigPic img').length){
        var indexImage = $('#bigPic img')[index]
        if(currentImage){   
            if(currentImage != indexImage ){
                $(currentImage).css('z-index',2);
                clearTimeout(myTimer);
                $(currentImage).fadeOut(250, function() {
                    myTimer = setTimeout("showNext()", 3000);
                    $(this).css({'display':'none','z-index':1})
                });
            }
        }
        $(indexImage).css({'display':'block', 'opacity':1});
        currentImage = indexImage;
        currentIndex = index;
        $('#thumbs li').removeClass('active');
        $($('#thumbs li')[index]).addClass('active');
    }
}
 
function showNext(){
    var len = $('#bigPic img').length;
    var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
    showImage(next);
}
 
var myTimer;
 
$(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
    showNext(); //Load first image
    $('#thumbs li').bind('click',function(e){
        var count = $(this).attr('rel');
        showImage(parseInt(count)-1);
    });
});

I have tried to keep the javascript code really simple if you still feel it difficult to understand just drop a comment about it. I'll try to explain your doubts.

Download Code

JQuery Implementation : Sideshow-Jquery.zip
Mootools Implementation : Sideshow-Mootools.zip

0saves

Save

If you enjoyed this post, please consider leaving a comment or subscribing to the RSS feed to have future articles delivered to your feed reader.

80 responses to “How to Create a Simple Slideshow using Mootools / JQuery”

Kim
October 25, 2011 at 11:04 am | Permalink | Reply

Hi,
I can’t work out why this won’t work for me…
For some reason, there’s no big image and I can’t click on the thumbs.

Is there a reason for this?
Kim
October 25, 2011 at 11:26 am | Permalink | Reply

The demo file also doesn’t seem to work in IE or Firefox.. Is there something I’m missing?
Jeff
October 26, 2011 at 9:09 pm | Permalink | Reply

I am also having a problem getting this to work. I downloaded it and set it all up but the large image is missing and the thumbnails are not clickable. I have looked at the source code and the only thing that seems “off” is that the HTML references jquery-1.4.1.js that doesn’t appear to exist anywhere in the download.

Has anyone figured this problem out yet? There seem to be a lot of people reporting the issue but no one resolving it.
1. nitin
  November 3, 2011 at 6:26 pm | Permalink | Reply
  
  Jeff you can download jQuery from http://www.nitinh.com/static/jquery-1.4.1.js or directly from jQuery site.
  
  I haven’t included jQuery and large images in download just to keep download size small. If you want then you can get them from source of demos http://www.nitinh.com/static/SlideShow/jquery.html.
Amber
November 11, 2011 at 6:42 am | Permalink | Reply

Great tutorial! Love it. However, is it simple to put in a code to pause it? Place a pause & Play text link?
1. nitin
  November 13, 2011 at 9:22 pm | Permalink | Reply
  
  it shouldn’t be too hard, all you’ll have to do is:
  1. clearTimeout(myTimer) on click pause
  2. setTimeout(“showNext()”, 100) on click play.
Jose
November 28, 2011 at 2:03 pm | Permalink | Reply

i had problems with the code, so i did a
little modifications to the jquery section.

/***** The code Here ****/

$(function(){
var currentImage;
var currentIndex = -1;
var interval;
var myTimer;
function showImage(index){
if(index < $('#bigPic img').length){
var indexImage = $('#bigPic img')[index];
if(currentImage){
if(currentImage != indexImage ){
$(currentImage).css('z-index',2);
clearTimeout(myTimer);
$(currentImage).fadeOut(250, function() {
myTimer = setInterval( function(){ showNext(); }, 3000 );
$(this).css({'display':'none','z-index':1})
});
}
}
$(indexImage).css({'display':'block', 'opacity':1});
currentImage = indexImage; currentIndex = index;
$('#thumbs li').removeClass('active');
$($('#thumbs li')[index]).addClass('active');
}
}

function showNext(){
var len = $('#bigPic img').length;
var next = (currentIndex < (len-1)) ? currentIndex + 1 : 0;
showImage(next);
}

myTimer = setInterval( function(){ showNext(); }, 3000 );
showNext(); //Load first image
$('#thumbs li').bind('click',function(e){
var count = $(this).attr('rel');
showImage(parseInt(count)-1);
});
});
Kent
December 8, 2011 at 6:38 am | Permalink | Reply

Great tutorial! Just wonder how can you show some text when mouse on the big photo also how can you include <a> for each big photo so that when one photo being clicked, it will lead to the corresponding page?

Many thanks!
1. nitin
  December 9, 2011 at 1:24 pm | Permalink | Reply
  
  to get this thing done you’ll have to put some extra effort in replacing big images with divs which contains necessary text.
Edna
December 9, 2011 at 3:34 pm | Permalink | Reply

Hi,
Thanks for this tutorial. I’m a newbie and have just completed my first website. I used this slideshow effect and had success with chrome, firefox and IE. However, with Safari 5.0.6, the big picture does not show up and the thumbnails are not clickable. How can I fix this?
Thanks!
1. nitin
  December 19, 2011 at 11:56 am | Permalink | Reply
  
  I haven’t tested this on old version of safari, and I am sorry you’ll have to dig into it yourself. However, if possible please let me also know the solution.
Kent
December 15, 2011 at 11:06 am | Permalink | Reply

Thanks! How can you stop the transitions and just leave it as a normal gallery which the big photo will only change when clicking the thumbnail?

Many thanks!
1. nitin
  December 19, 2011 at 11:58 am | Permalink | Reply
  
  That should be simple, you’ll have to remove, setTimeOut and timer functions from the code.
Adrian
January 18, 2012 at 5:32 am | Permalink | Reply

Hi, great tutorial! I’m using several images of different widths, so I want to get it to center. I have this

$(indexImage).css({‘display’:'block’, ‘margin’:'auto’});

but it’s not working for me. Could you help me with this? Thanks
1. nathansklero
  January 23, 2012 at 12:08 am | Permalink | Reply
  
  hi,
  i think should be something like this..
  margin: 0px auto;
  
  good luck..
vivek
January 21, 2012 at 9:19 am | Permalink | Reply

Hi Nitin,
Can i add left and right navigation arrow in slide show ?
nathansklero
January 22, 2012 at 10:12 pm | Permalink | Reply

Great Work Man… Awesome !!

many thanks
Tong
January 25, 2012 at 11:31 pm | Permalink | Reply

I not see file “mootools-core.js”

I want mootools-core.js very much

(please give for me)
gaanam
January 27, 2012 at 8:15 pm | Permalink | Reply

It doesn’t work properly in IE. 1st it was to the left, i centered it.
The last thumb image goes down to the next line. Fiddled with the css for sometime now. No changes.
Anyway out?

Thanks
pak
January 30, 2012 at 9:56 am | Permalink | Reply

thanks a lot )