Create LightBox Effect Image Display In Blogger

To know what a LightBox effect is, click on the image below (click on it, once the page loads completely):

You may have seen this effect earlier in other websites, but on a blogger blog, you may be seeing this for the first time.

So if are impressed with the hack, and want to apply this to your blog too, then follow these steps:

STEP 1:
Download this file from DynamicDrive:
1. lightbox.js

And this one too:
2. lightbox.css (Copyrighted to DynamicDrive and modified-images are already added)

And then upload these two files to HotLinkFiles.com (You need to register first)
After uploading the files, copy the DIRECT LINKS to these files.

STEP 2:
Log in to Blogger, go to Layout -> Edit HTML tab
Now find this in the template:

And immediately ABOVE it, paste this code

http://DIRECT_LINK_FROM_HOTLINKFILES/lightbox.css" type="text/css" media="screen" />

Replace the CODE in RED with the DIRECT LINKS you got from STEP 1.

Now once this is done, whenever you want to put this effect in any image, then simply add the red code along with the normal code:

http://TARGET_ADDRESS_OF_THE_IMAGE.jpg" rel="lightbox">http://SOURCE_ADDRESS_OF_THE_IMAGE.jpg">

NOTE: This NOTE is very important if, you want to use this hack on images uploaded on Blogger.

In blogger, when you normally upload any image, you can see two links, viz.

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjfUA2vAa7VSo0e_hyLr6bFwew-o-2j_TiTV-pEunzdWzLLv4Sc7hLU-TpMVUZLlZlIgNYiAffUd2YxdlK1WChPQ4oi7Jo5ashU4j4VTGcwogL67JyYpg7DoSuHrXrZRU6sbCv3pTr0T4/s1600-h/clear_water_island.png"

and

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgcjfUA2vAa7VSo0e_hyLr6bFwew-o-2j_TiTV-pEunzdWzLLv4Sc7hLU-TpMVUZLlZlIgNYiAffUd2YxdlK1WChPQ4oi7Jo5ashU4j4VTGcwogL67JyYpg7DoSuHrXrZRU6sbCv3pTr0T4/s320/clear_water_island.png"

So if you want to use this hack , then IT IS VERY IMPORTANT that you replace the first link(for href), with the second one(for src)

that means use the same code (the one with s320), for both href and src (you can do this from Edit HTML tab).