jQuery: image gallery with puff

In this post we're going to try an experiment: what happens to a jQuery image gallery when we apply a sequential puff effect to it using a JavaScript timer? The puff effect is part of the jQuery UI framework and makes an element disappear while augmenting its dimensions. Its syntax is as follows:

element.effect('puff', options, speed);

options has the following parameters:

• percent: the factor by which the element dimensions will be augmented
• mode:
specifies whether the element must be shown (show) or hidden (hide)

Instead, speed expresses the duration of the animation (in milliseconds). Let's try our experiment. First, a basic HTML structure containing four images and a status bar:

<div id="gallery">

 <img src="1.jpg" alt="" />
 <img src="2.jpg" alt="" />
 <img src="3.jpg" alt="" />
 <img src="4.jpg" alt="" />
 
 <div id="bar"></div>

</div>

A couple of CSS styles:

#gallery {
 width: 60%;
    height: 100%;
    overflow: hidden;
    margin: 0 auto; 
 
}

#gallery img {
 display: block;
 float: left;
 width: 25%;
}

#bar {
 padding: 5px;
 text-align: center;
 background: #555;
 color: #fff;
 font: bold 100% Arial, sans-serif;
 border-radius: 0 0 6px 6px;
 clear: both;
 height: 100%;
}

Now we want a sequential puff effect on each image, plus a final effect on the entire image set. Also, we want the status bar to be updated with a progressive numbering (e.g. 'Image 1 of 4, Image 2 of 4' and so on). Here's the jQuery code:

$(document).ready(function() {

  var index = -1;
  var counter = 0;
  var images = $('#gallery img').length;
  
  var timer = window.setInterval(function() {
  
  
     index += 1;
     counter += 1;
     
     $('#gallery img').eq(index)
     .effect('puff', {percent: 200}, 1000);
     
     
     $('#bar').text('Image ' + counter + ' of ' + images);
     
     if(index == 3) {
          
       window.clearInterval(timer);
       
       
       $('#gallery img').each(function() {
       
       
         $(this).effect('puff', {percent: 200, mode: 'show'}, 100);
       
       
       
       });
       
       
     
     
  }  
  
  
  }, 1100);
});

As you can see, we create a regular timer function which increments an index that will be used to select each image thanks to the eq() method. When the sequence is complete, we reset our timer and apply a global puff effect to all the images.

Browser support

It works smoothly in Chrome, Safari and Opera. Some reflow problems in Firefox. I can't test it in IE right now, so any comment in that sense would be greatly appreciated.

Demo

Live demo