How to achieve the gallery me.com or iphoto album rollover effect on albums

If you are like me and use iPhoto, you probably like and respect the way when you move your mouse across a album, it scrolls through the pictures in it. I was even more impressed when I noticed they also did this on my me.com gallery, and by how fast it was. If you don't know what I am talking about, you can see Apple's me.com gallery example here. Simply move your mouse across any of the albums and you will see it scroll through thumbnails of the pictures.

I had the need for one of my clients to do something similar, I wanted to show front side and rear views of a person by moving across the image. I searched far and wide for javascript/css frameworks or approachs as to how to do this and I didnt find anything. Maybe part of the problem is I dont know the offical name for this effect. Its not lightboxing which is a typical thing to do with photo galleries.

Anyway, I figured it out, maybe this is not exactly how they do it, but probably pretty close (I didnt copy any Apple source).

The basic idea, is you create big tall image with all your thumbnails stacked on top of each other, placed in a div with hidden overflow and you use javascript mousemove events to adjust the top of the visible image, giving the effect of a new image showing on incremental movements.

First create a stacked image of all your thumbnails, basically one very tall image with each thumbnail right on top of each other, see apples example here.

Next create a div with the following style: (width & height should be the width and height of each individual thumbnail

.imageContainer {

cursor:pointer;

height:400px;

margin-left:-2px;

overflow:hidden;

position:relative;

width:179px;

z-index:90;

}

Now put your image link inside this div with the following style:

element.style {
margin-top:0;
position:absolute;
top:0px;
width:179px;
}

Give your image an id, lets call it "myImage"

Then add the following javascript: (all my javascript uses prototype, but im sure you could do something similar without.

Add this javascript to your ajax call or anywhere on your page after your image is defined:
$('myImage').observe('mousemove', adjustImage);

Add the following javascript to the top of your page:
(yes, I now my javascript is ugly and someone can probably rewrite this in 3 lines (if you do, please post in a comment)

<script>
var lastMPos = null;

function adjustImage(event){
 
 var changv = Math.abs(lastMPos - event.clientX);
  if (lastMPos == null || changv > 60) 
  {
    var element = event.element();
    var current = element.style.top;
    var cpix = parseInt(current.substring(0,current.indexOf('px')));
    if (cpix != -800)
        cpix = cpix - 400;
    else
        cpix = 0;
   
    element.style.top = cpix + 'px';
     lastMPos = event.clientX;
  }
 
}
</script>


This script basically adjusts the top by the height of the individual images each time the mouse gives an event that was more than 60 pixels from the last event. You can adjust this based on the number of images in your strip and the height of your image.

Hope I saved you some time if you were looking for the same thing. I was thinking it would be cool to write a serverside utility that would stack a bunch of images on top of each other, because creating these strips manually can be a pain. Let me know if you know of such a utility out there.

Comments

[Tex]

Huh, mine didn't work, could you post an example?