Implementing Z-Index Gallery in Blogger

Z-index Gallery is a combination of CSS property ‘z-index’ and the power of jQuery to create a unique gallery which have a appearance of a pile of pictures. This incorporates simplicity with eye candy to deliver a full fledged experience of viewing piles of pictures as if in hand.

This can be further customized to include features like randomness ,random picture control, slightly random positions each time,Forward & Back Buttons, Preloader Effect,etc. Feel free to change the code to your needs and share it with us.



             See Demo                                                                                            Download




Steps to Add it to Blogger:

1.Login to the Blogger account

• For Multiple Usage
• For Single Usage

2. Now Go to Design > Edit HTML.

3.Now search for the </head> tag and paste the following code just Above/Before it. (How to copy code easily)

<link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="960.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script> 
<script type="text/javascript" src="demo.js"></script> 
 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

2.Go to the Post/Page you want to add this plugin and then go to Edit HTML tab .

3.Now copy the code from below and paste it there. (How to copy code easily)

<link rel="stylesheet" type="text/css" media="screen" href="reset.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="960.css" /> 
<link rel="stylesheet" type="text/css" media="screen" href="main.css" /> 
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js "></script> 
<script type="text/javascript" src="demo.js"></script> 

Note: Please Host all the files on free hosting service like DropBox or Blogspot itself!

4.Now for adding the images into this plugin see the following markup:

<div class="grid_6 prefix_1 suffix_1" id="gallery">
<div id="pictures">
<img src="picture1.png"  /> 
<img src="picture2.png"  /> 
<img src="picture3.png"  /> 
<img src="picture4.png"  /> 
<img src="picture5.png" /> 
</div>

<div class="grid_3 alpha" id="prev">
<a href="#previous">&laquo; Previous Picture</a> 
</div>
<div class="grid_3 omega" id="next">
<a href="#next">Next Picture &raquo;</a> 
</div>
</div>

The div block with id "pictures" contains the images to be displayed.

Here you can easily customize the Next and Previous Text with Images . For Next Button images search Here

There is another customized version of this plugin which displays a preloader before the images ,to apply it ,just replace the demo.js file with the demo1.js file present in the js folder of the Download package.




5.Now save the Post/Page.


             See Demo                                                                                            Download

Written by Prayag Verma

Find me on Twitter

Email Newsletter

Like what you read here in this post ?
Get new posts delivered straight to your inbox