Showcase Slideshow With MooTools
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.
UPDATE: A new version of this script is now available.
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.
- <div id="slideshow">
- <div id="showcase">
- <div id="showcase-loader">
- <img src="images/ajax-loader-black.gif" width="32" height="32" alt="Loading" />
- </div>
- <div id="showcase-0-big" class="bigimage">
- <div class="text">
- <h2>Feature #1</h2>
- <p>Some text... <a href="#">Some link...</a></p>
- </div>
- <img src="images/0.jpg" width="400" height="300" alt="" />
- </div>
- <div id="showcase-1-big" class="bigimage">
- <div class="text">
- <h2>Feature #2</h2>
- <p>Some text... <a href="#">Some link...</a></p>
- </div>
- <img src="images/1.jpg" width="400" height="300" alt="" />
- </div>
- <div id="showcase-2-big" class="bigimage">
- <div class="text">
- <h2>Feature #3</h2>
- <p>Some text... <a href="#">Some link...</a></p>
- </div>
- <img src="images/2.jpg" width="400" height="300" alt="" />
- </div>
- <div id="showcase-3-big" class="bigimage">
- <div class="text">
- <h2>Feature #4</h2>
- <p>Some text... <a href="#">Some link...</a></p>
- </div>
- <img src="images/3.jpg" width="400" height="300" alt="" />
- </div>
- </div>
- <div id="showcase-nav">
- <ul>
- <li><a href="#">
- <span class="thumbnail"><img src="images/0-thumbnail.jpg" width="50" height="50" alt="" /></span>
- <span class="text">Feature #1</span>
- </a></li>
- <li><a href="#">
- <span class="thumbnail"><img src="images/1-thumbnail.jpg" width="50" height="50" alt="" /></span>
- <span class="text">Feature #2</span>
- </a></li>
- <li><a href="#">
- <span class="thumbnail"><img src="images/2-thumbnail.jpg" width="50" height="50" alt="" /></span>
- <span class="text">Feature #3</span>
- </a></li>
- <li class="last"><a href="#">
- <span class="thumbnail"><img src="images/3-thumbnail.jpg" width="50" height="50" alt="" /></span>
- <span class="text">Feature #4</span>
- </a></li>
- </ul>
- </div>
- </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.
- var number = 0;
- window.addEvent('domready', function(){
- $('showcase').getElements('.bigimage').each(function(i,x) {
- i.setStyles({'opacity':'0'});
- });
- $('showcase-nav').getElements('li').each(function(i,x) {
- i.addEvent('click', function(event){
- event.stop();
- showshowcase(x);
- number = x;
- });
- });
- });
- window.addEvent('load', function(){
- animation();
- });
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.
- function animation() {
- var nav = $('showcase-nav');
- if (number > nav.getElements('li').length-1) {number = 0;}
- var fx = nav.effects({duration: 1200, transition: Fx.Transitions.Quart.easeOut});
- fx.start().chain(
- function(){this.start(showshowcase(number));},
- function(){this.start(number = number + 1);},
- function(){this.start(animation());}
- );
- }
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.
- function showshowcase(number) {
- activatethumbnail(number);
- var big = 'showcase-' + number + '-big';
- $('showcase-loader').setStyles({'display':'none'});
- $('showcase').getElements('.bigimage').each(function(i) {
- var fx = $(i).effects({duration: 1000, transition: Fx.Transitions.Quart.easeOut});
- if (i.get('id') !== big) {
- fx.start({'opacity':'0'});
- }
- else {
- fx.start({'opacity':'1'});
- }
- });
- }
activatethumbnail()
This sets an "active" class to the appropriate thumbnail nav item and calls it a day.
- function activatethumbnail(number) {
- $('showcase-nav').getElements('li').each(function(i,x) {
- if (x == number) {
- i.addClass('active');
- }
- else {
- i.removeClass('active');
- }
- });
- }
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 are closed.
Comments