Automatic jQuery Carousel triggering a FancyBox

Question

Hello, I'm a web designer working on a project. I have an idea that would require jQuery. Since my experience with jQuery is fairly basic, I thought I would ask here what might be the best option for what I need.

I have a section on the home page of the project. I would like to have a "wall" of images that would be equally spaced. When the page would load, the first image (in the top left) would "zoom" forward sort of like the functionality of Fancybox or Lightbox. The image would then return to the wall and then the next image in the row would "zoom" and so on. This would continue theoretically forever, unless the user hovered or clicked on one of the images.

Ideas on how this can be done?

Thanks!

An example image of the "wall" is linked below:

http://i25.tinypic.com/28vejk8.png

Answer 1

Having had to implement something like this with jCarousel Lite and prettyPhoto I can tell you that one bottleneck I hit (and didn't find a solution for short of rewriting part of the prettyPhoto plugin) was that as the carousel moves images in and out of view prettyPhoto was losing elements of the generated gallery. Furthermore, when I attempted to reinitialize the gallery with a call to prettyPhoto() I ended up appending to the already existing gallery such that prettyPhoto was either repeating or simply miscounting the images.

I realize this isn't a solution, but just something worth keeping in mind as you progress. What I can tell you is that jCarousel Lite has auto play built in and events that fire when the current image is changed. Likewise, any good lightbox will have an API to manually spawn a window with some content. If you combine the change event with manual invocation of a lightbox I am sure you can quickly produce what you're looking for.