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:
And immediately ABOVE it, paste this code
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:
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.
and
So if you want to use this hack , then IT IS VERY IMPORTANT to edit the first link (href). Modify it like this:
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" />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.
<script type="text/javascript" src="http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.js"></script><!--LIGHTBOX-IMAGES-STOPS-->
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/AVvXsEgKkOn8uV-J6LwGNslSRvijPnRZnKXw_5gdQRCFbtMWdyB_5zvl8uj2EMo0crH1qqGhHxf6BhvYt9Mvk_9zJ0qMnQhpzF47k60gNMFzRwDIIdww2IBL6CSbrn-Eky_zH7CxWP2X0XWV5YCk/s1600-h/clear_water_island.png"
and
src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgKkOn8uV-J6LwGNslSRvijPnRZnKXw_5gdQRCFbtMWdyB_5zvl8uj2EMo0crH1qqGhHxf6BhvYt9Mvk_9zJ0qMnQhpzF47k60gNMFzRwDIIdww2IBL6CSbrn-Eky_zH7CxWP2X0XWV5YCk/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: