Learn how to create a simple and neat stacking Photo Gallery using CSS and jQuery.
Click on the View Demo link below to view the stacking image gallery. Images are stacked one behind the other and on clicking the next button, the first image goes to the back and the next image is shown in front.
Steps to Create the Stacking Gallery
→ Download and include jQuery
→ Create the Gallery using
→ Style the Gallery and the Navigational Buttons
→ Include the stacking.js file for the Stacking Gallery Effect
→ Run the Stacking Gallery Function
Step 1 : Download & Include jQuery
Two versions of jQuery are available for downloading: one minified and one uncompressed (for debugging or reading).
Both versions can be downloaded from › jQuery.com ‹.
We will have to include jQuery inside the
Here’s the code:
There’s an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding
src attribute to the
Set the value of
src attribute to “http://code.jquery.com/jquery-latest.js”;
Step 2 : Create the Gallery
We will create the gallery using Image tags contained inside the Gallery div.
The Gallery div should have an
id attribute .
For this Example I have used
There are two navigation button to scroll through the images. We need to add these buttons inside our Gallery div.
Here's the Html code
We will create a Download: http://www.htmldrive.net/items/download/1181
id="stage" and put all the Image
We will also need to add the navigation buttons in two seperate
We can customise the these navigational
id's later using jQuery.