You are here : : Home > Free Resources > CSS Tutorials > Stacking Photo Gallery |
Free Web Design Resources
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.
Browser Support | » | ![]() |
![]() |
![]() |
![]() |
---|---|---|---|---|---|
Language | » | CSS2, HTML4 & jQuery | |||
Difficulty | » | Intermediate | |||
Estimated Completion Time | » | 15 minutes. |
→ Download and include jQuery
→ 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
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 <head>
tags.
Here's the code:
1 2 3 4 5
<head>
<script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
</head>
src
attribute to the script
tag.src
attribute to "http://code.jquery.com/jquery-latest.js";
1 2 3 4 5 6 7
<head>
<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
</head>
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 id="stage"
.
There are two navigation button to scroll through the images. We need to add these buttons inside our Gallery div.
We will create a <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 div
The Navigational <div>
will have id="next"
and id="previous"
.
We can customise the these navigational id's
later using jQuery.
1 2 3 4 5 6 7 8 9 10 11 12 13
<div id="stage">
<div id="next"> </div>
<div id="previous" </div>
<img src="images/image (1).jpg" >
<img src="images/image (2).jpg" >
<img src="images/image (3).jpg" >
<img src="images/image (4).jpg" >
</div> <!-- #stage -->
For the Stacking look the Gallery div needs to be positioned "relative" and the images "absolute".
We will define other properties like "margin, width" for the Gallery div.
For the images we will only define position: absolute
property , rest of the styling will be done automatically using jQuery.
The Navigational buttons are created using two seperate divs
We have used background images for the Navigational buttons as all the image tags <img>
will be treated as gallery image.
To avoid this each Navigational button has a background image.
CSS property like width and height must be defined for these Navigational button or the images won't show up.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25
<style type="text/css"> #stage { width:400px; text-align: center; margin: 50px auto; position: relative; } #stage img{ position: absolute; } #next, #previous { width: 29px; height: 43px; } #previous { background: url(images/prev-button.png) top left no-repeat; } #next { background: url(images/next-button.png) top left no-repeat; } </style>
For the Stacking Gallery Effect we need to include this stacking.js
file in our webpage.
The stacking.js
file is located inside the "js" folder.
Just paste this code inside the <head>
tags just below the code where we included jQuery.js
not above it.
1 2 3 4 5 6 7
<head>
<script type="text/javascript" src="js/stacking.js"> </script>
</head>
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
<script type="text/javascript"> $(document).ready(function(){ $('#stage').stack({ width : 500 , height : 300 , next : '#next' , prev : '#prev' }); }); </script>
$(document).ready(function(){
$('#stage').stack({
"#stage"
is the id of the Stacking Gallery. $('#stage').stack();
width: 500 ,
height: 400 ,
next: '#next' ,
prev: '#previous'
id
to view the Next Image in the Gallery.id
to view the Previous Image in the Gallery. Try it out and share your feedback with us!
No portion of these materials may be reproduced in any manner whatsoever, without the express written consent of Entheos. Any unauthorized use, sharing, reproduction or distribution of these materials by any means, electronic, mechanical, or otherwise is strictly prohibited.