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

and

src="http://2.bp.blogspot.com/_4fVBL4fjrFI/SWo4lfysmZI/AAAAAAAAB5U/JPCHdBcMh2s/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

ProBlogger - Inspiring Others Realize Their Dreams!

Share this

Related Products

Related Posts

Previous
Next Post »

39 comments

Write comments
January 18, 2009 8:09 AM delete

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

Reply
avatar
January 18, 2009 9:03 AM delete

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...

Reply
avatar
January 18, 2009 10:31 AM delete

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.

Reply
avatar
April 05, 2009 11:53 AM delete

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.

Reply
avatar
April 05, 2009 12:22 PM delete

Hi Savas,

Here's the method to show the images along with comments:
http://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 :)

Reply
avatar
May 27, 2009 7:19 AM delete

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

Reply
avatar
June 18, 2009 3:36 PM delete

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)

Reply
avatar
January 10, 2010 10:46 AM delete

:D 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.

Reply
avatar
January 10, 2010 11:08 AM delete

Happy for you buddy !
Glad it helped you :)

Reply
avatar
February 16, 2010 6:22 PM delete

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

regards

Reply
avatar
February 18, 2010 12:48 PM delete

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)

Reply
avatar
February 18, 2010 12:51 PM delete

You may read this post too:
http://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)

Reply
avatar
February 18, 2010 4:52 PM delete

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, for the response and suport.

Reply
avatar
February 19, 2010 3:02 AM delete

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 access URLs.

Any idea?

One more thing, are you using Blogger as well? Is it still possible to host our Blogger in different/custom hosting like yesterday when they still provide the users with free FTP capability?

Thank you in advance,

Brian

Reply
avatar
February 19, 2010 8:29 AM delete

@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.

Reply
avatar
February 19, 2010 8:35 AM delete

@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:
http://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.

Reply
avatar
February 19, 2010 8:38 AM delete

@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:
http://bloggerstop.net/2009/08/remove-extra-labels-from-animated-flash.html

Reply
avatar
Brian a CoustriA
February 19, 2010 9:48 AM delete

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 Hidden. Even if it's set to Public, no change and nothing.

Any idea? Or, is there anyone that faced similar issue?

Cheers,
Brian

Reply
avatar
February 19, 2010 9:53 AM delete

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)

Reply
avatar
Anonymous
March 23, 2010 7:24 AM delete

Great post! thanks heaps.. like the instructions to upload .css and .js to mydatanest. ;))

Reply
avatar
April 17, 2010 2:06 PM delete

This is fabulous!

One question: I would like to use this to make a gallery for my photography site, but I am using both horizontal and vertical images. Ideally, I would like to have a collection of uniform, square thumbnails that will open up as the full-sized/uncropped image in the lightbox effect. Is there a way that I can do this?

Your help is much appreciated! :)

Reply
avatar
April 17, 2010 2:27 PM delete

Hey Jessica,

Two suggestions:
1. Use this link ONLY, for the .css file (from step #1):
http://files.main.bloggerstop.net/uploads/3/0/2/5/3025338/lytebox.css
(as I have done some editing in the file and so the images like "Prev/Next/close" etc. will be visible in the pop-up window)

2. To show a Gallery of images (I would advise you to use the slideshow), you have to simply use
rel="lyteframe"
instead of rel="lytebox"
Details here:
http://www.dolem.com/lytebox/ (click on slideshow examples and read step 3) - NO need to change the files linked in the code above, you just have to use lyteframe instead of lytebox to use slideshow instead of simple images.

Reply
avatar
April 24, 2010 11:24 PM delete

Thanks again, Sai! I will give those a try!

Reply
avatar
June 03, 2010 12:21 AM delete

its just awesome. best tricks really. cant describe in words.

Reply
avatar
Anonymous
June 12, 2010 10:24 AM delete

It doesn't even work in yours

Reply
avatar
June 13, 2010 11:17 PM delete

THis is useful article , please do net loose your spirite to write more blogger tutorial dude . . .

Reply
avatar
June 14, 2010 11:38 AM delete

Thanks for the encouraging comment buddy. I will try to keep this on...

Reply
avatar
September 30, 2010 9:21 PM delete

and there uploud images folder from lytebox_v3.22.
Becouse now no closeX <<>> button
I wish make my owne design buttons
sorry for english:)
thanks

Reply
avatar
October 01, 2010 12:19 AM delete

A few days back, the close button went off, due to some problem at tinypic.com
Now it does show up again.

Reply
avatar
November 10, 2010 12:07 AM delete

Hi Sai...

You do update the Images link... as due to the problem with tinypic. mainly loading and close images. I have undergone this issue and updated lytebox.css

http://theCisco.Net/files/lytebox.css

or all images in zip folder all available at

http://thecisco.net/files/lytebox_images_updated.rar

You do have a look at it...
Thanks

Reply
avatar
April 22, 2011 1:12 PM delete

thanks for the nice post you've shared...

now i solved my problem

Reply
avatar
June 21, 2011 7:39 AM delete

i've use lytebox on my blog, can i add adsense inside the lightbox???

Reply
avatar
August 28, 2011 2:00 AM delete

Hello i have a problem with lightbox. i have script(http://java-templates.googlecode.com/files/jquery-1.4.3.min.js) on my blogger. I used that script for my navigation drop down menu. if i will remove that script, lightbox will work, but my menu will not. vice versa.. do i need to sacrifice one ? or there is a solution ?

Reply
avatar
July 28, 2012 6:22 AM delete

Your demo image shows double lightbox. Is it the problem or other else?

Reply
avatar
August 07, 2012 11:42 AM delete

@Md Tareq,

The issue is because of the fact that Blogger now officially has a LighBox enabled for all BlogSpot blogs, & due to this hack mentioned in the above tutorial, both the lightbox effects are coming up.
I will advise you to use the one from Blogger: You can change the settings anytime from Dashboard -> Settings for any particular blog.

Reply
avatar

Comments are moderated on this blog

Allowed HTML tags: <b>, <i> and <a>

Comment Like This! and Optimize your blog EmoticonEmoticon