Question

Is it possible to have a picture animate from the center outwards rather than from left to right (and top to bottom)? The effect I’m trying to achieve is similar to lightbox, when you click on an image and it expands outwards.

Thanks!

Answer 1

@Aron’s solution is ok, but it comes with certain limitations: you can’t have an image within the document flow.

My solution actually creates an absolutely positioned clone of the image and shows it on top of the original image. It calculates the original image’s absolute position using .offset().

The disadvantage of this method is that if the document flow changes (such as when resizing the client window), the absolutely positioned element stays at the old position. It depends on the layout of your page if you can use this method or not.

Click on the image in my demo to toggle the effect. http://jsfiddle.net/Xhchp/3/

HTML:

<p>Some random text.</p>
<p>More blah. <img id="someImage" src="http://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Deletion_icon.svg/600px-Deletion_icon.svg.png"/> More blah.</p>
<p>Some random text.</p>

CSS:

#someImage { width:32px; height:32px; }

javascript:

function ZoomIn(){
    var p = $(this).offset();
    var w = $(this).width();
    var h = $(this).height();
    var $clone = $(this).clone();
    $clone.css({
        position: "absolute",
        left: p.left + "px",
        top: p.top + "px",
        "z-index": 2
    }).appendTo('body');
    $clone.data("origWidth",w);
    $clone.data("origHeight",h);
    $clone.data("origTop",p.top);
    $clone.data("origLeft",p.left);
    $clone.animate({
        top: "-=" + Math.floor(h * 0.5),
        left: "-=" + Math.floor(w * 0.5),
        width: Math.floor(w * 2),
        height: Math.floor(h * 2)
    },function(){
    });
    $clone.click(ZoomOut);
}

function ZoomOut(){
    var w = $(this).data("origWidth");
    var h = $(this).data("origHeight");
    var t = $(this).data("origTop");
    var l = $(this).data("origLeft");
    $(this).animate({
        top: t,
        left: l,
        width: w,
        height: h
    },function(){
        $(this).remove();
    });
}

$(function(){
    $('img').click(ZoomIn);
});