jquery/js images out of a box preview effect

Question

Hey,

I am building a web page for a software (not a browser but this software uses webkit as it's rendering engine). The window of this software has a size of 800x600 pixels. Users will be able to download collections of images as zip files that include appr. 15 images per collection. A white box represents such a collection (see below): On this 800x600 page I want visualize the content of each collection with a nice ui effect. I try to achieve a certain effect with JavaScript/jQuery which I think I have seen somewhere but haven't bookmarked: When one hovers over a white box, the 4 thumbs slide out of this box to make space for others to follow. They might increase in size.

Is there a jQuery plugin or something else that can accomplish this effect? How would you solve it or have you got suggestions for an other effect?

thanks, Max

Answer 1

The only plugin I've come across is something like FancyBox or Lightbox. But what you could do is wrap 4 individual pictures in div tags, style them to the layout in your design, and then repeat but with a different id in for each grouping. Then just create more than one one FancyBox handler for each of the divs, so when an image is clicked the user can only scroll through the pictures for that grouping.

Have a look at an example I made FancyBox Example. Instead of the user clicking categories to group photos you will have made these groupings for them.