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


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

Post a Comment
Up said...

great buddy
u r absolute

Up said...

i m asking too much but
can i integrate this with popular post but with full option like image re size ,pace of scrolling ,
look a good kinda one on www(DOT)abu-farhan(DOT)com/2009/08/popular-post-for-blogger/

@Up
I will try my best , but it might take some time

Up said...

@Prayag Verma
take your time buddy

Anonymous said...

Really nice ! Thx so much :x