I'm currently working on developing my own custom lightbox script, but I've hit a roadblock.
For centering the wrapper div, I've utilized position: absolute and specified top / left positions by performing calculations...
top:
_center_vertical = function() {
return (($(window).height() - wrapper.height()) / 2) - (options.margin + options.border) + $(window).scrollTop()
}
left:
_center_horizontal = function() {
return (($(window).width() - wrapper.width()) / 2) - (options.margin + options.border) + $(window).scrollLeft()
}
The wrapper div is centered upon .load() as well as when $(window).resize() / $(window).scroll() events occur.
However, after loading and appending the image to wrapper, while horizontal centering is accurate, vertical centering is slightly off by around 10px or more.
Whenever the browser window is resized or scrolled, the function is called which animates the centering process using the same functions for calculating top and left. During these events, the image is centered correctly.
I attempted to utilize jQuery deferred.then() in order to compute the top / left post-appending the image, but unfortunately, it didn't yield any changes in the outcome.
Example: http://jsfiddle.net/vfMNQ/
Initially, I presumed that the discrepancy in the top position was due to modifications like wrapper padding (i.e., border), yet this assumption turned out to be incorrect.
To investigate further, I inserted
console.log('image load height: ' + ((($(window).height() - wrapper.height()) / 2) - (options.margin + options.border)) + 'px').load() and .scroll(), revealing an unexpected 21px difference regardless of settings. With the default values being a 10px border and 30px margin, the origin of this additional 21 pixels remained elusive.
While reluctantly considering adding + 21 as a workaround, the mystery surrounding the issue remains unsolved by anyone so far.