adding visual lightbox to your blogspot

By nhamngahanh | posted: 06:32 | 4 comments
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


Guest Blogger

This post was written by a guest contributor. Please see their details in the post above. If you'd like to guest post for SimplexDesign check out our Write for us page for details about how YOU can share your tips with our community.

Share this post

Related Posts

Advertisement

4 comments

  1. Josep26 October 2009 at 14:18

    Hello, I've just discovered your blog and I have to thank you for sharing so many good tips and tricks with us. THAAAAANK YOU. But, this one (lightbox) doesn't work. It shows the image in a new window. Why? I've tried it with both Firefox and IE and it doesn't work. Could you fix it, please? Greetings from Spain

    ReplyDelete
  2. nhamngahanh27 October 2009 at 01:39

    @Josep : I'm not sure about what make this lightbox effect doesn't work . Maybe in some template ,added other scripts may cause this lightbox effect can't work properly . I added this effect in minima-default template,without any other scripts, in LIVE DEMO and it works. You could take a look at demo and my demo template file for more .

    ReplyDelete
  3. c88i5 November 2009 at 09:06

    try look at this example...
    is working http://c88i.blogspot.com/2009/11/lightbox-c88i.html

    ReplyDelete
  4. nhamngahanh5 November 2009 at 09:12

    @c88i : Great ! thanks for recommend

    ReplyDelete