Blogger promises to do something about the hated feature, but you can remove it yourself

Sep 21, 2011 18:21 GMT  ·  By

A couple of days ago, Blogger introduced a Lightbox style feature for blog photos. While it may be a few years after Lightbox was trendy, it's an attempt to modernize the aging blogging service.

However, Blogger first rolled out the feature and then made the announcement. Blogger has tens of millions of blogs, so this alone was guaranteed to cause outrage.

But the feature was also rather buggy. Some photos failed to load at all. For some blogs, it broke existing Lightbox scripts or other customizations.

Yet another complaint was that users had no simple way of viewing photos at their full resolution, a bad move especially for dedicated photo blogs.

"Thanks everyone for the feedback, I'll take this discussion back to the team and see what we can do to make the feature more flexible," a Google employee said in response to a Blogger help thread related to the feature.

"If you haven't already, providing a detailed explanation of this lightbox is not ideal for your blog will help us understand all the use cases here. Our ears are open!," he added.

All in all, the launch wasn't well received. Thankfully, Google is listening and it will likely make the feature optional enabling users to disable, if they want to.

Google hasn't confirmed anything, but it seems a likely scenario. But this won't happen overnight. Luckily, there is a fix that you can implement right now, as long as you don't mind rolling up your sleeves and manually editing your blog's template.

What you need to do is to add the script below, which disables the Blogger Lightbox script, to your blog.

To do this, go to the Blogger dashboard, click on the title of the blog you want to add the script to, then select Template from the left sidebar.

You'll notice the "Edit HTML" button, click that too. You'll get a warning about the dangers of manually editing your template, click proceed.

Then, simply paste the script below anywhere in the <head> section of the template.

code
<script type='text/javascript'>
 //<![CDATA[
function killLightbox() {
var images = document.getElementsByTagName(
'img');
for (var i = 0 ; i < images.length ; ++i) {
 images[i].onmouseover=function() {
var html = this.parentNode.innerHTML;
this.parentNode.innerHTML = html;
this.onmouseover = null;
 };
}
}

if (window.addEventListener) {
window.addEventListener('load',killLightbox,undefined);
} else {
window.attachEvent('onload',killLightbox);
}
//]]>
</script>