adding visual lightbox to your blogspot

I have another post for lightbox effect ,with really working script . Check it out here

lightbox is a simple effect for your blog . Here is how to apply this effect to your blogspot .


Live demo in this blog


1.-Download lightbox 2.0 script in here .
-After extracting the zip file ,you got three folders :css ,images,and js .
-Upload image to a image hosting service .
-Open css file ,change the url of prevlabel.gif and nextlabel.gif to the url of images in hosting service .And do the same with js file , change the url of loading.gif and closelabel.gif
- When you finish changing image url to right location ,upload css and js file to a host . In my blog ,I uploaded all files to google pages .
2. Open your blogspot dashboard . Go to layout tab ,continue to Edit HTML . In HTML template ,add this code after ]]></b:skin> :

<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="js/lightbox.js"></script>
<link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

change the address to where you host files .

3. You finish set up for lightbox effect . Each time you want to show your image with lightbox effect , just add a rel="lightbox" attribute to any link tag to activate the lightbox. For example:

<a href="images/image-1.jpg" rel="lightbox" title="my caption">image #1</a>
If you have a set of related images that you would like to group,
follow step one but additionally include a group name between square
brackets in the rel attribute. For example: 

<a href="images/image-1.jpg" rel="lightbox[roadtrip]">image #1</a>
<a href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2</a>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3</a>
here is template integrated lightbox effect : Download