How To Build An iPhoto Image Flipper Using The jQuery Cycle Plugin

My favorite jQuery plu­gin by far has to be the jQuery Cycle Plu­gin. It’s a generic slideshow plu­gin, but it’s ver­sa­tile enough that I’ve used it to build a slider, a port­fo­lio, and just recently, an iPhoto-like image flip­per. This was inspired from the CJ Image Flip­Box. Unfor­tu­nately, the way the plu­gin is designed, you can’t mesh it with Fan­cy­box because the plu­gin cre­ates an anchor and an image which inter­cept the mouseclicks pre­vent­ing the Fan­cy­box from acti­vat­ing. So to get around the prob­lem, I used the Cycle plu­gin to cre­ate my own.

<div id="gallery1" class="gallery">
    <a rel="gallery1" href="/path/to/fullsize1.jpg"><img src="/path/to/thumbnail1.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize2.jpg"><img src="/path/to/thumbnail2.jpg" width="50" height="50" alt="" /></a>
    <a rel="gallery1" href="/path/to/fullsize3.jpg"><img src="/path/to/thumbnail3.jpg" width="50" height="50" alt="" /></a>
</div>

The HTML is rather straight for­ward. You’ve got a <div> as a con­tainer for a bunch of thumb­nails, each linked to a match­ing full­size image. The CSS on the gallery has fixed dimen­sions match­ing the dimen­sions of the thumb­nails with over­flow set to hidden.

$(".gallery").cycle({ 
    speed:      0,
    timeout:    0
});

$(".gallery").mousemove(function(e){
    var n = $(this).children().length;
    var w = $(this).width();
    var x = e.pageX - this.offsetLeft;
    var i = Math.floor(x/w * n);

    $(this).cycle(i);
}); 

$(".gallery a").fancybox();

As for the JavaScript, it’s refresh­ingly short, which just goes to show how much heavylift­ing jQuery and the two plu­g­ins do. Let’s start with the Cycle acti­va­tion. The speed para­me­ter is set to 0. This means that the tran­si­tion is instan­ta­neous when an image flips. Set­ting the time­out para­me­ter to 0 pre­vents the Cycle plu­gin from auto-advancing. So far noth­ing new for any­one who’s used the Cycle plugin.

The next part actu­ally sets up the effect. Just like when you mouseover an Event group in iPhoto, when­ever the mouse moves within the gallery div, the posi­tion of the mouse deter­mines the index of the image to dis­play. First we count the num­ber of images within the gallery. Next, we get the width of the gallery. Then we get the hor­i­zon­tal posi­tion of the mouse within the gallery’s coör­di­nate sys­tem. Finally, we use those three val­ues to cal­cu­late the index. Using this index, we tell the Cycle plu­gin which image to display.

Now that the iPhoto effect is work­ing, all that’s left is to acti­vate the Fan­cy­box plu­gin and we’re done.