Fixing Blogger's Mistakes

UPDATE: Blogger have finally stopped forcing the lightbox viewer upon us, which means the fix detailed in this post is no longer required! I'll be watching though and if it reappears as the default option, with no ability to turn it off, then I'll update the fix so that we can continue to choose how our images are displayed.

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 main part of the fix is a simple piece of Javascript.

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

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 </body> and </html>

If you aren't happy editing the HTML version of your template then you can also add the fix via a gadget. Simply go to the layout editor and add a new HTML/Javascript gadget (it doesn't matter where). Leave the title of the gadget blank and paste in the following code.

<script type="text/javascript">
//<![CDATA[
var lightboxIsDead = false;
function killLightbox() {
  if (lightboxIsDead) return;
  lightboxIsDead = true;
  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);
  window.attachEvent('onload', killLightbox);
}
//]]>
</script>

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: I've edited the post to suggest that the fix is used via a HTML/Javascript gadget so that new readers don't have to wade through the comments to find this out.

UPDATED 17th September: Now we specify false in the addEventListener call 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: Simplified the new fix slightly to do the replace inside body instead of the main div. This means that it will work even if you have heavily modified a template to no longer have the named div assumed by the previous version.

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.

114 comments:

  1. great, it works damn good!

    thanks! i owe you a beer :-)

    ReplyDelete
  2. Thanks, good to know it works for other peoples blogs as well as my own!

    ReplyDelete
  3. Thanks!
    This really works but there seems to take some time to load, or something. After loading the page, it doesn't work in about 30s or so and light box keep popping up...
    Here is my Blog:
    http://www.astroanarchy.blogspot.com/

    ReplyDelete
  4. Firstly WOW! Those moon photos are fantastic.

    I think the loading issue isn't related to this script though, but rather the size of some of your images. The script can only run once the page has completely finished loading to ensure that all the images that need fixing have been inserted into the page. The problem is that this includes downloading the images and the front page of your blog currently weighs in at over 7MB, which even on a fast connection will take a while (especially as most browsers only open two parallel connections at once so requests get queued up). I clicked on an image as soon as the page had fully loaded and I didn't get a lightbox popup. The best solution is probably to use smaller scaled down images on the page and then link to higher quality ones which would give you a faster loading page and the full size images when people wanted to view them.

    On a slightly related topic I noticed that you are also suffering from another blogger bug that I also had to work around early this week. You'll find that your follower widget doesn't always appear. The title will always be there but not the actual widget. This seems to be a bug related to the sharing buttons at the bottom of each post, and I think is some kind of race condition. Sometimes the scripts load in different orders and so sometimes it appears and sometimes it doesn't. The solution I found was to force a specific google script to load early in the page by adding

    <script src='https://apis.google.com/js/plusone.js' type='text/javascript'/>

    to the head section of my template (I edited the HTML and added it just before the skin section).

    Hope that all helps!

    ReplyDelete
  5. Mark, again many thanks......but It will take me a month to understand........I'm thick.....you understand.
    Blogger should never have sold out.

    I'll try and work it out. Even opening up header area is hard for me. And several others.

    ReplyDelete
  6. Thanks, I'll try to lighten up my Blog by cutting down the number of messages in the front page. Thank you very much.

    ReplyDelete
  7. I am DESPERATE to implement your solution!, but tech-speak is not always easy for me. I want to place your script in my template, but could you please further explain this part?

    "Note that when I tried the second approach I had to wrap the code in CDATA tags to get blogger to validate the code."

    ReplyDelete
  8. haha...i am a bit thick as well....how exactly does one load a script tag? i really, really HATE this photobox dealio & want it gone asap! any way to translate that for JAVA SCRIPT for dummies?? thanks!! c

    ReplyDelete
  9. Sure, what you need to do is place the code in the head section of your template by editing the html version. Find the </head> tag and then just before it add

    <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>

    Note the formatting is a little messed up but you shold get the general idea.

    Now save your template and things should be back the way there were before Blogger broke things!

    ReplyDelete
  10. Okay it turns out you don't even need to edit the HTML version of your template to add this. Just choose to add a new gadget anywhere within your layout. Choose to add a HTML/Javascript gadget, leave the title blank and then paste in the code from my previous comment. Then click save. You are now done. The fix should be working!

    The nice thing about this is that if the fix becomes unnecessary at some point in the future you can simply delete the gadget to remove it. Hope that makes life easier

    ReplyDelete
  11. Hi, I gave your script a try. First I used it as a gadget, and it seemed to work on the posts, but not the page images. I then moved it to the head section of the template and it made everything look a bit wrong (some images opened up almost completely washed out to white). I'm currently using the original lightbox code, so I'm getting the double viewer problem.

    ReplyDelete
  12. Hi Ross, it shouldn't matter where on the page you embed the code as it doesn't run until you move the mouse over an image at which point it removes Blogger's lightbox implementation. You do have to wait for the page to have fully loaded before it will work but it should then work for any image anywhere on the page.

    I'm not sure why the images were washed out, and I'm guessing you've removed the code from your blogs as I just tried to investigate but none of them seem to currently be using the workaround. The only thing I can think of is that from some reason you are getting a white semi-transparent overlay over the images in your own lightbox which would make them look washed out but i can't see how that could happen just from using my script. If you are willing to add the code back to one of your blogs I can try and take a look, if that would help.

    ReplyDelete
  13. Great fix!!!

    Worked for me by putting it before the tag. Strange they made it a compulsory addition. It could be a good feature for some sites but it doesn't improve mine at all.

    Thanks a heap for the fix.

    ReplyDelete
  14. Thanks very much for this workaround. Unfortunately it doesn't work when there is more than one picture in a single post. One of them will open full-screen, the other in lightbox.

    ReplyDelete
  15. Hi Alex, it should work with multiple images in a single post. Brief testing on my blog using this post shows that it does work. The script works by adding a new function to every image on the page, regardless of which blog post it is in, and so if it works on one image it should work on all of them.

    Are you sure you are letting the page fully load before trying to click on an image? The fix can only be applied once the page has fully loaded, including all the images.

    Can you point me at one of your posts where it isn't working and I'll take a look and see if I can figure out what is stopping it from working as it should.

    ReplyDelete
  16. Hi Mark. Many thanks for offering to look at this. My main blog is at http://www.praguestory.com. Your script has been added before the /head tag. I also tried it in a widget with the same result. To test, try the first image you see (It will open in lightbox) and then the one immediately underneath it, which opens full-screen. The site is quite a mash-up in code terms - is it possible that some other script is interfering with yours?

    ReplyDelete
  17. Just checked again. Yes. I was not allowing the page to reload. What a pain, though!

    ReplyDelete
  18. Hi Alex, the script does work for both images on that first post, but I can reproduce the behaviour you are seeing so I'll try figure out how to catch this case.

    Essentially the script works by removing the lightbox code when you move the mouse over an image after the page has fully loaded. Now if you happen to already have the mouse within the image when the page loads and you then click on it without moving the mouse then you get the lightbox effect as my code hasn't been run to fix things. Of course this never happens with the second image as you have to scroll down to be able to see it and hence the mouse can't possibly be over the image when the page loads.

    I'll try and update the script to catch this as soon as I can figure out how!

    ReplyDelete
  19. thanks Mark. I copied the code (from your Sept 17 entry) added the HTML/Javascript gadget, took a deep breath and hit 'Update' (OK I did try it on a 'throwaway blog' first) - brilliant! My pics can now be seen full size - just as before! When Google catch up with you I'll just delete the gadget. Cheers
    http://darkhorseliverpool.blogspot.com
    Alan

    ReplyDelete
  20. I've just updated the fix slightly to partially fix the problem I spotted when playing with Alex's blog. Now even if the mouse was within the image when the page loaded, as long as you move it at least one pixel in any direction the fix will be applied.

    I'll see if I can figure out how to make it work even if you don't use the mouse but that might take a little longer.

    ReplyDelete
  21. Mark, thank you so much. I run a toy and wargaming blog and I take very high resolution macro pics; that lightbox was defeating the whole purpose of my blog. This is a life saver!

    ReplyDelete
  22. Thanks Mark. I'll suffer the new bug for a while in the hope that Google fix it soon but, if not, then I'll try your script while I scope out wordpress or something.

    ReplyDelete
  23. Thank you so much. This has been a very distressing event.

    ReplyDelete
  24. You saved me (and my amateur-template which was completely messed up by the lightbox feature)
    Thank you sooo much!

    By the way, nice to hear you're into black (and proper!) coffee. It said to be a rare thing on the other side of the channel. ;)

    Cheers.
    georgina

    ReplyDelete
  25. Hi Mark, I would like to say I was very happy to find your code, because this Blogger's Lightbox, was giving me a big headache.

    I would like to ask you permission to post your script on my blog (in my language) so that my readers can enjoy this great tip.

    Certainly I will give you the due credit with a link directing back to your article. Can I post your script on my blog?

    Thanks in advance.

    ReplyDelete
  26. Hi Igor, if you think the script is useful then please feel free to blog about it in your own language. If it can help other people I'm more than happy to have people repeat it elsewhere, although as you say a link back is always appreciated.

    ReplyDelete
  27. Hi Mark. I've added your script to a gadget on my blog http://ayearinoxford.blogspot.com/ and removed the lightbox code from the head. This worked perfectly, but when I replaced the lightbox code (from here - http://www.bloggerplugins.org/2009/08/light-box-image-viewer-for-blogger.html ), it's doing that funky washed out to white thing again. If you have a chance, please take a look. Is there an alternative to lightbox that still opens your images at 100% but keeps them as an overlay image viewer? Thanks for your help.

    ReplyDelete
  28. Thank you so much. This seems to fix the problem. YOU ROCK!

    ReplyDelete
  29. This is really great, thanks so much for your help!

    Paul
    http://paulcorio.blogspot.com/

    ReplyDelete
  30. Thanks for the fix, it works, for the most part. The problem I now notice is that the blog will randomly revert back to the slide show feature. Usually, the first time I click on an image, after my blog is first opened, that image will open to slide show. I'll go back to the main page and click on the same or a different image and it will open the way I want - no slide show, just a larger image.

    The fix works, but not perfectly. My blog randomly reverts back to slideshow. Anyone else having this problem? Any absolute fixes on getting rid of the slideshow?

    ReplyDelete
  31. Mark, many thanks, I've published the article on my blog with due credits. Here's the link if you want to check: http://bloggandonaweb.blogspot.com/2011/09/como-desativar-o-lightbox-padrao-do.html.

    I take this comment to ask you how do I make the code tag: <code>, looks like yours, because I would love to use the same theme on my blog, do you have some article that teaches how to make this modification, or can you direct me to an article for this kind of customization?

    Thanks in advance, and sorry about the bad english, I'm using Google Translator.
    Big hug.

    ReplyDelete
  32. Hi Ross, I think the problem is the style sheet that is included to make the Blogger version work is messing up the default version. It looks as if for some reason an opacity value is being set on the image when it is loaded in the popup. I'm not quite sure why and it's difficult for me to test a fix without access to the template, but I think the following should work.

    You essentially need to add the following CSS to your template.

    #lightboxImage { opacity: 1 !important; }

    This should force the opacity of the image to be 1 no matter what else tries to set the value.

    I think you have already added some CSS for lightboc to your template so you are probably quite happy doing this via the HTML template editor but you could also...
    Log in to Blogger and open the template designer (the thing that allows you to change backgrounds, colours etc.) and go the Advanced section. You should find you now have a large text box for adding custom CSS. In this box add the following to anything that is already there.

    I hope that helps

    ReplyDelete
  33. Hi Igor, I use a javascript library called SyntaxHighlighter to make the code on this blog look a little nicer.

    ReplyDelete
  34. well the script is not working on my blog!! http://www.myfacehunter.com

    i ve implemented the code corectly check in the source code! but still not working!!!

    ReplyDelete
  35. Hi Ashley,

    I'm not entirely sure how but when you pasted the code into the gadget you have added you've ended up replacing any spaces at the beginning/end of each line with a character code, &#160;

    This is invalid code and so the script fails with a syntax error and is never applied to your blog. If you just edit the gadget and remove all the &#160; that you can see then it should start working. if you can't see any &#160; then simply try deleting and recreating the gadget.

    ReplyDelete
  36. Thanks mate, with this you have restored my calm. :)

    In response to Ashley's problem, I've found if I cut & paste to a Word Doc for example, when you then re cut & paste to HTML it adds character code like &# all the time.

    It's best to 'wash' it through something like note pad to ensure you only take the 'pure' script you want to implement.

    ReplyDelete
  37. Hi Mark. I tried your new fix, and although it worked on posts with single images, on pages with multiple images it didn't work so well. First I'd click on an image and it wouldn't give me the option to move to the next, then when I manually clicked on a different image, only the first image would appear. So... I've removed the lightbox script, and I'm just going to use Blogger's default viewer. Thanks for giving it a go anyway.

    ReplyDelete
  38. Hi Ross, sorry that CSS change didn't fully fix things for you. I'm guessing the CSS from the two different lightbox versions are interacting badly. If you want your old script then you might be able to get it to work simply be adding !important to the end of every lightbox related CSS style you had, but I guess that's a lot of hassle without knowing if it will actually work or not.

    ReplyDelete
  39. thanks
    no problem with shadowbox
    it works :)

    example: kaynayan.blogspot.com

    ReplyDelete
  40. Thanks so much for this fix. My photo-blog was ruined with this un-asked for "improvement". I just installed your code as directed into a blogger gadget in the layout and the shadowbox/lightbox display is now gone.

    Bravo!
    temposenzatempo.blogspot.com

    ReplyDelete
  41. Thanks, Mark (with a "k")! Your fix worked at our blog: http://Troop60147.blogspot.com. The girls of my daughter's troop thank you!

    Cheers,

    Marc (with a "c")

    ReplyDelete
  42. Than you. I'll reblog with your reference ;)

    ReplyDelete
  43. Thanks for the fix Mark.
    I implemented your code in a widget; it works on my post pages but I'm using lytebox photo galleries on my static pages and your code doesn't seam to override the blogger lightbox (or what it is).

    However if I insert your code a second time directly in the static page it works but overrides both lightboxes, Blogger's and mine too and opens the picture in Picasa.
    The result is the same when applying your code in the template with a conditional tag for all static pages.

    Is there a way to have back my lytebox but not Blogger's?
    Here is a link to one of my static page galleries (script applied with cond. tag), if you'll be so kind to have a look:
    http://maiasfotos.blogspot.com/p/reflections.html

    Many thanks in advance.

    ReplyDelete
  44. Hi maiaT, I've had a look at your blog (nice photos by the way) and the problem isn't with the fix. I'm not entirely sure why or how but your static page attempts to load lytebox by inclusing the following script

    http://ilook12scripts.googlecode.com/files/lytebox_grey.js

    Unfortunately that URL returns a 403 Forbidden error. This means that lytebox is never applied to your static page.

    If you fix the error by importing the lytebox script from a different source then you should find my fix starts working again. You also shouldn't need to add the fix twice, as the second copy will simply replace anything the first does.

    If you can fix the lytebox script and my fix still doesn't work then let me know and I'll take another look.

    Hope that helps!

    ReplyDelete
  45. Yes you are right, my import link is dead, but it was working a few days back when I last checked.

    I decided to host the script myself but first I checked the first three tutorial on search result for their demos and they all display both lightboxes one on top of the other, the Blogger one being on top. People on the forum are complaining of the same thing.
    I checked the css file linked to the template to change the z-index and opacity but nothing is working.

    I'm just an amateur and its possible I'm talking nonsense but isn't it possible to change these parameters and bring up the lytebox above blogger's viewer?

    Thank you very much for checking my page.
    I don't have any other solution than to accept Blogger viewer for now but I'll check back, hoping that you'll find a fix for these cases.

    ReplyDelete
  46. maiaT, I'm guessing any tutorial's you've looked at for using lytebox aren't yet using my fix which is why they are getting one viewer on top of the other.

    It might be possible to change the CSS z-order to force lytebox to be on top but you would still get two viewers which I'm guessing you don't really want. By far the easiest solution is to fix the broken import and apply my fix. Once you have done those two things (both of which are fairly easy, compared to editing the lytebox CSS) everything should go back to how it was a week ago.

    ReplyDelete
  47. Thank you, I'm on it now and come back later.

    ReplyDelete
  48. Thank you, than you very much Mark. I hosted a new copy of the js and your code worked like a charm.

    I apologize for not seeing my dead link but this whole Blogger surprise made me very furious.

    Thanks again, also for you patience!

    ReplyDelete
  49. maiaT, no worries just glad you got it sorted!

    ReplyDelete
  50. Mark! I don't mind the "LightBox" overlay implemented by Blogger, although I have to say that Blogger should let us chose everything on our Blogs not force something like this on everybody!

    But my problem is that my older posts from 2009 or so are not working probably, when you click on the photos you only get a small red box, do you know why this is happening?

    ReplyDelete
  51. Adding your code to an html gadget worked perfectly on my blog. Thanks very much!

    ReplyDelete
  52. SHAHIN, I haven't had the red box problem, as I used to host my photos elsewhere. However, I'm led to believe that adding the following just below the </html> tag in your template should solve the problem.

    <script type='text/javascript'>
    //<![CDATA[
    cambimagen = document.getElementById('main');
    cambiarimg = cambimagen.innerHTML;
    cambiarimg = cambiarimg.replace(/\/s1600/g,'/s00');
    cambimagen.innerHTML = cambiarimg;
    //]]>
    </script>

    Basically this replaces 1600 with 00 in all the image links which apparently make the links to older photos work. If you try this could you let me know if it does work or not, thanks.

    ReplyDelete
  53. If you want to complain to Blogger about this new feature/bug then can I suggest that you leave a comment on the most recent Blogger Buzz post which suggests that the new viewer is an improvement. They even claim that "Your images never looked so good!" Who do they think they are lying to!

    ReplyDelete
  54. For anyone following the comments, I've just updated the post with instructions for using a much better fix that has just appeared in the Blogger forums.

    ReplyDelete
  55. I noticed that your fix works only when the page complete loads, but this was just a detail. I want to test the new code, but I'm not sure: do I need to use the two codes together, or just the first code?

    ReplyDelete
  56. Mark, I'm a geek. It works and took a couple of minutes. I've reverted back to the old Dashboard. Prettier it is. I did save the original to my desktop first. Just in case.....man of little faith I am.

    ReplyDelete
  57. Igor, you only need one of the fixes, so if you are happy editing the HTML version of your template use the first block of code as it is a better, more reliable, fix.

    ReplyDelete
  58. A Google employee called Brett has (rather redundantly) started another forum thread asking for feedback on the new viewer. If you don't like the viewer then can I suggest this may be the best way of letting Blogger know directly.

    ReplyDelete
  59. Thank you for doing all this to help other bloggers.

    Do you think possibly the Blogger staff doesn't want to admit they made a mistake?

    ReplyDelete
  60. Mark, I implemented the HTML/Javascript gadget and it works fine. Thanks for posting this!
    Jan (Momma to Sabrina, Sam and Simon)

    ReplyDelete
  61. Thanks! I have a silly drag and drop script at my blog and the change broke it. Fixed now.

    ReplyDelete
  62. Hi Mark,
    I'm in big trouble so I'm back to ask for your help.
    I've changed your code with the one from Bonjour Tristesse and it works fine except my social sharing (custom) bar was all messed up on all my four blogs, where I installed the fix.
    So I deleted it and went to AddThis for a new sharing bar.
    I didn't install the AddThis code myself, there was a button to "Install to Blogger", so when I pushed it, it just inserted the code in one of my blog without showing the code or even asking to which blog to insert, (as usual when adding a widget).

    Now I want to get rid of it but I can't find the code anywhere in "Edit Html", though I see it in my source code.

    Their uninstall instructions say that you should ask for help in their forum but they don't answer to anyone's questions.

    Could you please help me find that code, I don't know where to find help and already lost two hours reading AddThis forum files. Here you can see the share bar.

    Many, many thanks in advance.

    ReplyDelete
  63. maiaT, I would have thought that there should be a gadget you could delete from the layout page in your dashboard. If not though, it looks as if AddThis inserts some javascript in the head section of your template. Edit the HTML version of the template and look for a script that comes from api-public.addthis.com and remove the entire script element.

    Hopefully that should kill it off!

    ReplyDelete
  64. Thank you very much Mark, I found it finally.
    Have a nice day!

    ReplyDelete
  65. Thank you so much. I post a lot of printable craft items and really needed a fix. I linked to this.

    ReplyDelete
  66. For those of you subscribbed to the comments, I just thought I'd point out that the "fix" has been updated once again. It turns out that the shorter fix, from Bonjour Tristesse, was actually breaking a whole bunch of other widgets (specifically the sharing buttons that get added to each post), and so I've gone back and improved the original fix and now recommend using that via a gadget. This is both easy to add and easy to remove if Blogger ever provide proper support for turning the viewer off.

    Sorry I didn't notice this problem before.

    ReplyDelete
  67. Thank you so much. I have grieved over the destruction of my blog which relies on photos to document where we've been, what we did and what we saw. It's not world hunger, but it's my blog. I just applied the new fix and it's loading much faster. The html-challenged among us salute you.

    ReplyDelete
  68. Thanks Allison, glad to hear the new version is working better!

    ReplyDelete
  69. Thank you so much, I applied the code and no more lightbox. It's back to normal on my blog now. Cheers.

    ReplyDelete
  70. Now I have applied the gadget version to all of my blogspots. And they work as they should again. Perhaps you could sell this solution to the blogger team?!
    Thank you very much for an interesting and rewarding discussion.

    ReplyDelete
  71. Thank you!
    I wrote a swedish tutorial using your script and linked to your site here: http://fixa-din.blogspot.com/2011/09/ta-bort-bloggers-nya-bildvisning.html
    Regards, Anneli

    ReplyDelete
  72. FANTASTIC! Works like a charm! BIG thanks!
    I made you a lil sidebar banner on my blog that takes people to this post. Your fix deserves to be shared =D

    Lotsa Hugs!
    xoxoxo
    Gnin

    ReplyDelete
  73. Hello, sorry for my bad english.

    The menu in my blog is dropdown javascript menu. When i add the code, the drop downs catecorys not show.

    My problem in lightbox is, when show the image, showing and the javascript menu too, over the image...

    Any ideas Mark?

    ps. great work man, excellent blog.

    ReplyDelete
  74. PICKit.gr, the problem with the menus on top of the lightbox is down to a CSS issue, as the lightbox doesn't have a higher z-index value than your menus.

    The drop downs not working when the fix is applied is because unfortunately the code to make them drop down is removed by the fix. I'll see if I can update the code to work around this problem.

    However, Blogger have said they will disable the new viewer so hopefully the problem should resolve itself soon without you having to do anything.

    ReplyDelete
  75. I tested my blogspots from IE9: on three of them the Lightbox effect is still there. The gadget seems to work only on one of them - my hockey blog. At least my main blog is ok on Chrome, Opera, Firefox and Safari according to my brother ...

    ReplyDelete
  76. goran.bength, that's a little weird, unfortunately I don't have a machine with IE9 on it for testing. Could you have a look at the javascript console and see if any errors are being displayed when you view the blogs in IE9? To access the console press F12 and then switch to the console tab. Try refreshing the page a few times with the console visible and let me know if it reports any problems.

    ReplyDelete
  77. Sorry for the delay. No problems reported.

    ReplyDelete
  78. goran.bength, that is really odd. All I can think of is that for some reason the script isn't being run at all.

    Could you check this by temporarily adding a single line of code to the fix? If you insert

    alert("Fix being applied");

    on the line after

    function killLightbox() {

    Now refresh the page and you should get a popup message. If you do then the code is being run but the fix isn't working. If you don't get the message then for some reason the fix isn't being applied at all.

    Let me know what happens and I'll investigate further. I'll also try and find a machine with IE9 on so I can do some testing myself.

    ReplyDelete
  79. Smart! No popup-message in IE9! But in Chrome. And I saw that the blog that is working correct (without Lightbox) is using the short fix - so I think none of my blogspots work in IE9 whith the gadget fix

    ReplyDelete
  80. goran.bength, I've updated the gadget fix and it should now work in IE (albeit only when the document has fully loaded). The problem with the short fix is that it breaks other functionality. Specifically it breaks the sharing buttons.

    ReplyDelete
  81. goran.bength (and everyone else) I've just updated the post again, as you can actually apply a variant of the gadget based fix within the HTML template which works reliably in IE as well as all sane browsers!

    Both ways of applying the fix work in the same way so neither of them should break the sharing buttons or any other gadgets you may be using. In the end which you use comes down to how you prefer editing your template/layout.

    ReplyDelete
  82. Now I've tested IE9 with the new version of the gadget - but no it does not help. But now I get an popup message via the alert function.

    ReplyDelete
  83. Hmm, that's really really weird. If the alert is firing then the code is running and the problem should be fixed.

    Can you try the new HTML template version I just posted and see if that works or not (it has the advantage of not breaking the sharing buttons).

    ReplyDelete
  84. right it looks as if IE isn't following the spec for cloneNode, give me a few minutes and I'll update the fix to a version that doesn't use that function.

    ReplyDelete
  85. Right, we have another updated version. This one doesn't use the cloneNode function so it should work in IE.

    If you care about the details then in every browser apart from IE when you clone a HTML DOM node it doesn't copy event handlers that have been dynamically added, whereas in IE it does. Not really sure which is the correct behavior but it means that to kill lightbox we can't rely on cloneNode and have ot work in IE.

    ReplyDelete
  86. Yes - this one works in IE9 and Chrome!

    ReplyDelete
  87. Excellent, sorry it took so long. Now if only Blogger would hurry up and remove the feature as they promised to do.

    ReplyDelete
  88. Thank you very much. We must be happy that Blogger didn't remove the feature while we were testing ...

    ReplyDelete
  89. They've rolled it back! I just visited my dashboard and removed the fix. The Lightbox is gone.

    I liked the idea of your widget-based fix, but I used Bonjour Tristesse's solution because it was quick and easy to add. It usually broke the Google +1 button, but not every time. I'm not a JavaScript expert, but I'm guessing the interference depends on the order in which script files arrive. ADSL/ADSL2+ connections are slow and patchy further than 4 miles from a telephone exchange.

    I was expecting the Blogger team to have added an ON/OFF option by mid-week. Days have gone by since the weekend. The crazy thing is, Mark, that you are not being paid for your time working out a solution for everyone's benefit. Blogger team members no doubt receive high salaries but they all disappeared over the crucial weekend.

    For four years I've maintained a Blogger vs. Wordpress.com Comparison Chart. On Tuesday I added a prominent notice about Blogger's blunder.

    It's reminiscent of the SiteMeter "New Look" fiasco exactly three years ago - in September 2008. See this post by an irate blogger. The SiteMeter team rolled it back within 24 hours. See also: Apologies from SiteMeter at Google Groups. Blogger's team leader should have had the decency to apologise swiftly.

    ReplyDelete
  90. kPulsed, thanks for letting us all know. It was still there less than an hour ago but your right it's finally gone!

    It took them long enough. Let's hope that if/when they reintroduce it they make it opt-in rather than the default. I'll add a note to the post pointing out that the fix is no longer necessary. Hopefully we won't ever need it again... although I'm not betting on it.

    ReplyDelete
  91. Yay, Darkbox is dead - for now.

    ReplyDelete
  92. thanks dear It works perfect www.techshortly.com

    ReplyDelete
  93. hi,is possible removing also (lytebox of the tumblr.com/) is very orrible
    when posting several images in a post.thanks

    ReplyDelete
  94. I've never used tumblr so I'm not sure. Could you point me at a URL that shows lytebox on a tumblr page and I'll take a look.

    ReplyDelete
  95. hi Mark thanks!sending you the link
    look the single post with many images
    this not my blog Mark
    http://pluimer.tumblr.com/

    ReplyDelete
  96. Right from a quick look it would seem that the same trick could be used to disable lytebox on tumblr. The problem is that I can see no way of getting the code into position. The photosets are dislayed in an iframe which it doesn't look like you can edit yourself. As such you are probably stuck with lytebox.

    Of course you could use a greasemonkey script to disable it for all tumblr blogs you view (you need to change the @include line to *photoset_iframe*) but there doesn't seem to be an obvious way of removing it for all visitors from a specific tumblr account.

    ReplyDelete
  97. ok,Hi Mark, thank you for the interest you, very kind
    a nice week-end

    ReplyDelete
  98. Ola eu gostaria se fazer funcionar o ligthboz e nao consigo me ajuda, acesse meu blog

    ReplyDelete
  99. Hello! Can I ask you the opposite way? I have turned off my lightbox but it doesn't seem to work. I wish for it to work for my blog here : www.hanmiaojuan.com and I hope you can email me for the help! I really like the lightbox and I had it before and suddenly it disappears. I wish you can help me how to revive it back.

    xx
    www.hanmiaojuan.com

    ReplyDelete
  100. Sorry, I mean I have turned ON.

    ReplyDelete
  101. Not sure. It may be related to the fact that you aren't hosting your photos via Picasa. I'm guessing that the new version of Blogger's lightbox, is ignoring images which they don't know how to generate a URL to the larger version of.

    ReplyDelete
  102. I'm so glad they gave us the option to turn this off.

    ReplyDelete
  103. Thank u so much..:) I hated the lightbox stuff!!

    ReplyDelete
  104. This comment has been removed by a blog administrator.

    ReplyDelete
  105. This comment has been removed by a blog administrator.

    ReplyDelete