Home > Javascript > Create a gallery with fade-in effects using Mootools

Create a gallery with fade-in effects using Mootools

March 21st, 2009
Goto comments Leave a comment

I was working on a photo gallery a couple of days ago and I thought I’d write a tutorial on adding neat effects on a gallery of items (usually photos).

Demo | Mootools Gallery (1013 downloads)

The problem

I was showing 12 photos on a page and I didn’t like how it loaded – it simply looked too static. So I though of adding a nice fade in effect to each item. This could be even more useful when loading the photos via an AJAX request, which I intend to add to that gallery at a later time. First, let’s take a look at the gallery HTML:

view source
print?
1<ul class="gallery">
2  <li class="clear">
3    <a href="#"><img alt="img_01" src="img/01.jpg"/></a>
4    <h2>Image #1</h2>
5  </li>
6  <li>
7    <a href="#"><img alt="img_02" src="img/02.jpg"/></a>
8    <h2>Image #2</h2>
9  </li>
10 
11  ...
12 
13  <li>
14    <a href="#"><img alt="img_12" src="img/12.jpg"/></a>
15    <h2>Image #12</h2>
16  </li>
17</ul>

I’m gonna add some basic CSS on this list, just to make it look like a grid, rather than a list – of course you can apply any styling on it.

view source
print?
1.gallery {width: 540px; margin: 0 auto;}
2.gallery li {opacity: 0; filter: alpha(opacity = 0); float: left; width: 100px; padding: 5px 10px 15px;}
3.gallery li.clear {clear: left;}
4.gallery li img {border: 1px solid #ccc; width: 100px;}

You can’t tell from the missing li elements, but I’m clearing each 4th element to create a 4×3 grid. Ok – so far the grid is in place, but we need the animation part – we could use any javascrpit framework, but for this project I had to use Mootools – for those of you that haven’t seen it and don’t what it is about, here’s a quick overview from their site: MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer.

The solution

First, we need to fetch all li elements:

view source
print?
1var li = $$('ul.gallery li');

then apply the animation effect:

view source
print?
1li.each(function(e) {
2e.set('tween', {duration: 500, transition: 'back:in'}).tween('opacity', 0, 1);
3});

A few comments on this last piece of code:

  • e.sets(…) – set the duration to 500 and transition to “backIn” to all tweens
  • e.tween(‘opacity’, 0, 1) – animate (or tween) opacity from 0 to 1, using the options defined above

If you run this code you can clearly see that it doesn’t exactly produce the desired effect – all photos fade-in at once, because of the way the code is executed. The trick is to add an incremented timeout to each element:

view source
print?
1var i = 0; //the current timeout
2li.each(function(e) {
3  i += 100; //adding the increment
4  setTimeout( function() {
5    e.set('tween', {duration: 500, transition: 'back:in'}).tween('opacity', 0, 1);
6  }, i);
7});

And that’s all! We now have a nice item-by-item fade-in effect. It’s worth mentioning that this effect can be changed by tweaking the three variables: the delay for each item, the speed of the effect and the tween effect. On the demo page I’ve made it possible to change the delay & speed, so you can make an idea of how they affect the general effect. The third parameter can be changed using any mootools transition (http://mootools.net/docs/Fx/Fx.Transitions).

Demo | Mootools Gallery (1013 downloads)

  1. centralparker
    | #1
    Reply | Quote

    This is exactly what I was looking for. Can we use this on CentralPark.com? 😉

  1. No trackbacks yet.