scribble

Scribble

About Blog GitHub

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


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

About Blog GitHub