Fixing the Back Button in Lightbox
AJAX, Web Design June 24th, 2007Our main website makes full use of the excellent lightbox.js script first published by Lokesh Dhakar . When I first saw the script, I knew it was the answer to the problem of how to display image galleries without Flash or Pop ups.
If you are not familiar with the way the script works, have a look at the “Custom Signs Gallery” on our main page.
There is one HUGE problem with the original scripts you will find all over the web. There has been many mods to the script to make it lighter etc, but in all cases, the back button breaks! This is a terrible thing to do.
Hence we decided to set about fixing it. You can see that the back button will work on the custom signs page, but will break on Lokesh’s original demo pages. We needed to make the back button close the lightbox, not take you to the previous page.
Here is the solution:
UPDATE: I have now made a homepage for this called BackBox. You will find all you need there.
This implementation should fix the back button in all modern browsers, leaving you with a cool, usable, standard compliant lightbox!
August 31st, 2007 at 8:17 am
Hmmm. Does this only work for Lightbox 1.0? I’ve already implemented 2.0, can i use that?
August 31st, 2007 at 8:23 am
I am using it with a modified version of 2.0 and it works fine. In fact, it’s more difficult to get it to work in 1.0.
August 31st, 2007 at 8:13 pm
Im really surprised that this fix hasn’t caught on all over the web. It seems to be a huge problem with lightbox and all my clients want the back button to still work. Im still having a little trouble figuring it out though. I had already had 2.0 running fine so i just took header.js footer.js and dhtmlhistory.js and installed those and made a div with onclick=”dhtmlHistory.add(‘location1′,{message: ‘hello world 1′});countdown()”. Is there something I’m missing? the site im working on is http://ellencoyle.com/
September 1st, 2007 at 9:05 am
Hi,
I am sure it will catch on one day. Maybe I should improve my web page to make it more clear. Without the fix, lightbox is a bit useless.
I just had a look at your source code, and I think you have a mistake in it. Every image on the page which fires lightbox needs to have the history div around it. Here is the code I would try for each image:
<div onclick="dhtmlHistory.add('location1',{message: 'hello world 1'});countdown()">
<a href='images/paintings/abstractinacrylic1lg.jpg' title=' Title: Red Sky at Night. Size: 24"x36" Acrylic on Board. $400.00' rel='lightbox[abstractinacrylic]' rel="nofollow">
<img height='79' width='79' class='gallery' src='images/paintings/abstractinacrylic1.jpg' alt='abstractinacrylic 0' /></a>
</div>
Give it a try and let me know. Notice the ending div which needs to be in place. I am not sure if you are running the same version of lightbox as me, as mine is modified.