Jquery/CSS - Stack images by "rel"

Question

Hey guys, I am trying to reformat and style some data (basic HTML) that is being output by a specific piece of software. Each of the items (of data) has an image attached to it. Certain images are part of a series and are directly related to eachother.

What I would like to do is, using Jquery/CSS, have the images that are part of a series "stacked up" (see link). Most likely using the 'rel' attribute. I would be leaving the images that are not part of a series, as single images.

Any ideas, plugins or direction would be greatly appreciated.

Answer 1

It's hard to say without knowing exactly what you are looking for, but a general approach might be to set the absolute position of each image as a multiple of the set #. So if an image belongs to set #1, the position would be top:(1 * 100), an image in set #4 would be top:(4 * 100) and so forth. The images would stack on top of one another.

To flip through the stack like in your example, you could add a click event to all the images that would adjust the z-index of the clicked image to reveal the image beneath. Or a click event could locate all the images with the same rel, and loop through to change the left: position to expand the stack.