Create a Simple Slideshow Using MooTools, Part II: Controls and Events

Discussion

1. Charley

   Nice post. Looking forward to part 3. Thanks David.
2. Braxo

   In your javascript, line 19, it seems a bit unnecessary to have it so complicated.

   I would argue, for sake of your readers having to re-read that line 5 times to get the gist of its purpose, to break it apart just for readability reasons. Especially because it’s posted in a tutorial.

   I have nothing wrong with ternary operator, I use them myself (and it seems I do more and more with everything I write). But you also included assignments and even nested another ternary in it!

   Maybe instead of removing it or changing it, provide a paragraph describing what that line does. This way your more advanced audience can still see a challenging line of javascript code, but it will also help your more novice readers.
3. Guido

   Hi David,

   Nice post, ty.

   I’ve changed it a little: http://gtwebdesignnl/slider/slidertesthtml

   now i can use it for text too.
4. Guido

   @Guido: http://gtwebdesign.nl/slider/slidertest.html (the real url)
5. Jamie@SMSDAM

   Nice script… I am about to try it out anyway. I have previous ways of doing ma slide doe but just wanna try out this from mo tools.
6. Ahmed

   Y0 David, how about having html/div instead of images for the slider, you think it would work?
7. David Walsh

   @Ahmed: Yes, absolutely!
8. Ahmed

   @David Walsh: Lovely, would you please share a code that uses divs instead of images? I’ve been looking for this for a “while”
9. Ray

   Just what I want. Thank you!
10. Boris

    Thanks as always David!
11. FinalFrag

    Just implemented this for a client. Soooo easy! Thanks a million David!
12. Yann

    Hello,

    thanks for this !

    i just need to have a fade more slowly, i try more things like {duration: 5000}, but i can’t make it…

    Can you help me ?
13. Mike Harmer

    Hey David,

    Great tutorials! Your site has been very helpful for me.

    I’m trying to use multiple instances of this on one page but it doesn’t seem to work – is this possible, and if so how would I go about making it work?

    Thanks!
14. rochelle alder

    I get scripting errors in ie tester. “object expected” which happens on the mouseenter event. In firefox it states undefined object.how do you “correctly” define an object?
15. Stuart Palmer

    This is a great script and very easy to follow instructions. Thanks very much. One thing I am struggling with is to make each slide last longer. Is there a way to do this with the code above? I have looked at the next lesson and although another comment in the thread says that part three includes slide duration, I can’t see how to edit it. Your help would be most appreciated. :-)
16. Rochelle Alder

    var showDuration = 3000; is the value you would change. 3000 is 3 seconds. If you want it longer, change 3000 to 8000 to make the transition happen after 8 seconds. Play around with it to suit.
17. Stuart Palmer

    Thanks Rochelle. That should have been very obvious. How stupid of me!
18. waro

    I love that users can control the slideshow.

    I’m new with Mootools but I attracted to it with its lightweightness and hopefully can use this app in the future.

    Good job.
19. Rochelle Alder

    OK so I figured out my problem. I didn’t want the slideshow effect happening with the main image so I commented out the start variable. That resulted in an ‘object not defined’ error.

    So if your variable is not there, but is used within the code, you can expect to get the error in IE but is ignored and runs as it should in firefox although the furebug testing console will tell you there’s an error.

    Thanks David for a great piece of elegant code. Me likey!
20. bob tipping

    Great script, but no longer works properly with mootools-1.2.4, specifically mouseenter event. It probably requires a very simple change, but I am an absolute beginner and any advice would be greatly appreciated.
21. bob tipping

    OOps, please disregard my last comment, I had left firebug running by mistake, the script works great with mootools-1.2.4.
22. Paul Winslow

    Hey David,

    Could the mootools here be tweaked to use a slide transition as opposed to fading?

    Cheers.
23. Lindy

    Hi
    I was hoping to add a pause button to the controls (rather than pause on mouse over)

    I have added this to the script

    var pause = new Element('a',{
    		href: '#',
    		id: 'pause',
    		text: '||',
    		events: {
    			click: function(e) {
    				if(e) e.stop();
    				}
    		}
    	}).inject(container);
    

    but it doesn’t quite work…

    I also tried

    var pause = new Element('a',{
    		href: '#',
    		id: 'pause',
    		text: '||',
    		events: {
    			click: function() { stop(); }
    		}
    	}).inject(container);
    

    but this got rid of all my controls. Can anyone help?
• babuk

  I need pause button. i am not able to get this ?
• TazNormand

  Hi,
  1st of all i’m french so excuse my bad english ^_^

  here is my contribution for PAUSE button, tested with MooTools core 1.2.5, not working with 1.3 :

  window.addEvent('domready',function() {
    /* settings */
    var showDuration = 3000;
    var container = $('SlideShowPubs');
    var images = container.getElements('img');
    var currentIndex = 0;
    var interval;
    var toc = [];
    var tocWidth = 20;
    var tocActive = 'toc-active';
    var playPause = false;      
  
    /* new: starts the show */
    var start = function() { 
      interval = show.periodical(showDuration);
      $('pause').set('text','||');
    };
    
    var stop = function() {
      $clear(interval);
      $('pause').set('text','>');
      };
  
    /* worker */
    var show = function(to) {
      images[currentIndex].fade('out');
      toc[currentIndex].removeClass(tocActive);
      images[currentIndex = ($defined(to) ? to : (currentIndex  0) { img.set('opacity',0); }
    });
  
    /* new: control: next, pause and previous */
    var next = new Element('a',{
      href: '#',
      id: 'next',
      text: '>>',
      events: {
        click: function(e) {
          if(e) e.stop();
          stop(); show();
        }
      }
    }).inject(container);
    
    var pause = new Element('a',{
        href: '#',
        id: 'pause',
        text: '||',
        events: {
          click: function(e) {              
            if(e) {
              // switch playPause to true or false depending on its previous state
              playPause=!playPause;
              // if TRUE then stop() slideshow, else start() (continue)
              // TRUE means that user has clicked on the Pause button
              playPause ? stop(): start();
            }
          }
        }
      }).inject(container);
  
    var previous = new Element('a',{
      href: '#',
      id: 'previous',
      text: '<<',
      events: {
        click: function(e) {
          if(e) e.stop();
          stop(); show(currentIndex != 0 ? currentIndex -1 : images.length-1);
        }
      }
    }).inject(container);
  
    /* new: 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(){
      start();
    });
  });
  

  And don’t forget to put CSS part too :

  #pause {
    position: absolute; 
    bottom: 20px; 
    right: 70px; 
    z-index: 2; 
    display: block; 
    width: 20px; 
    background: #6D84B4; 
    color: #fff; 
    text-align: center; 
    padding: 3px; 
    text-decoration: none;
  }
  
24. Tony Schappaugh

    I have used this script and it works well in every browser except Firefox, even 4 and 5.

    The line of code that appears to be the problem in Firefox is:

    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length – 1 ? currentIndex+1 : 0))].fade('in');

    Is there any way to rewrite this code in a different way, even if it means using more lines of code? I think that might resolve the problem in Firefox.
25. Tony Schappaugh

    Sorry for the formatting issue.
    I have used this script and it works well in every browser except Firefox, even 4 and 5.

    The line of code that appears to be the problem in Firefox is:

    images[currentIndex = ($defined(to) ? to : (currentIndex < images.length - 1 ? currentIndex+1 : 0))].fade('in');

    Is there any way to rewrite this code in a different way, even if it means using more lines of code? I think that might resolve the problem in Firefox.
26. Daniel Yee

    @Tony – It’s not a browser issue, but a Mootools version issue. Once I used the same version David used here, it works. The current version of Mootools doesn’t work. Haven’t had a chance to look further as to what changed.
27. Jonathan Robidas

    Great Tutorial!!! Got me up and running in no times with a cool slider!!!

    Thanks again!!
28. gtechpedia

    Hello, thanks for this tutorial, it’s coll

    but i just think that can we use this with carousel sytle? if yes, can you share for its too

    Thanks
29. Tilo

    Hi David,

    thats the best stuff in the web for mootools, very simple and absolutly great. Can You buiild this slideshow with controlls for the mobile device like iPad (potrait, landscape) and iPhone/Android (portrait, landscape) ?
30. bob

    Fade out stopped working for me in new mootools core 1.4.4. Is there a bug in the new core ?
31. bob

    Yes there was a bug. It has been fixed in mootools core 1.4.5.
32. jitesh

    Excellent topic….really u help me allot thank u…….
33. Angelus

    window.addEvent('domready',function(){ this is the line I am getting that error: object doesn't support this property or method
• David Walsh

  You must not have MooTools within the page.