How to Create a Simple Slideshow using Mootools / JQuery

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.

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:

  1. Increase the z-index of current shown image
  2. Show next image to be shown just below current image.
  3. 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

100 Responses

  1. 15 Must See JQuery Slideshow Plugins and Tutorials #

    […] that is both easy to implement and a snap to customize.Advanced jQuery background image slideshowSimple Slideshow using Mootools / JQueryA Beautiful Apple-style Slideshow Gallery With CSS & jQuery Tags: gallery, jquery, jQuery […]

    Reply
  2. Alex #

    i do it but it does not run

    Reply
  3. godoom #

    This looks nice. But what about browser compatibility?

    Reply
  4. Debraj #

    Nice Job!!! Nitin 🙂

    Reply
  5. 十个jQuery图片画廊插件推荐 – Web前端 – JavaEyeæ–°é—» | LitiB #

    […] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 查看演示 […]

    Reply
  6. 十个jQuery图片画廊插件推荐 | 节点天空 #

    […] 1. How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 […]

    Reply
  7. jQuery Image Gallery插件推荐 #

    […] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 查看演示 […]

    Reply
  8. jill o'malley #

    hi. I am a little new to this.
    Can you tell me what I would use for script references in the header?
    Thanks

    Reply
  9. Web Designer #

    Thank you for the consistent quality in content and sharing one of your favorite post.

    Reply
  10. Ray #

    Can this be run in 2 instances on the one page?

    It’s a great slideshow but I would like to have it running 2 slideshows on the one page, both with their own image libraries. Possible?

    Reply
    • nitin #

      This can be done, but you need to make some changes in the script.

      Reply
      • Sanjay Mistry #

        Hi nitin,

        Can you let me know what changes you need to make to the script to have more than one galley on a page please?
        Thanks
        Sanjay

  11. Raul Riera #

    If you need a prev function 🙂

    function showPrev(){
    var len = $(‘#bigPic img’).length;
    var next = currentIndex > 0 ? currentIndex – 1 : 0; showImage(next);
    }

    Reply
    • Vanessa Colina #

      You almost got me going nuts, mr. Riera. You used a different hash line. Fix it:

      function showPrev(){
      var len = $(‘#bigPic img’).length;
      var next = currentIndex > 0 ? currentIndex – 1 : 0;
      showImage(next);
      }

      Tested it and works.

      Reply
  12. Andrew K #

    Tested and works. Thanks!

    Make sure that when you copy and paste you don’t just leave it as one long line of javascript. There’s a comment in there, so it comments out the rest of the code if it’s all on one line.

    Reply
  13. sleepy #

    I cant get mine to work – The larger images are not displaying (the thumbnails are though) and the functions are not running. I am using it in Dreamweaver …could this be the problem.

    Reply
  14. vishnupriya #

    very nice article it is very useful.

    Reply
  15. neeta jadhav #

    I used ur code bt my script is not working.
    i copied div and ul tag in the body.
    css attribute in style tag.
    and javascript code in the script tag
    am i write?
    if i did wrong?please give me suggestion on my email id

    Reply
  16. john #

    why it doesn’t work on me??
    help please, .

    Reply
  17. NewwdCo #

    Hey thanks for this great script! Is there a simple way to pause the slideshow…I’m a newbie so I wouldn’t know how to write a stopstart type of function. Thanks for you help! Again great work.

    Reply
  18. NewwdCo #

    Looks like this maybe isn’t working in IE? It seems to be working fine in Firefox and Chrome, but not in IE7 or IE8. Anyone been able to get it working?

    Reply
  19. NewwdCo #

    Yea I figure it out! Ok your Demo obviously works in IE so I checked that source code against what you provide in the slideshow_jquery.zip file and the only difference is that the source code for the working example is written whereas in the .zip you’ve got change it to and it works!

    Reply
  20. NewwdCo #

    Oops that comment didn’t work because it stripped out the syntax… Change –> script type=”application/javascript” TO script type=”text/javascript” (in slideshow_jquery.zip) and it will work!

    Reply
  21. Sanjay Mistry #

    Hi,
    Does anyone know how to implement more than one gallery on a page please?
    Many Thanks
    Sanjay

    Reply
  22. Sanjay Mistry #

    Hello again!
    I understand I need to make changes to the script to have more than one gallery on a page, i would really be grateful if someone could let me know what changes I need to make to the script please.
    Many thanks
    Sanjay

    Reply
  23. Raj #

    Where in your code are you using JQuery ?
    Image show and Image display are being manipulated, that is all that is being done !

    Reply
    • nitin #

      I think u haven’t checked the code. There are very few lines, where jQuery functionalities are not being used.

      Anyways, I’d love to see your version of code, with deeper use of jQuery.

      Reply
      • Raj #

        You’re right, I didn’t go through the code properly.
        I’m sorry Nitin.

  24. Yoda #

    I see that I can drop the opacity on the large images, but I’d like to drop opacity on the strip of thumbnail images. What’s the best way to do that?

    Reply
  25. ben #

    Hey awesome code im wondering how you can stop the jquery from auto cycling through the images, i can make it so each slide takes 999999 time to transfer to the next page but the first slide always changes no matter what :s

    Cheers!

    Reply
  26. warawat #

    Thank you for the consistent quality. 🙂

    Reply
  27. ariel #

    Hi,

    I havent tried this out yet. I’m sure I can get it to work and tweak it to the way I need for the website I’m working on.

    My only question is, how can I add a play/pause button to this slideshow?

    Reply
    • Ben #

      If you use this code for the latter section:

      var myTimer;

      function startShow(){
      myTimer = setTimeout(“showNext()”, 3500);
      }
      function stopShow(){
      clearTimeout(myTimer);
      }

      $(document).ready(function() {
      startShow();
      showNext(); //loads first image
      $(‘#thumbs li’).bind(‘click’,function(e){
      var count = $(this).attr(‘rel’);
      showImage(parseInt(count)-1);
      });
      //you’re going to want to hide this element initially, until the user pauses the slide show, vice versa.
      $(‘.start’).bind(‘click’,function(){
      startShow();
      });
      $(‘.stop’).bind(‘click’,function(){
      stopShow();
      });
      });

      and then add buttons with the classes .start & .stop

      Reply
    • nitin #

      For Adding Play / Pause Button you’ll have to clearTimeout on pause button and again setTimeout on play button click

      Reply
  28. brad #

    I love the slide show, but I only want the thumbnail controls and I don’t want it to auto play. Any idea of how I should adjust the javascript? May be a good boolean option for the future.

    Reply
  29. Ben #

    Great code! One question, how would I adjust the script to make the slideshow pause when a thumb li is clicked?

    Reply
    • nitin #

      You’ll have to clearTimeOut(myTimer) on onClick for li and again setTimeout when needed.

      Reply
  30. GendeDios #


    Nitin, you are fantastic. Thank you so much.

    Reply
  31. Nancy Marie #

    This is very nice – thank you. Is the any way to set it so it does not autoplay?
    Thank you!

    Reply
    • nitin #

      you’ll just have to comment the line which calls showNext function periodically.
      for mootools
      // myTimer = showNext.delay(3000);
      for jQuery
      // myTimer = setTimeout(“showNext()”, 3000);

      Reply
  32. user220 #

    Hi Nitin,

    Its a very nice and simple rotating banner which I was looking for. when I downloaded the script on my PC and tried to run, jquery was not working. Is this the problem from my side or the jquery file was missing? Let me know about it.
    Thanks.

    Reply
  33. villa #

    hi! thanks for this great slideshow, i have a problem!
    y cant see the bigpics when i open the webpage, and i don’t know why!! here is an example!
    http://www.eventosvillaadelina.com.ar/demo/fotos/decorado.html

    meaby is de jquery, or something about the conexion between the files! please help!!
    thanks!
    and sorry about my english! im from Argentina

    Reply
    • nitin #

      Looks like the URL isn’t working anymore. Hope you yourself have solved the problem.

      Reply
  34. 十个jQuery图片画廊插件. | suliuer #

    […] 1.How to Create a Simple Slideshow using Mootools / JQuery 当我们想要在有限的屏幕空间展示很多内容,这要使用到幻灯片。幻灯片是最佳的可以展现大量的信息的方式。在这篇文章中我将展示使用MooTools / Jquery做出简单的幻灯片的过程。 […]

    Reply
  35. Bruno #

    hey how can I’m make it so when I click on it it stops the slide, please post the full code. I’m using it for videos so i would be best to stop when I click play on my video. thx

    Reply
  36. Mike #

    Very nice article and I see that it works well, but my question is.. how would I implement this inside a wordpress page? without access to the head, how would I do this.. having some major issues here lol

    Reply
  37. Roy #

    Hi
    first of all, nice script 🙂

    i’m trying to click the thumbs and nothing happens (it doesn’t show the image i clicked on), also it doesn’t show pointer when i’m on the thumbs

    thank you,
    roy

    Reply
  38. Kim #

    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?

    Reply
    • Còi #

      1. U need to creat a javascipt with the name ” jquery-1.4.1.js ” with this code from here http://www.nitinh.com/static/jquery-1.4.1.js
      2. Put jquery-1.4.1.js into the forder ( the forder have main.css )
      3. Edit code in Jquery.html in line 8. ( from src=”../jquery-1.4.1.js to src=”jquery-1.4.1.js” ).
      Sorry, because my English so bad. I am from VietNam :”>

      Reply
  39. Kim #

    The demo file also doesn’t seem to work in IE or Firefox.. Is there something I’m missing?

    Reply
  40. Jeff #

    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.

    Reply
  41. Amber #

    Great tutorial! Love it. However, is it simple to put in a code to pause it? Place a pause & Play text link?

    Reply
    • nitin #

      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.

      Reply
  42. Jose #

    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);
    });
    });

    Reply
  43. Kent #

    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!

    Reply
    • nitin #

      to get this thing done you’ll have to put some extra effort in replacing big images with divs which contains necessary text.

      Reply
  44. Edna #

    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!

    Reply
    • nitin #

      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.

      Reply
  45. Kent #

    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!

    Reply
    • nitin #

      That should be simple, you’ll have to remove, setTimeOut and timer functions from the code.

      Reply
  46. Adrian #

    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

    Reply
    • nathansklero #

      hi,
      i think should be something like this..
      margin: 0px auto;

      good luck.. 😉

      Reply
  47. vivek #

    Hi Nitin,
    Can i add left and right navigation arrow in slide show ?

    Reply
  48. nathansklero #

    Great Work Man… Awesome !! 😀

    many thanks

    Reply
  49. Tong #

    I not see file “mootools-core.js”

    I want mootools-core.js very much

    (please give for me)

    Reply
  50. gaanam #

    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

    Reply
  51. pak #

    thanks a lot :))

    Reply
  52. Còi #

    Can u give me code for mootools-core.js plz. Thanks.

    Reply
  53. omarxp #

    thank you, I’m looking for articles like this

    Reply
  54. William #

    Hello, is possible the thumbs show a new div, instead the new image?

    Like, change My content for My another content

    Couse I wanna use richtext instead the images.

    Thanls

    Reply
  55. toto #

    thx man its works and beutifulllllllll 😀

    Reply
  56. JoeM #

    Hey this is awesome, but i am trying to use this in more that one location on a page. So I am looking to have 10 slideshows total running on one page.(actually inside the anythingslider) is it possible to make this happen?

    Reply
  57. anh #

    co the giai thich code cua phan Javascript Magic jquery moi lenh co nghia gi khong? bai nay toi lam chay duoc roi ma khong hieu code Javascript Magic jquery.

    Reply
  58. Anton Sombetzki #

    Hi Nitin,

    I’m using your script for a website I’m currently working on, but the fade doesn’t work the first time the images are shown. When all the images are shown once, the fade does work.

    Any idea how this is possible?

    Best regards,
    Anton

    Reply
  59. User #

    Help me here, please!

    Got this error in firebug ‘$ is not defined’
    im using the last version of JQuery

    big pics dont work, same for thumbs

    thanks

    Reply
    • User #

      sorry nitin. i found the error

      thanks for this great tutorial , very pleasure and simple as you said

      Reply
  60. parul #

    hi this is not working ,i want a silder of this type but bottom images not fade,my requirement is when a image is active in slider then that particular image in bottom highlight with a color and become larger

    Reply
  61. Mo #

    Is there no way of just using a single image? and scaling it down or using $(‘img’).clone().appendTo(”);???

    Reply
  62. N Narayan #

    Hi Nitin
    I came across your tutorial yesterday and it is exactly what i have been looking for. I have added javascript, and when I downloaded the tutorial it has the larger images, I just can’t get them to load on the page when I click the thumbnails. I am very new to website design, I am sure it is something basic I am not doing. Could you help please?
    Thanks

    Reply

Leave a Reply