Question

I am a bit new to jQuery but I need to write a small custom image rotator. Basically I will have a small stack of .png images that look like Polaroids. The rotator will need to pull the top one off, move it to the right, set the Z-index lower than the other two, then move it back over…just like you would if you were looking through a stack of pictures.

Most of this I think I can do, but the problem I’m not quite getting is that I will need to continually swap the Z-index of these 3 images (move top image to right, reset z-index lower than the other two, move back)

In the HTML I have the following:

<img src="images/polariod_1.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_2.png" width="255" height="260" alt="Singer" class="headerrightgraphic">
<img src="images/polariod_3.png" width="255" height="260" alt="Singer" class="headerrightgraphic">

Any leads on how I can change the z-index on these in an elegant way without hard coding it over and over?

Answer 1

Instead of changing the z-index, consider giving all the photos the same z-index and reattaching them to the parent node in the order they need to display. This removes the need for “infinite” z-indexes to get content above and below the photos.

For example if the user can click one to pull it to the top, just re-append it to the parent node:

// assuming you have a handle to the element `photoElement`

photoElement.parentNode.appendChild(photoElement);