Question

I am currently working on a custom lightbox script and need some assistance. I have the animation for the image resizing working great, but I ran into a small problem. The lightbox is shown in the middle of the user’s screen, but as soon as I animate the width and height, it doesn’t remain in the center of the screen, and just uses the old left and top values.

Here’s the markup for the lightbox itself:

<div id="jqgal_container">
    <div id="jqgal_nav_left" class="jqgal_nav">&lt;</div>
    <div id="jqgal_main">
        <div id="jqgal_main_img"></div>
        <div id="jqgal_footer">
            <div id="jqgal_main_caption"><p></p></div>
            <div id="jqgal_thumbnav_left" class="jqgal_thumbnav">&lt;</div>
            <div id="jqgal_thumbs">
                <div id="jqgal_thumbs_container">
                    <ul></ul>
                </div>
            </div>
            <div id="jqgal_thumbnav_right" class="jqgal_thumbnav">&gt;</div>
        </div>
    </div>
    <div id="jqapp_nav_right" class="jqgal_nav">&gt;</div>
</div>

The image to be displayed is stored within the #jqgal_main_img as an <img /> element. I animate the width and height of #jqgal_main_img, but I also want to keep the whole container (#jqgal_container) centered on the screen.

My question is, how can I animate the width of the child element, yet still animate the top and left positions of the container respectively, so it appears to expand and grow from the centre?

The code to animate the width and height of the image container at the moment looks as follows:

_resizeToFit : function(img_width, img_height, compFunc)
{
    // Calculate the width and height needed:
    var req_width  = img_width;
    var req_height = img_height;

    this._elements.mainimg.animate({ width: req_width }, {
        duration: 'fast',

        complete: function() {
            $.jqgal._elements.footer.width(req_width);
            $.jqgal._elements.mainimg.animate({ height: req_height }, 'fast', function() {
               if(compFunc != undefined) { compFunc.call(this); }
            });
        },

        step : function() {


        }
    });
}

Answer 1

Also animate the margin-left and margin-top:

  "margin-left" : ($(window).width() - req_width) / 2 
  "margin-top" : ($(window).height() - req_height) / 2

If the elements CSS position is ‘absolute’, change margin-top / margin-left to top and left.

EDIT:

At the end of the whole ‘animate’ string, add

.parent().animate({
          "margin-left" : )($(window).width() - req_width) / 2) + this._elements.mainimg.parent().scrollLeft(),
  "margin-top" : (($(window).height() - req_height) / 2 ) + this._elements.mainimg.parent().scrollTop()
}}

Or in the callback function:

$(this).parent().animate({...});

For ease, it might be best to set variables holding the elements too…

$this = this._elements.mainimg;
$parent = $this.parent();

Then the parent animate() data would look like this:

         "margin-left" : )($(window).width() - req_width) / 2) + $parent.scrollLeft(),
  "margin-top" : (($(window).height() - req_height) / 2 ) + $parent.scrollTop()
}}

Which is a little easier to read!