LightBox Firefox Mac Scrollbar Problem
Pretty weired headline, isn’t it? Well, I like Lightbox, use it quite often and most of the time it works fine. Now I encountered a strange bug: if you use lightbox on Mac in Firefox and you hav a div layer under it whit has CSS Style
overflow: auto;
the scrollbar will overlap the image (see picture).
I searched quite some time to find the solution, but in the end it was bloody simple. So I thought I post it here, just in case you are searching too. Just set the style of the div layer to overflow: hidden when the lightbox overlay is generated (you can write a new function or put in in fuction hideSelectBoxes(). Something like this:
var content_div = document.getElementById("content");
content_div.style.overflow = "hidden";
In the function showSelectBoxes() you have to restore the style again:
var content_div = document.getElementById("content");
content_div.style.overflow = "auto";
Piece of cake, isn’t it? I know this is not the most beautiful solution and you have to manipulate your lightbox.js, but it works. If anyone finds a better / easier solution, please post it as a comment.
RSS-Feed
TrackBack URI
Comment by mike — Tuesday, 26th 2008f February 2008 @ 4:07 pm
I’ve been having this same problem and finding this was very exciting. However I’m still having problems getting your solution to work, which is my fault(I’m not a programmer). Is it possible to post a link to the corrected lightbox.js file so that I can get a look at the solution as it was correctly implemented?
Thanks a lot.
Comment by Lanzelot — Tuesday, 26th 2008f February 2008 @ 4:13 pm
Sorry, I think this is not possible, because it’s actually not a fault of Lightbox. The Problem is the divlayer “under” it (the one with the scrollbar). So you have to give this one an id (e.g. content) and set the overflow style to “hidden”, when lightbox is loading, and “auto” when lightbox is closed (as described in my posting)
Comment by mike — Tuesday, 26th 2008f February 2008 @ 4:43 pm
It works! Thanks.
Comment by Matt Fawcett — Thursday, 28th 2008f February 2008 @ 10:31 pm
This worked for me and only took minutes to implement. Cheers. Matt
Comment by therealwayno — Thursday, 06th 2008f March 2008 @ 4:48 pm
Thanks to you I was able to resolve this issue within 30 minutes of it being brought to my attention. Very much appreciated.
Comment by Mike the 2nd — Tuesday, 25th 2008f March 2008 @ 2:14 pm
can anyone tell me where do you put this code in the java file?
im pretty clueless on javascript so any help would be great as ive got this problem too!
Comment by Graham — Thursday, 03rd 2008f April 2008 @ 6:10 pm
THANK YOU!!!!!!!!!!!!!!!!!!I’D LIKE TO GIVE YOU A BIG KISS!!!!!!!!!!!!
Comment by Lanzelot — Thursday, 03rd 2008f April 2008 @ 8:09 pm
Hehe, thanks a lot, it’s a pleasure to help …
@Mike the 2nd: just search for the functions hideSelectBoxes() and showSelectBoxes() … in there you put the according code in a separate row.
Comment by Bart — Friday, 18th 2008f April 2008 @ 6:52 pm
I’m having the same problem but I cannot find hideSelectBoxes() or showSelectBoxes() anywhere in any of the js files. I’m running version 2.04. Thanks for any help you can give.
Comment by Lanzelot — Friday, 18th 2008f April 2008 @ 11:19 pm
weired … ok, in the new version (2.4) there is a new function structure … now you need to put the lines in the functions “start” (Line 203) an “end” (Line 437) … haven’t tried it our yet, but it should work. I will try it in the next days, but for now, I hope this helps you.
Comment by Jakki — Sunday, 27th 2008f April 2008 @ 2:00 pm
Omg you are a LEGEND. Took a while for me to understand where to put the code but it finally works! Can’t thank you enough!
Comment by Richard — Thursday, 01st 2008f May 2008 @ 3:06 pm
I have the same problem only I am using slimbox…..which has a different js layout…. I haven’t a clue about javascript…would be very grateful for any suggestions…thanks
Comment by Richard — Thursday, 01st 2008f May 2008 @ 3:22 pm
here is the js
/*
Slimbox v1.41 - The ultimate lightweight Lightbox clone
by Christophe Beyls (http://www.digitalia.be) - MIT-style license.
Inspired by the original Lightbox v2 by Lokesh Dhakar.
*/
var Lightbox = {
init: function(options){
this.options = $extend({
resizeDuration: 400,
resizeTransition: false, // default transition
initialWidth: 250,
initialHeight: 250,
animateCaption: true,
showCounter: true
}, options || {});
this.anchors = [];
$each(document.links, function(el){
if (el.rel && el.rel.test(/^lightbox/i)){
el.onclick = this.click.pass(el, this);
this.anchors.push(el);
}
}, this);
this.eventKeyDown = this.keyboardListener.bindAsEventListener(this);
this.eventPosition = this.position.bind(this);
this.overlay = new Element(’div’, {’id’: ‘lbOverlay’}).injectInside(document.body);
this.center = new Element(’div’, {’id’: ‘lbCenter’, ’styles’: {’width’: this.options.initialWidth, ‘height’: this.options.initialHeight, ‘marginLeft’: -(this.options.initialWidth/2), ‘display’: ‘none’}}).injectInside(document.body);
this.image = new Element(’div’, {’id’: ‘lbImage’}).injectInside(this.center);
this.prevLink = new Element(’a', {’id’: ‘lbPrevLink’, ‘href’: ‘#’, ’styles’: {’display’: ‘none’}}).injectInside(this.image);
this.nextLink = this.prevLink.clone().setProperty(’id’, ‘lbNextLink’).injectInside(this.image);
this.prevLink.onclick = this.previous.bind(this);
this.nextLink.onclick = this.next.bind(this);
this.bottomContainer = new Element(’div’, {’id’: ‘lbBottomContainer’, ’styles’: {’display’: ‘none’}}).injectInside(document.body);
this.bottom = new Element(’div’, {’id’: ‘lbBottom’}).injectInside(this.bottomContainer);
new Element(’a', {’id’: ‘lbCloseLink’, ‘href’: ‘#’}).injectInside(this.bottom).onclick = this.overlay.onclick = this.close.bind(this);
this.caption = new Element(’div’, {’id’: ‘lbCaption’}).injectInside(this.bottom);
this.number = new Element(’div’, {’id’: ‘lbNumber’}).injectInside(this.bottom);
new Element(’div’, {’styles’: {’clear’: ‘both’}}).injectInside(this.bottom);
var nextEffect = this.nextEffect.bind(this);
this.fx = {
overlay: this.overlay.effect(’opacity’, {duration: 500}).hide(),
resize: this.center.effects($extend({duration: this.options.resizeDuration, onComplete: nextEffect}, this.options.resizeTransition ? {transition: this.options.resizeTransition} : {})),
image: this.image.effect(’opacity’, {duration: 500, onComplete: nextEffect}),
bottom: this.bottom.effect(’margin-top’, {duration: 400, onComplete: nextEffect})
};
this.preloadPrev = new Image();
this.preloadNext = new Image();
},
click: function(link){
return this.show(link.href, link.title);
if (link.rel.length ==
var j, imageNum, images = [];
this.anchors.each(function(el){
if (el.rel == link.rel){
for (j = 0; j = this.images.length)) return false;
this.step = 1;
this.activeImage = imageNum;
this.bottomContainer.style.display = this.prevLink.style.display = this.nextLink.style.display = ‘none’;
this.fx.image.hide();
this.center.className = ‘lbLoading’;
this.preload = new Image();
this.preload.onload = this.nextEffect.bind(this);
this.preload.src = this.images[imageNum][0];
return false;
},
nextEffect: function(){
switch (this.step++){
case 1:
this.center.className = ”;
this.image.style.backgroundImage = ‘url(’+this.images[this.activeImage][0]+’)';
this.image.style.width = this.bottom.style.width = this.preload.width+’px’;
this.image.style.height = this.prevLink.style.height = this.nextLink.style.height = this.preload.height+’px’;
this.caption.setHTML(this.images[this.activeImage][1] || ”);
this.number.setHTML((!this.options.showCounter || (this.images.length == 1)) ? ” : ‘Image ‘+(this.activeImage+1)+’ of ‘+this.images.length);
if (this.activeImage) this.preloadPrev.src = this.images[this.activeImage-1][0];
if (this.activeImage != (this.images.length - 1)) this.preloadNext.src = this.images[this.activeImage+1][0];
if (this.center.clientHeight != this.image.offsetHeight){
this.fx.resize.start({height: this.image.offsetHeight});
break;
}
this.step++;
case 2:
if (this.center.clientWidth != this.image.offsetWidth){
this.fx.resize.start({width: this.image.offsetWidth, marginLeft: -this.image.offsetWidth/2});
break;
}
this.step++;
case 3:
this.bottomContainer.setStyles({top: this.top + this.center.clientHeight, height: 0, marginLeft: this.center.style.marginLeft, display: ”});
this.fx.image.start(1);
break;
case 4:
if (this.options.animateCaption){
this.fx.bottom.set(-this.bottom.offsetHeight);
this.bottomContainer.style.height = ”;
this.fx.bottom.start(0);
break;
}
this.bottomContainer.style.height = ”;
case 5:
if (this.activeImage) this.prevLink.style.display = ”;
if (this.activeImage != (this.images.length - 1)) this.nextLink.style.display = ”;
this.step = 0;
}
},
close: function(){
if (this.step
Comment by JBills — Thursday, 01st 2008f May 2008 @ 9:32 pm
I’m having the same problem as Bart. I’m also using ver 2.04 and I’ve tried a few different combinations of what you suggested to him, but nothing seems to work. Any confirmed solution yet? Thanks!
Comment by Lanzelot — Friday, 02nd 2008f May 2008 @ 10:02 am
Sorry, I’m very busy at the moment (as you might see in the lack of postings recently), but I promis to find a solution as soon as possible.
Comment by JBills — Thursday, 15th 2008f May 2008 @ 3:27 pm
Any updates? Still having the same problem with ver. 2.04.
Comment by name — Monday, 09th 2008f June 2008 @ 3:38 am
Yeah man, thanks a lot for this fix.
Comment by Mat — Tuesday, 17th 2008f June 2008 @ 1:49 pm
I was stoked to find this post, then soon remembered that it was Lightview I was using, not Lightbox. Has anyone figured out a solution for Lightbox? I’m hopeless with Javascript, so I can’t figure out how to implement the fix from this page on my own!
Comment by Mat — Tuesday, 17th 2008f June 2008 @ 1:49 pm
I was stoked to find this post, then soon remembered that it was Lightview I was using, not Lightbox. Has anyone figured out a solution for Lightview? I’m hopeless with Javascript, so I can’t figure out how to implement the fix from this page on my own!
Comment by richard — Wednesday, 18th 2008f June 2008 @ 2:38 pm
Here is half a fix for slimbox/media box…..it puts the div into overflow:hidden on open.
But cant seem to make go make to overflow:auto on the close of the overlay….any help on this would be very much appreciated.
here is the code:
setup: function(open){
var aDim = this.rel.match(/[0-9]+/g); // videobox rel settings
this.contentsWidth = (aDim && (aDim[0] > 0)) ? aDim[0] : this.options.defaultWidth; // videobox rel settings
this.contentsHeight = (aDim && (aDim[1] > 0)) ? aDim[1] : this.options.defaultHeight; // videobox rel settings
var elements = $A(document.getElementsByTagName(’object’)); // hide page content
elements.extend(document.getElementsByTagName(window.ie ? ’select’ : ‘embed’));
elements.each(function(el){
if (open) el.lbBackupStyle = el.style.visibility;
el.style.visibility = open ? ‘hidden’ : el.lbBackupStyle;
});
var fn = open ? ‘addEvent’ : ‘removeEvent’;
window[fn](’scroll’, this.eventPosition)[fn](’resize’, this.eventPosition);
document[fn](’keydown’, this.eventKeyDown);
this.step = 0;
$(’content’).setStyle(’overflow’, ‘hidden’);//FIX FOR SCROLLBAR
},
//……………………………………..
THIS IS THE CLOSE …that doesnt work…
close: function(){
if (this.type == ‘qt’ && window.webkit) {
this.currentObject.Stop(); // safari needs to call Stop() to remove the object’s audio stream…
}
$(’content’).setStyle(’overflow’, ‘auto’);//FIX FOR SCROLLBAR
if (navigator.plugins && navigator.plugins.length) {
this.canvas.setHTML(”);
} else {
if (window.ie6) {
// this.currentObject.style.display = ‘none’;
this.canvas.innerHTML = ”;
} else {
this.canvas.innerHTML = ”;
Comment by Peter — Wednesday, 23rd 2008f July 2008 @ 12:45 pm
Nice work!
Comment by Proxymus — Friday, 25th 2008f July 2008 @ 9:42 am
@Comment by richard — Wednesday, 18th 2008f June 2008 @ 2:38 pm
try this:
close:function() {
…
setTimeout(”$(’content’).setStyle(’overflow’, ‘auto’)”, 500);//FIX FOR SCROLLBAR
// 500 is duration for opacity effect
…