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
→ Create the Gallery using
<div>→ 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
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development.
jQuery is a lightweight "write less, do more" JavaScript library.
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:
jQuery is a lightweight "write less, do more" JavaScript library.
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
<head> tags.Here's the code:
1 | <head> |
2 |
3 | <script type="text/javascript" src="jquery-1.5.2.min.js" ></script> |
4 | |
5 | </head> |
There's an alternate way to include jQuery Library on the webpage without downloading jQuery file.
This can be done by adding
Set the value of
This can be done by adding
src attribute to the script tag.Set the value of
src attribute to "http://code.jquery.com/jquery-latest.js";1 | <head> |
2 |
3 | <script type="text/javascript" |
5 | </script> |
6 | |
7 | </head> |
Step 2 : Create the Gallery
We will create the gallery using Image tags contained inside the Gallery div.
The Gallery div should have an
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.
The Gallery div should have an
id attribute .For this Example I have used
id="stage".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
We will also need to add the navigation buttons in two seperate
The Navigational
We can customise the these navigational
<div with id="stage" and put all the Image <img> tags inside <div id="stage">We will also need to add the navigation buttons in two seperate
<div> indside the Gallery divThe Navigational
<div> will have id="next" and id="previous".We can customise the these navigational
id's later using jQuery.01 | <div id="stage"> |
02 |
03 | <div id="next"> </div> |
04 | <div id="previous" </div> |
05 | |
06 | <img src="images/image (1).jpg" > |
07 | <img src="images/image (2).jpg" > |
08 | <img src="images/image (3).jpg" > |
09 | <img src="images/image (4).jpg" > |
10 |
11 | </div> <!-- #stage --> |
