Wednesday, 9 July 2008

Fancy Lightbox effects for Blogspot

Every seen fancy lightbox effects in other websites and want to know how to use it in your own blog? Fret not, this simple tutorial should set you up in the right direction. If you have no idea about what I am talking, click on any of the images below (might take a while to load the image initially).

Fireworks 1 thumbFireworks 2 thumbFireworks 3 thumb

I use the Thickbox 3.1 library, but theoretically any lightbox library should also work.

1. Download thickbox.js, thickbox.css, loadingAnimation.gif, and the latest jQuery library to your computer.

2. The trick now is to host the above files in the same web host as your images. I chose to use another Google freebies, Google pages to upload my files. You can use your Google account (which I assume you will already have since you use blogspot) to sign up for free account.

3. Open the thickbox.js in notepad and replace the:
var tb_pathToImage = "images/loadingAnimation.gif";

with:
var tb_pathToImage = "http://XXX.googlepages.com/loadingAnimation.gif";

where XXX is your account name.

4. Once you have entered the Google pages main page, click on the tiny [upload] link on the right hand of your screen. Upload thickbox.js, thickbox.css, jquery-latest.pack.js, and loadingAnimation.gif. You should see something like this:


5. Modify your blogspot template. Click 'Layout' tab followed by 'Edit HTML'. Add the following lines just below <head> tag
<
<script src='http://XXX.googlepages.com/jquery-latest.pack.js' type='text/javascript'/>
<script src='http://XXX.googlepages.com/thickbox.js' type='text/javascript'/>
<style media='all' type='text/css'>@import "http://XXX.googlepages.com/thickbox.css";</style>

again where XXX is replaced with your google pages account.

6. Now you are ready to upload your images. To do so, prepare a thumbnail of your image and rename it originalImageName_thumb.jpg. Upload both the large image as well as the thumbnail. Now add the following line in your post (the 'Edit Html' view) where you want your image to show.
<a href="http://XXX.googlepages.com/originalImageName.jpg" title="Text information" class="thickbox"><img src="http://XXX.googlepages.com/originalImageName_thumb.jpg"/></a>


Take a look at the Thickbox website for more example.

No comments: