Yesterday Blogger introduced a new 'feature' to some blogs. Now images appear in a Lightbox powered overlay. Unfortunately a lot of people think that this feature is actually a bug. On one of my other blogs, it is a really problem due to the fact that I was already using a different script to achieve a similar affect. With the new feature I now get two popup copies of each image which really is horrid. So I spent a good hour trying to find a hack or workaround, until Blogger sees fit to allow us to disable the bug.
The fix works because the new Blogger code adds an onClick function to the actual image, whereas most people wrap the images in a link. What I wanted to do was simply remove the onClick function but I couldn't figure out how (and believe me I tried), but simply recreating the image removes any registered events. The problem is ensuring that this code runs after the code Blogger used to add the lightbox viewer.
The trick to getting this code in the right place (thanks to Bonjour Tristesse for this bit) involves editing the HTML version of your template. From the Design page in the old Blogger dashboard or from the Template page in the new version bring up the HTML version of your template and then place the code almost at the very end, right between
Save the gadget and you are done. The fix will have been applied and things should be back to how they were before Blogger introduced this bug/feature. If/when Blogger see sense and allow us to disable this feature then you can easily delete my workaround simply be deleting the gadget from your layout. Note that applying the fix by editing the HTML version of your template is slightly more reliable, but in most cases you won't see any difference between the two.
Now I'm quite happy to let each individual blog owner choose how to display their photos, and some might even like the new photo viewer. From reading the forums, however, it is clear that some people just really hate the new viewer and would prefer not to see it even on other people's blogs. Well it turns out that the above fix also works when used as a Greasemonkey script. If you already have Greasemonkey installed in your browser then you can simply install the script to kill Blogger's lightbox on all Blogspot hosted blogs. If you don't have Greaemonkey installed then the Wikipedia page should point you to a version for your favorite browser.
UPDATED 17th September: I've simplified the script slightly and added a fix so that if the mouse was already within an image when the page loaded the fix will still apply if you click the image, assuming you move the mouse at least one pixel in any direction.
UPDATED 17th September: Now we specify false in the
addEventListenercall to ensure better backwards compatibility with older versions of Firefox.
UPDATED 20th September: Added Bonjour Tristesse's much better fix as the main suggested workaround.
UPDATED 21st September: Added the section on using the newest fix as a Greasemonkey script to kill Lightbox on all Blogspot hosted blogs.
UPDATED 21st September: The old method now registers the function so it is fired when the DOM is loaded not the page. This should mean it works even before the page has fully loaded.
UPDATED 21st September: Simplified the short fix, as the replacement isn't actually required to make it work. This cuts down on the number of bytes served and should run quicker as well!
UPDATED 21st September: Switched back to recommending the gadget based fix (albeit a simpler version) because Bonjour Tristesse's version actually breaks other widgets within the posts, such as the Google +1 button in the post sharing widget. Fortunately the new and improved gadget version is applied much quicker and so seeing the viewer is much less likely than before.
UPDATED 22nd September: Only replace the actual image, not the entire content of the parent element. This should reduce the number of situations in which there is a chance of breaking any other scripts or gadgets.
UPDATED 22nd September: Attach to both onDOMContentLoaded and onLoad when running under IE to ensure the code gets run regardless of which version of IE we are using, but make sure we don't try and run twice as that is pointless.
UPDATED 22nd September: Rewrote the post to show that the same fix can be applied both by editing the HTML template or by adding a gadget. The difference from before is that now the HTML template based fix won't break the sharing buttons etc.
UPDATED 22nd September: No longer use cloneNode as IE actually clones the event handlers so the viewer still appears.