Submit your widget
HomeSlideshow & Scroller Nice Stacking images Gallery with jQuery

Nice Stacking images Gallery with jQuery

Created 12 years ago   Views 25037   downloads 5102    Author entheosweb
Nice Stacking images Gallery with jQuery
View DemoDownload
67
Share |

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

Read more:http://www.entheosweb.com/tutorials/css/stacking_gallery/default.asp

You might also like