Originally Posted by
modulo
jscheuer1: great information, I have some detective work to do. Also, admin, I will add the fact that Yahoo provides hosting for API files. But I also include all needed files in the ZIP file.
UPDATE: Added support for loading photos via AJAX. You can create an XML file, load it then view the lightbox. I made several other enhancements and ffixes as well.
I ran into a similar problem when coding my lightbox 'clone':
http://home.comcast.net/~jscheuer1/side/mybox/
My script was never meant to be a replacement for lightbox. It was meant to offer a wide variety of 'box' options with very low overhead and no reliance on outside script libraries. As a result, it has few special effects.
Anyways, in FF I remember that the 'box' would cause a vertical scrollbar if I didn't calculate its position twice. Other browsers had their own idiosyncrasies as well. There could be a better solution, I did this:
Code:
boxLoc:function(obj){
var m=mybox, w=window, ow='offsetWidth', oh='offsetHeight', sw='scrollWidth', sh='scrollHeight', cw='clientWidth', iw='innerWidth';
if(obj==m.loading)
m.olay.style.height=m.olay.style.width='';
if(obj==m.box)
m.box.style.top=m.box.style.left='';
m.olay.style.height=Math.max(m.iedb()[oh], m.iedb()[sh])-(m.ie6ha? m.ie6ha() : 0)+'px';
m.olay.style.width=m.ie6ha?m.iedb()[sw]:Math.max(m.iedb()[ow], m.iedb()[sw])+'px';
var portH=w.innerHeight || m.iedb().clientHeight;
var portW=w[iw]&&m.iedb()[cw]? Math.min(m.iedb()[cw],w[iw]) : w[iw]? w[iw] : m.iedb()[cw];
var tS=self.pageYOffset || m.iedb().scrollTop || 0;
obj.style.top=(obj==m.loading||(obj[oh]<portH&&(!obj.firstChild||obj.firstChild[oh]<portH))? portH/2-obj[oh]/2 + tS : tS + 20)+'px';
tS=self.pageXOffset || m.iedb().scrollLeft || 0;
obj.style.left=(obj==m.loading||(obj[ow]<portW&&(!obj.firstChild||obj.firstChild[ow]<portW))? portW/2-obj[ow]/2 + tS : tS + 20)+'px';
if(m.iedb()[sh] < m.box[oh]+m.box.offsetTop+29||m.iedb()[sw] < m.box[ow]+m.box.offsetLeft+29){
m.olay.style.height=m.olay.style.width='';
if(m.iedb()[sh] < m.box[oh]+m.box.offsetTop+29)
document.body.style.height=m.box[oh]+m.box.offsetTop+(m.ie6ha||document.body.filters?25:10)+'px';
if(m.iedb()[sw] < m.box[ow]+m.box.offsetLeft+29)
document.body.style.width=m.box[ow]+m.box.offsetLeft+25+'px';
m.olay.style.height=Math.max(m.iedb()[oh], m.iedb()[sh])-(m.ie6ha? m.ie6ha() : 0)+'px';
m.olay.style.width=m.ie6ha?m.iedb()[sw]:Math.max(m.iedb()[ow], m.iedb()[sw])+'px';
}
}
Full code available from the above link.
To make a long story short though, since you are adding your 'boxes' to the end of the document (as is generally preferred - I added my one box to the beginning because of iframe counting), it would be imperative to position them before displaying (display property) and to zero out their height before determining their style height. Remember, an image's height attribute may be determined once it is loaded/preloaded, without the need to display it.
Reply With Quote
I think by the time this script emerges out of beta, it'll certainly be a script I'd like to feature on DD.
Bookmarks