How To Disable Lightbox View For Blogger Images?

Update: Lightbox Effect is Offcially Disabled by Blogger. No Worries now. Try a more correct way

lightbox view in blogger Blogger just announced today that they have now automatically added Lightbox view effect to all blogs by default. Now when you click on your images or photos, a wide black I frame window opens that fades the page in the background and shows you the image in foreground without leaving the page. Lightbox is also called as Greybox or thickbox. It is a cool image effect that you have seen widely used everywhere especially on Facebook and Google+. But for some people like me this effect has turned into a headache. Even the read more buttons on my blog when clicked popped in a new window instead of taking the user to the full post page. So of course there must be a way to disable it completely in your blogs and if you wish to apply it with complete control then you may add this effect manually by reading any tutorial found online on Lightbox view.

How to disable Lightbox view?

After digging into the CSS bundle link from the source file of my test blog, I managed to find the CSS class that enabled this effect and tried adding the display none property to the class but it badly effected the over all appearance of images everywhere.

Following is the CSS Link for lightbox

http://www.blogger.com/static/v1/widgets/3353720152-widget_css_lightbox_bundle.css

Following is the Javascript that activates the effect

_WidgetManager._RegisterWidget('_BlogView', new _WidgetInfo('Blog1', 'main', null, document.getElementById('Blog1'), {'cmtInteractionsEnabled': false, 'showBacklinks': true, 'postId': '5886606793797837055', 'lightboxEnabled': true, 'lightboxModuleUrl': 'http://www.blogger.com/static/v1/jsbin/3312549355-lbx.js'}, 'displayModeFull'));

I tried calling the javascript and switched the lightboxEnabled command to false but it didn't work. It may sound funny to you all but yes I need help from you all here. If anyone of you knows how to override this function then please let me know because javascript is what I lack in my skills. So this post today ends for the first time as a question from me to you all. Any help is appreciated.

PS: I have posted my question to blogger team and I am sure they will provide us with a good solution.

UPDATED: SOLUTION FOUND CLICK HERE

There is still one solution

~~If you don't want the lightbox feature for a specific image then simply add the target="_blank" tag just after the image img tag. See the following example~~

~~Click it and you will find lightbox effect works here~~

~~Click it and you will find that bingo no effects is applied!~~

~~This is what I find as somehow helpful in controlling the image view. I am sure Blogger team will come up with a more effective solution soon.~~

Solution Found!

As mentioned earlier the only problem I faced was in calling the JavaScript function and even after calling it correctly I was not able to disable the effect. Thanks to EnglishJavaDrinker I just get to know that instead of adding the JavaScript above </head> we must add it between <body> and </head> which sounds really weird but it is working just perfectly!

Do this in order to disable the effect:

Go To blogger > Design > Edit HTML
Backup your template
Search for </body>
Paste the following code just below </body>

<script type='text/javascript'>
document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
</script>

5. Save your template and you are all done!

I hope this will be helpful to all those who wish to get rid of this annoying effect unfortunately brought by blogger in a really wrong way. Peace and blessings pals! :)

Pin it

If you don't want to get yourself into Serious Technical Trouble while editing your Blog Template then just sit back and relax and let us do the Job for you at a fairly reasonable cost. Submit your order details by Clicking Here »

Mohammad 9/21/2011 blogger tricks , Bugs and Errors

17 comments

PLEASE NOTE:
We have Zero Tolerance to Spam. Chessy Comments and Comments with 'Links' will be deleted immediately upon our review.

kyokohulaSep 21, 2011, 8:20:00 AM
Thank you doctor of Blogger.
it was very annoying feature for me.
LavishSep 21, 2011, 9:51:00 AM
Thanks For The Amazing Tip....:)
Jeet DholakiaSep 21, 2011, 11:11:00 AM
Hello Mohammad,
i was facing this problem mainly for the Read More buttons but now its solved by you.
you are true blogger champ.
Thank you.
Jeet DholakiaSep 21, 2011, 11:15:00 AM
This comment has been removed by the author.
Jeet DholakiaSep 21, 2011, 11:19:00 AM
Mohammad but due to this script the left side sharing widget is getting affected so what to do?
Robinhood JavaSep 21, 2011, 12:01:00 PM
Does this feature fully roll in yet cz I can't see this effect in my blog http://gameloo.info ? I am not going to disable it :)
AnonymousSep 21, 2011, 4:46:00 PM
Still Getting That Light-box Please Help :(
Mohammad Mustafa AhmedzaiSep 22, 2011, 12:14:00 AM
Oh great it helped all. Indeed a pleasure. :>

@Jeet
Yes I checked it and I will look into it. Really stuck with too many tasks buddy. Will do it once I am free.

@Open door
Blogger new features often take time till it is fully applied to all blogs worldwide. But they introduced the feature long ago so it must be working on your blog. Check your other blogs and see if you dont have any script installed that is blocking the effect.

@inderpal

Please try this code instead

<script type='text/javascript'>
//<![CDATA[
cambimagen = document.getElementByIdundefined'main');
cambiarimg = cambimagen.innerHTML;
cambiarimg = cambiarimg.replaceundefined/\/s1600/g,'/s00');
cambimagen.innerHTML = cambiarimg;
//]]>
</script>

let me know if this works
MaziyarSep 22, 2011, 2:30:00 PM
bro plz help me>>im need this cod..only similar your site
show image>>http://up7.iranblog.com/images/0yabs16ra17hjthi93.png
Manisha.Rautela.BishtSep 22, 2011, 3:04:00 PM
Dear brother Mohd,
When i encoutered this problem it did not take even a second to me to type mybloggerticks and rush for the help .And as I was 100% sure..... I did find the solution to this really frustrating problem ......you deserve all the praise and my hearty thanks.....you saved my time,energy and all the irritation))))
How are you ? I can see lot of articles and lot of good changes in the website.....great .
God bless
best wishes
Manisha
AnonymousSep 22, 2011, 5:23:00 PM
@Mohammad Bro - Not Working, Again Getting Same Problem...

For an Experiment (i Made an another blog, then added some images After Then Used This Script It Just Worked Perfect! But was not Working on my Main Blog) :( #Please Help!
Mohammad Mustafa AhmedzaiSep 22, 2011, 11:34:00 PM
Please rad this post: All problems should solve now

http://www.mybloggertricks.com/2011/09/disable-lightbox-view-correct-way.html

@Manisha

Most welcomed sis. After all its your blog. :d
I am badly stuck with studies and some project works sister. Need your prayers and I hope you and your family doing great! :D

@Inderpal
Please try the code I shared on my new post and also share your main blog's URL
samcroSep 29, 2011, 6:20:00 PM
do you know how to add blogger lightbox to the template ?? please answer this question! thank's
LA BotcharJan 14, 2012, 2:30:00 AM
Oh gosh....thank you thank you! This thing has been annoying me for months. Nice to have it gone!
PixelatedMushroomFeb 6, 2012, 6:13:00 AM
Thanks!
KANAL ARASANOct 21, 2012, 8:34:00 AM
really i found many solutions for my blog here

thanks brother....
ADMINDec 5, 2013, 11:42:00 PM
Asalamualikum...

Brother I used the code you mentioned above to disable light box view in blogger, but it really didn't work in my blog. Even the same code I used in my other blog it perfectly worked. Don't really know why its not working here.

This is my blog when ever you got my message please lemme know how it would work?

http://topcarsin.blogspot.com/

That's my blog. I'm waiting for your response.

I really appreciate all your efforts to make blogging easy for all of us.