jQuery & CSS: Custom zoom function... almost there

I've got a small and simple zoom function that fades in an overlay and then resizes and repositions an image centered in the browser window above said overlay...

You can checkout a page I setup for this problem here, I didn't try jFiddling this one. If you move your browser window the image doesn't move with the rest of the content, but the idea behind the zoom works perfectly well. Thanks in advance for any advice!

CSS: As I've got it now, it all works so开发者_运维问答 long as I define the image's position as absolute and define a starting top and left position:

#image{
    display:none; // faded in
    position:absolute;
    top:14em;
    left:30em;
    z-index:999999; // stay above overlay
}

jQuery: And here is the jQuery function in it's full:

    $("#display a").toggle(function(e){
    e.preventDefault()

    overlay = $("#overlay");
    image = $('#image');

            // Grab original sizes and positions for
            // calculations and zooming back out...

    o_width = image.width();
    o_height = image.height();
    o_left = image.css('left');
    o_top = image.css('top');

            // Define new width and calculate
            // new height from that...

    var n_width = 1024;
    var n_height = (n_width/o_width*o_height)

            // Grab window dimensions to center image
            // then calculate top and left offset...

    var w_height = $(window).height();
    var w_width = $(window).width();

    var left = (w_width-n_width)/2;
    var top = (w_height-n_height)/2;

    overlay.fadeTo(500,0.8);

    image.animate({
    left: left,
    top: top,
    height: n_height,
    width: n_width
      }, 300);

},function(e){
    e.preventDefault()

    overlay.fadeOut(500);

    image.animate({
    left: o_left,
    top: o_top,
    height: o_height,
    width: o_width
      }, 300);
});

Without being able to test it myself:

For the "#display" DIV you have "float: right;". Try changing it to "float: left;".

or:

You could change it to "position: absolute;" and place it exactly where you want it (using "top" and "left") in its containing DIV "#content".