Create a unique Gallery by using z-index and jQuery

In this tutorial we will combine the CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. Demo Source

Introduction

In this tutorial we want to create a unique picture gallery utilizing the CSS property z-index. In our example we have the appearance of a pile of pictures, on the next action we put the first picture on the last position and on the previous action we get the picture from the last position to the first. All done just by altering the z-index, of course with a animation to underline the imagination to have a pile of pictures.

Preparing the xHTML, CSS and Pictures

xHTML

We have the wrapping container gallery, a container pictures for the pictures and two controls prev and next for swapping the pictures.

We can add as many pictures as we want because our script will pick them up dynamically.

If the class names of the DIV’s don’t look fimilar to you, they are from the 960 Grid System and just there to positioning the blocks. They don’t affect the jQuery code or the functionality of our gallery in any way.

CSS

The pictures container has relative position (under the heading) and a height of one picture. The img’s inside of the pictures container have absolute position. As they are all have a top and left of zero they overlap each other. The last picture (5) in the markup is on top, and the first (1) is on last position.

Pictures

In the example we use PNG’s, they all are transparent and have the same height and width. To create the effect of a pile of pictures each picture has a smooth drop-shadow and is gently rotated in different directions. I did that manually with Photoshop. If you want to do it programmatically then server side Image Magick may help or you have a look at Canvas (which is pretty fun by the way!).

The principle of changing z-index

The z-index will represent the position of a picture, 1 is the last position and 5 (since we have 5 example pictures) is the top position.

In the next picture action we want to put the first picture to the last postion, means set z-index to 1. All other pictures’ z-index need to be increased by one. Former second picture (4) will become the top picture and so on.

In the previous picture action we want to put the last picture, means z-index 1, to the first position 5. All other pictures’ z-index need to be decreased by one. Former top picture (5) will be put on position 4 and so on.

The Code

Let’s break that small script into pieces of interest.

We haven’t set the initial z-index in the markup nor the CSS. To have a starting point we set the z-index’s via jQuery. The order is just as in the markup. After finishing looping through all img in the pictures container we also have the number of pictures and highest z-index value in the variable z.

We use the same function for the previous and next action as they are doing basically the same thing.

We only want to process one picture at a time. The inAnimation flag determines if we are in a process. If so we just return to the caller without doing anything, if not we set the flag and go on with the picture swapping.

As we use one function for two processes we need to set some necessary variables. processZindex is the position we need to process, either the first position for the next picture or the last position for the previous picture. The direction is where a picture will animate while swapping, either above or under (-) the pile of pictures. The newZindex will be set to the picture we process, 1 for the last position and the highest z-index for the first position. Last but not least the variable inDeCrease tells if the rest of the pictures’ z-index will be increased (+1 position) or decreased (-1 position) by one.

We loop through all images to check the z-index and alter it.

We check if it’s the image we need to process (either first or last position). If so we go on and animate the picture either above or under the rest of the pile of pictures. When finished with this we set the new z-index to the picture and animate it back in position. When finished and the picture is back in place we release the inAnimation flag.

Here we bind the click event to the prev and next controls. We return the return value of our function which is always false. Returning false from that click event means we don’t follow the clicked link.

Conclusion

We created a nice looking gallery with just a few lines of code. Of course it could be extended with other features (randomness is pretty kewl: random picture control, slightly random positions each time…) but you get the idea of how to combine a CSS property and the power of jQuery. Feel free to change the code to your needs and be so kind to share it with us in the comments if you like. Every other comment is welcome as well.

Check out the follow up tutorial: Enhancing the z-index Gallery with a preloader.