Showcase Slideshow With MooTools

April 13, 2008 18 Comments

One popular trend in web site home page layouts is a looping animation for featured stories. Sure, you could do it in Flash, but then you'd be stuck designing Casino web sites for the rest of you life. MooTools is powerful enough to make it look like Flash but retain the accessibility of (x)html.

Check out the demo or download the project files.

Note: This demo is written using the MooTools 1.2 Beta Release.

The HTML

In my example I chose to display 4 total features but all you'd have to do to increase that is add another "showcase" div and its corresponding "showcase-nav" list item. Each big image div has a class called "bigimage" and an id with its number in the sequence. Note that numbers start at zero ("showcase-0-big", "showcase-1-big"...). The thumbnail navigation area doesn't require any numbering.

  1.  <div id="slideshow">
  2.    <div id="showcase">
  3.      <div id="showcase-loader">
  4.        <img src="images/ajax-loader-black.gif" width="32" height="32" alt="Loading" />
  5.      </div>
  6.      <div id="showcase-0-big" class="bigimage">
  7.        <div class="text">
  8.          <h2>Feature #1</h2>
  9.          <p>Some text... <a href="#">Some link...</a></p>
  10.        </div>
  11.        <img src="images/0.jpg" width="400" height="300" alt="" />
  12.      </div>
  13.      <div id="showcase-1-big" class="bigimage">
  14.        <div class="text">
  15.          <h2>Feature #2</h2>
  16.          <p>Some text... <a href="#">Some link...</a></p>
  17.        </div>
  18.        <img src="images/1.jpg" width="400" height="300" alt="" />
  19.      </div>
  20.      <div id="showcase-2-big" class="bigimage">
  21.        <div class="text">
  22.          <h2>Feature #3</h2>
  23.          <p>Some text... <a href="#">Some link...</a></p>
  24.        </div>
  25.        <img src="images/2.jpg" width="400" height="300" alt="" />
  26.      </div>
  27.      <div id="showcase-3-big" class="bigimage">
  28.        <div class="text">
  29.          <h2>Feature #4</h2>
  30.          <p>Some text... <a href="#">Some link...</a></p>
  31.        </div>
  32.        <img src="images/3.jpg" width="400" height="300" alt="" />
  33.      </div>
  34.    </div>
  35.    <div id="showcase-nav">
  36.      <ul>
  37.        <li><a href="#">
  38.          <span class="thumbnail"><img src="images/0-thumbnail.jpg" width="50" height="50" alt="" /></span>
  39.          <span class="text">Feature #1</span>
  40.        </a></li>
  41.        <li><a href="#">
  42.          <span class="thumbnail"><img src="images/1-thumbnail.jpg" width="50" height="50" alt="" /></span>
  43.          <span class="text">Feature #2</span>
  44.        </a></li>
  45.        <li><a href="#">
  46.          <span class="thumbnail"><img src="images/2-thumbnail.jpg" width="50" height="50" alt="" /></span>
  47.          <span class="text">Feature #3</span>
  48.        </a></li>
  49.        <li class="last"><a href="#">
  50.          <span class="thumbnail"><img src="images/3-thumbnail.jpg" width="50" height="50" alt="" /></span>
  51.          <span class="text">Feature #4</span>
  52.        </a></li>
  53.      </ul>
  54.    </div>
  55.  </div>

The Javascript

While the Mootools framework will handle the animation effects and browser compatibility issues, you'll need some custom javascript to get this showcase to work. This code (in showcase.js) includes starting events and 3 functions:

  • Starting Events
  • animation()
  • showshowcase()
  • activatethumbnail()

Starting Events

We need to do a couple things here: set the big images opacity to zero, setup the thumbnail navigation links, and start the animation. We're going to use a global variable called "number" to, you guessed it, keep track of which image we're on in the loop. Wondering what the difference between the "domready" and "load" events are? The "load" event fires only after all the images have finished loading - which is obviously very important for an image slideshow.

  1.  var number = 0;
  2.  window.addEvent('domready', function(){
  3.    $('showcase').getElements('.bigimage').each(function(i,x) {
  4.      i.setStyles({'opacity':'0'});
  5.    });
  6.    $('showcase-nav').getElements('li').each(function(i,x) {
  7.      i.addEvent('click', function(event){
  8.        event.stop();
  9.        showshowcase(x);
  10.        number = x;
  11.      });
  12.    });
  13.  });
  14.  window.addEvent('load', function(){
  15.    animation();
  16.  });

animation()

This function first checks to see if the number variable has reached the end of the loop. If so, it resets the number to zero. The next thing the function does is start a chain with three parts to the sequence: run the showcase function, iterate the number variable, and call itself recursively.

  1.  function animation() {
  2.    var nav = $('showcase-nav');
  3.    if (number > nav.getElements('li').length-1) {number = 0;}
  4.    var fx = nav.effects({duration: 1200, transition: Fx.Transitions.Quart.easeOut});
  5.    fx.start().chain(
  6.      function(){this.start(showshowcase(number));},
  7.      function(){this.start(number = number + 1);},
  8.      function(){this.start(animation());}
  9.    );
  10.  }

showshowcase()

The "showshowcase" function (no, I didn't stutter) is passed the number variable. The big image with the corresponding number is transitioned from zero opacity to fully opaque while the other big images are faded to transparent. This also calls the final function.

  1.  function showshowcase(number) {
  2.    activatethumbnail(number);
  3.    var big = 'showcase-' + number + '-big';
  4.    $('showcase-loader').setStyles({'display':'none'});
  5.    $('showcase').getElements('.bigimage').each(function(i) {
  6.      var fx = $(i).effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
  7.      if (i.get('id') !== big) {
  8.        fx.start({'opacity':'0'});
  9.      }
  10.      else {
  11.        fx.start({'opacity':'1'});
  12.      }
  13.    });
  14.  }

activatethumbnail()

This sets an "active" class to the appropriate thumbnail nav item and calls it a day.

  1.  function activatethumbnail(number) {
  2.    $('showcase-nav').getElements('li').each(function(i,x) {
  3.      if (x == number) {
  4.        i.addClass('active');
  5.      }
  6.      else {
  7.        i.removeClass('active');
  8.      }
  9.    });
  10.  }

Final Thoughts

In future versions I may:

  • Add a scrolling thumbnail carousel - so it can contain more thumbnails in the same small space.
  • Add pause/resume functionality.

Incidentally, the transparent bar over the image? I was familiar with the CSS "opacity" property but that requires an additional (and non-standard) "alpha" property for IE. Also, it has a nasty habit of making every element inside it pseudo-transparent as well. After some investigation, it turns out the easiest solution is a transparent PNG background image. IE6 shows it as a solid color but it doesn't look half bad. A PNG transparency fix script could easily fix that if you were so inclined.

Comments

  • Felix 2 years ago

    Hi Jon, I would like to ask is it possible to edit it to make it work under Mootools 1.11?

    Thanks thanks.

  • Jon Plante 2 years ago

    I'm not familiar enough with 1.11 to answer that. Fundamentally, as long as you can set and transition opacity with 1.11, it's possible. The syntax may be slightly different though.

  • aldo 2 years ago

    hello, thank's a lot, i'm using it!

    I've troubles with mootools 1.2 final .. Have you tried it? I can't see photos and searching in the source code I found "visibility:hidden" :S

  • Jon Plante 2 years ago

    I have tried it with 1.2 final. But I've had some difficulty with the animation function. If I have time, I'll post some updated code.

  • aldo 2 years ago

    thank you so much Jon!

  • tony 2 years ago

    hiiiiiiii

  • mandy 2 years ago

    Hi, thanks a lot for this plugin - I love it! I dont know much about javascript... but I would like to change the animation. I'd prefer to "stop" the automatic switch between images. I mean I want to show the visitor the first image, and then he can click through the others without having the animation switching around automatically. Is this possible? What do I need to change?

  • Jon Plante 2 years ago

    Mandy, all you would need to do to remove the animation is replace the "window.addEvent('load', function(){ animation();});" with "window.addEvent('load', function(){ showshowcase(0);
    });"

  • cssProdigy 2 years ago

    Exactly what i've been looking for, thanks.
    RELEASE a MooTools 1.2 Version soon!!

  • mandy 2 years ago

    Thank Jon, it works perfectly!!! :-)

  • sanjeev 2 years ago

    thanks.
    can any one tell me how to modify the code so that right hand side image and description of photos comes on left?

  • sanjeev 2 years ago

    can u also send me a extension so that there will be two arrows(one in top and the other in buttom) so that instead of 4 images one can scroll any no of images and display it.

  • Jon 2 years ago

    Great script!
    Is there a way to make the slideshow randomized rather than starting from the first slide each time the feature is loaded?

  • Jon Plante 2 years ago

    I would consider doing that server-side - put the images in an array and use the array_rand function.

  • Colin 1 year ago

    I love this unfortunately cant use it because it only works with the Beta version. It would be extremely beneficial to me to have this working with 1.2 Final. Is there a lot of work to get it working?

  • Jimmybee 6 months ago

    How does one change the vertical alignment of the "Featurex" text? I think I have tried every place I can see that would allow one to middle align the text.

    Thanks

  • chris 2 months ago

    Hello there jon, is it possible to have another selection when i click feature#1 then i will have another selection at the bottom of the picture?for example, i will click feature 1 then there will be a sub selection in it. is that possible?thank you.

  • Jon Plante 2 months ago

    You can put whatever you want (graphics, text, links) in the div with the class "text". If you're talking about additional thumbnail graphics appearing when you click feature#1 - which are then clickable to other large images in the slideshow - no, that is not possible without substantial modification of the script.

Add a Comment

(HTML tags aren't allowed.)


© 2010 Jon Plante. All Rights Reserved. Hosted by DreamHost. Send me a line, or check out my celebrity comics.