How To: Install jQuery Lightbox2 on Your Blogger

8.18.2010

How To: Install jQuery Lightbox2 on Your Blogger

Lightbox is a simple, unobtrusive script used to overlay images on the current page through the power and flexibility of jQuery.
Just click the images below to see the effect.
Single Image

Image Set

Now let me tell you how to add this to your blogger.

Step 1. Go to the official site to download the latest 2.04 version of Lightbox2.

Step 2.Decompress it and upload closelabel, loading, nextlabel and prevlabel images(they are in images folder) to picasa web.

Step 3.Open the css folder and edit lightbox.css, search

#prevLink:hover, #prevLink:visited:hover { background: url(../images/prevlabel.gif) left 15% no-repeat; }
#nextLink:hover, #nextLink:visited:hover { background: url(../images/nextlabel.gif) right 15% no-repeat; }

replace the green parts with the corresponding images's link.

Step 4.Open the js folder and edit lightbox.js like step 3.

fileLoadingImage: 'images/loading.gif',
fileBottomNavCloseImage: 'images/closelabel.gif',

Step 5.Upload builder.js、effects.js、lightbox.js、prototype.js、scriptaculous.js and lightbox.css to some net drive like Google Sites, ~~Skydrive~~, Dropbox, etc. Make sure the files are put into the public place.

Step 6. Go to blogger Dashboard - Design - Edit HTML , insert the code above </head> and replace the link.

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

To use it, when you write, 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>

If you have a set of related images that you want 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 href="images/image-2.jpg" rel="lightbox[roadtrip]">image #2>
<a href="images/image-3.jpg" rel="lightbox[roadtrip]">image #3>