Question

I’m trying to write my own lightbox script but I’m stuck on a problem.

The wrapper div centering is done through position: absolute and top / left positioned by calculating…

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 on .load() and on $(window).resize() / $(window).scroll().

When the image is loaded and appended to wrapper, top and left is calculated using the functions above, horizontal centering is correct, but vertical centering is not. It is off by around 10px or more.

When the browser window is resized or scrolled, it calls the function which animates the centering which uses the same function to calculate the top and left. The window resize / scroll does center the image properly.

I have tried using jQuery deferred.then() to have it calculate the top / left after the image is appended, but it didn’t change anything.

Example: http://jsfiddle.net/vfMNQ/

---

I initially thought that the difference in top position changed when I played around with things like wrapper padding (aka my border), however, I found that I was wrong.

I added some console.log('image load height: ' + ((($(window).height() - wrapper.height()) / 2) - (options.margin + options.border)) + 'px') to .load() and .scroll() and found that the difference was oddly 21px no matter what. The default border is 10px, margin is 30… so where did the 21 come from?

I’d hate to use + 21 as a hack, but seems like nobody can figure it out.

Answer 1

Your problem appears to be in the loading div:

    .lbe-loading  {
    background: #578DB2 url(/public/images/loading.gif) no-repeat center center;
    width: 32px;
    height: 32px;
    padding: 5px;
    }
    

height:
32 + padding: (5 * 2) = 42

42 / 2 = 21px

Looks like you’ve appended the image with the loading div still appended to the wrapper.

wrapper.append(loading);

...

$(function() {

var img = $(new Image());
img.load(function() {
wrapper.append(this)    // .lbe-loading still appended here 
.css({                  // Position wrapper. 
    ...
});

loading.remove();       // Too late. 

If I remove .append(loading), it centers fine.

Put .lbe-loading on a different div so it’s not being added to the wrapper’s height.