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):

Create LightBox Effect Image Display In Blogger

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=”http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/s1600-h/clear_water_island.png”

and

src=”https://bloggerstop.net/wp-content/uploads/2009/01/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

Leave a Reply

39 Comments on "Create LightBox Effect Image Display In Blogger"

Notify of
avatar
Sort by:   newest | oldest | most voted
COMPUTING UNLEASHED
Guest

Thanks Good post.

View Comment
Matt
Guest

Mnay thanks, however some times the lightbox doesn’t open correctly, the shaded background doesn’t appear…please advise.

View Comment
Divya Sai
Guest

Hi Matt

The code written is in Javascript, moreover the javascript file is uploaded on some other external server, due to these reasons, the javascript takes more time to load.

So if someone clicks on any image, before the page loads completely, then he will not be able to see the effect…

View Comment
Matt
Guest

Thanks for your speedy response, however even if I leave the page a few minutes to load the shaded background doesn’t appear, I have set it up correctly, because everything was spot on when I first clicked it…since then the image just pops up in the centre of the page…good script though and cheers for hosting it.

View Comment
Savaş Çocuğu
Guest

Thank you so Much. i like it.
and, can you tell me ? how add “alien.jpg” in comments box? if you tell me for about i will add it in my bloq :9 thanks for now.

View Comment
Divya Sai
Guest

Hi Savas,

Here’s the method to show the images along with comments:
https://bloggerstop.net/2008/12/how-to-display-or-show-comment-authors.html

But I would appreciate if you could select some other image, as I frequently use this alien image in some of my own profiles 😉

And thanks for linking me 🙂

View Comment
Rafay Baloch
Guest

Thanx nice post
VIsit mine blog
to learn Hacking,{orkut,facebook,aol,msn,yahoo}etc
http://www.rafayhackingarticleslogspot.com

View Comment
photo by roger
Guest

Dear Divya, ive tried to ad this lightbox to my blogger but dont really get it to work. My Picture disapear… (Sorry for my bad english, im from sweden)

View Comment
Mama Adam
Guest

😀 thx very much, because of your article i finally got my lytebox running after cracking my head for a whole day. I use "lytebox" on blogger page, because "lightbox" conflicting with follower widget.

View Comment
Divya Sai
Guest

Happy for you buddy !
Glad it helped you 🙂

View Comment
krkt
Guest

Hi!
Is it posible to ad contact form in this lightbox somehow

regards

View Comment
Divya Sai
Guest

Yeah that's possible, once you have added the code in to your template, just a change is required in the final step, that means instead of rel="lytebox" you have to use rel="lyteframe" along with some other code, read the details here:
http://www.dolem.com/lytebox/

(FOCUS ONLY LYTEFRAME)

View Comment
Divya Sai
Guest

You may read this post too:
https://bloggerstop.net/2009/09/add-welcome-or-under-construction-page.html

In the "Under Construction" example/DEMO page, I have used a contact form inside the floating window/popup. You may do the same (but it doesn't have any cookie system, so it will be shown to the readers everytime s/he visits the homepage)

View Comment
krkt
Guest
thank you so much, Divya i've already made something, you can check it out on, if you want: http://www.zodiaks.info/ footer "Sazinaties". i made it by making iframe to other blogger page, but i gess thats not the cleanest way to do.maybe you can write a tutorial how to make it by inline content?clean and simple like it is on: http://www.dezigndiva.com/ and how to make that kinda slider – header/footer? i gess that would nice tut for others too. I was searching trough google but could even find anything like that maybe my keywords are not right or smth. thank you,… Read more »
Brian a CoustriA
Guest
Hi Divya, First of all, nice trick! 🙂 I encountered a problem of hosting the CSS as well as JS file as you suggested. Hosting process in MyDataNest was successfully done but each time I logged out, it is then unable to locate the hosted CSS and JS eventhough we have the correct URLs in hand. Is it possible to happen? I think yes as if I am not mistaken, I once found that free online storage sometimes do such trick when they do not allow the users to access the file without login OR they might regularly change the… Read more »
Divya Sai
Guest

@Brian,

Yes that is possible, to make the files accessible only to the person who's hosting them, and that is exactly what's happening in your case.
Simply log in to MyDataNest, go to the folder where you have uploaded the files. Then edit the properties of that folder from "Private" to "Hidden".
Now, everybody can access your files, i.e. they can see this lytebox effect in your blog.

PS: You may create a new folder, with its settings set to "Private" where you can host all those files which only you can access.

View Comment
Sai @ Blogger Widgets
Guest

@krkt,

Yeah even I don't suggest iframe, for a number of reasons. I already have a tutorial on adding 3 new widgets in the footer:
https://bloggerstop.net/2009/01/add-three-new-widgets-at-bottom-of.html

You may add these widgets, and put whatever HTML things you want.

Slider in header/footer? couldn't get it…can you show a example or rephrase your query please?

@Brian
Blogger used to allow FTP, but no more. If you are using your own domain, then simply create another sub-domain and through DNS managent redirect it to FreeHostia.com where you can upload your files and link it from our present blog.

View Comment
Divya Sai
Guest

@krkt,

Your tag cloud widget has a lot of words (labels) in it, so if you want to remove some of them, then have a look on this tutorial:
https://bloggerstop.net/2009/08/remove-extra-labels-from-animated-flash.html

View Comment
Brian a CoustriA
Guest
Hi Divya, Thank you for a very quick response. I have set the properties as you suggested from the very beginning but still the same, the JS as well as CSS files are not located each time I logged out from MyDataNest. They only worked well when I'm still logged in. The easiest way to compare is that we will see your JS as well as CSS codes when we access your files through links provided here, however the result will be just nothing when I access my files in MyDataNest after I logged out. Properties are all set to… Read more »
Divya Sai
Guest

Hmmm..may be some problem/glitches at MyDataNest, you can of course use the links given by me in the post above, and if you want to host them yourself, then try SigMirror.com (It's Similar to DataNest)

View Comment
wpDiscuz