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 these two files from Ziddu:

1. lytebox.js
2. lytebox.css

Download Link

And then upload these two files to www.MDN.fm (You need to register first)
NOTE: Edit and Save the properties of the folder at your mydatanest account as "hidden" and NOT as "private."
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:

</head>

And immediately ABOVE it, paste this code

<!--LIGHTBOX-IMAGES-STARTS--><link rel="stylesheet" href="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lyteboxbloggerstop.css" type="text/css" media="screen" />
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.js"></script><!--LIGHTBOX-IMAGES-STOPS-->

You may freely use the code AS IT IS in your template, but I would appreciate if you replace the CODE in RED with the DIRECT LINKS you got from STEP 1.

Now once this is done, whenever you want to add this effect to any image, then simply add the red code along with the usual code used for linking an image:

<a href="http://TARGET_ADDRESS_OF_THE_IMAGE.jpg" rel="lytebox"><img src="http://SOURCE_ADDRESS_OF_THE_IMAGE.jpg"></a>

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 see two links in the HTML Code, viz.

href="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14rWPpA8MEzzQEqUgYJU5wzltcitEh3iWWcaDsdSN4Bk4XVo2T8TZUC3Dy8sh8iY6VmWdyqCv_O3TiJXKd-0_Yt_1vPqkekiS52KzSPnwstq6Vy_4qgqtcL8Q2xCKFgapoeNWOAxfhnqq/s1600-h/clear_water_island.png"

and

src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi14rWPpA8MEzzQEqUgYJU5wzltcitEh3iWWcaDsdSN4Bk4XVo2T8TZUC3Dy8sh8iY6VmWdyqCv_O3TiJXKd-0_Yt_1vPqkekiS52KzSPnwstq6Vy_4qgqtcL8Q2xCKFgapoeNWOAxfhnqq/s320/clear_water_island.png"

So if you want to use this hack , then IT IS VERY IMPORTANT to edit the first link (href). Modify it like this:

change s1600-h to this s1600 in the link, and then publish the post.

---

Credits: Markus F. Hay from Dolem.com. LyteBox was originally derived from the Lightbox class (v2.02) that was written by Lokesh Dhakar. For more information please visit HuddleTogether

---

Blog Admin : Divya Sai

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Posts