Hi - I'm working my way through jQuery book, Novice to Ninja (p94), on an exercise which is illustrating how to pop up a simple lightbox for an image when it's clicked.

I would be grateful if someone could explain to me in the code at the bottom, how is it that, in the line :

Code JavaScript:
var top = ($(window).height() - $('#lightbox').height()) / 2;

there is a value for the 'height' for the #lightbox at this stage

since the img element is if I'm not mistaken is in limbo land at this stage and is only appended to the id 'lightbox' later down the code.

Code JavaScript:
$(document).ready(function(){
  $('a.lightbox').click(function(e) {
    $('body').css('overflow-y', 'hidden'); // hide scrollbars!
 
    $('<div id="overlay"></div>')
      .css('top', $(document).scrollTop())
      .css('opacity', '0')
      .animate({'opacity': '0.5'}, 'slow')
      .appendTo('body');
 
    $('<div id="lightbox"></div>')
      .hide()
      .appendTo('body');
 
    $('<img />')
      .attr('src', $(this).attr('href'))
      .load(function() {
        positionLightboxImage();      //   at this stage how is the 'height' for the
      })                             //   #lightbox populated with any value
      .click(function() {
        removeLightbox();
      })
      .appendTo('#lightbox');
 
    return false;;
  });
});
 
function positionLightboxImage() {
  var top = ($(window).height() - $('#lightbox').height()) / 2;
  var left = ($(window).width() - $('#lightbox').width()) / 2;
  $('#lightbox')
    .css({
      'top': top + $(document).scrollTop(),
      'left': left
    })
    .fadeIn();
}
 
function removeLightbox() {
  $('#overlay, #lightbox')
    .fadeOut('slow', function() {
      $(this).remove();
      $('body').css('overflow-y', 'auto'); // show scrollbars!
    });
}


thanking in advance.