I've seen bits and pieces of what I need here and there but have been unable to implement it myself so far.
Description:
The script needs to support an image gallery page with displaying multiple rows of small images (thumbnails). Images need to be resized on mouseover to create a zoom or lens effect.
Requirement A:
All images initially need to be displayed with the same height. The aspect ratio of the original image needs to be kept intact so the images won't look all skewed. I think this means: Reading the original image size, using the ratio between the original height and the width of the original image to calculate the new width using any given height. It would be most flexible if the resize function can be called with a certain height and then calculates the correlating width and vice versa. All images will be displayed in a table.
Requirement B:
When the visitor moves the mouse cursor over an image, that image needs to enlarge. Enlarging needs to happen is a few steps to create a 'zoom' effect. The other images in the row cannot be pushed away so basically the enlarged image will overlay part of the surrounding pictures.
Requirement C:
Ideally, the images next to the image that has the mouse cursor on it would also enlarge, just not as far as the image that has the mouse cursor on it. In case you're familiar with it: this is similar to the behavior of the Macintosh X user interface in certain cases. Example: If the mouse cursor is on image number 5 of a row of 10, image number 4 and 6 will also be displayed enlarged, but just not as much as image number 5. Image 4 and 6 might need to be pushed away by image 5 instead of overlaid in order to enable a smooth transition when the mouse cursor is moved to the next image. Image 4 and 6 might need to overlay their neighbors, images 3 and 7. Since requirement C increase the level of complexity substantially, let's focus on the first two requirements. I'll make an illustration of the last requirement so there is no ambiguity about the desired behavior. I will put it online so we can discuss that requirement when it seems feasible and interesting enough.
I'm not totally sure how difficult this question actually is so please guide me a little here :) (I think it's hard so I started with awarding it 200 points.)
