27 Aug 2011
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

Til next time,
Prayag Verma at 19:40

scribble

27 Aug 2011 Implementing Z-Index Gallery in Blogger

27 Aug 2011
Implementing Z-Index Gallery in Blogger