I have another post for lightbox effect ,with really working script . Check it out herelightbox 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
No comments:
Post a Comment