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