Monday, September 19, 2011

How To Disable or Remove Blogger's Lightbox Image Viewer

A couple days ago, Blogger decided to implement a new feature for viewing images.  A Lightbox script that shows post images in a slideshow format when clicked.  See here for the announcement:  http://buzz.blogger.com/2011/09/your-images-never-looked-so-good.html

Unfortunately they didn't provide an option to disable this.  Breaking the many blogs that utilize their own image viewing scripts, and also annoying the one's who don't want a script at all.

So until they give us an official way to switch it off, here is a workaround to override Blogger's default Lightbox:

Go to Template > Edit HTML, and paste the following code directly before the </html> tag at the bottom of your template:
<script type="text/javascript">
document.getElementById('main').innerHTML = document.getElementById('main').innerHTML.replace("'lightboxEnabled': true,","'lightboxEnabled': false,");
</script>
Update 09/21: The previous fix prevents some other scripts present in the post body from working. Thanks to Mark Greenwood for reporting the issue. Use this code instead:
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
for(var i = 0; i &lt; imgs.length; ++i){
    imgs[i].parentNode.replaceChild(imgs[i].cloneNode(true),imgs[i]);
}
</script>
Update 10/13:  The above fix is no longer required.  Blogger has added a setting to disable the lightbox in the dashboard under Settings > Posts and comments > Posts