How to Remove or Disable Lightbox Image view from Blogger

Blogger has officially announced that the lightbox image view has been implemented on all blogger blogs. When you click an image it opens up with a large transparent black frame around it, exactly the same way photos are displayed on your Google+ account when clicked.

While for some, this feature is an awesome improvement to how pictures are displayed, but for most bloggers users, this addition has caused problems. The blogger help forum is filled with complains by blogger users, demanding that this feature must be removed and others who see it as a bug in the blogger template.

Unfortunately blogger did not offer it as an opt-in feature. The problem with this addition is that images on a blog post don’t show up enlarged when clicked, as the way they showed up before the changes were made by blogger.

Until blogger address this issue, here is a work around by Mark from EnglishJavaDrinker that removes the lightbox affect.

To implement the code, simply head to:

Dashboard > Template > Edit HTML and find the </head> tag.

Now copy the code below and paste it right before </head>

<script type="text/javascript">
//<![CDATA[
function killLightbox() {
  var images = document.getElementsByTagName('img');
  for (var i = 0 ; i < images.length ; ++i) {
    images[i].parentNode.innerHTML = images[i].parentNode.innerHTML;
  }
}
if (document.addEventListener) {
  document.addEventListener('DOMContentLoaded',killLightbox,false);
} else {
  document.attachEvent('onDOMContentLoaded',killLightbox);
}
//]]>
</script>

Update: You can now simply head over to blogger settings and disable the lightbox option.

The option is available under Settings -- Posts and Comments -- Showcase images with Lightbox