CSS & jQuery Stacking Photo Gallery

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.

View Demo

Browser Support	»
Language	»	CSS2, HTML4 & jQuery
Difficulty	»	Intermediate
Estimated Completion Time	»	15 minutes.

Steps to Create the Stacking Gallery

→ 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

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 <head> tags.
Here's the code:

<head>

   <script type="text/javascript" src="jquery-1.5.2.min.js" ></script>
 
</head>

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 script tag.
Set the value of src attribute to "http://code.jquery.com/jquery-latest.js";

<head>

<script type="text/javascript"
src="http://code.jquery.com/jquery-latest.js">
</script>
 
</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 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 <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.


<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 -->

Step 3 : Style the Gallery using Stylesheet

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.

Here's the CSS Stylesheet code


<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>

Step 4 : Include the stacking.js file

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.

How to include the file ?

<head>

<script type="text/javascript" src="js/stacking.js"> </script>
 
</head>

Now we just need to assign the Stacking Gallery function to our Gallery and run the Function.

Here's the jQuery code


<script type="text/javascript">

$(document).ready(function(){

	$('#stage').stack({
		width	: 500 ,
		height	: 300 ,
		next		: '#next' ,
		prev		: '#prev'
	});

});

</script>

The Explanation

Line 4 › $(document).ready(function(){
→ For executing code when a page is rendered completely.

Line 6 › $('#stage').stack({
→ Here "#stage" is the id of the Stacking Gallery.
→ The stack() function will create the Gallery for us.
→ The basic function without any attributes will look like $('#stage').stack();
→ This function can work without any attributes.
→ We can customize the Stacking Gallery By passing the required attributes.
→ The default values that are assigned are
→ Width = "400" , height = "500", next = "#next", prev = "#previous";

[ Customize the Stacking Gallery ]
Line 7 › width: 500 ,
Line 8 › height: 400 ,
Line 9 › next: '#next' ,
Line 10 › prev: '#previous'
→ These are the Values that we can customize.
→ These values are optional.
→ Just define the property you want to change to override the default values.
→ Line 7 will change the width of the Stacking Gallery as well as the Gallery Images.
→ Line 8 will change the height of the Stacking Gallery as well as the position of the Navigational Buttons.
→ Line 9 will use the provided id to view the Next Image in the Gallery.
→ Line 10 will use the provided id to view the Previous Image in the Gallery.

Click here to Download the Demo

Try it out and share your feedback with us!

Please Like, Tweet, Share or Comment on this page if you found this tutorial/resource useful!

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.