CODEWITHSUNDEEP
jqueryimagejquery-animate
Peter Scott
Peter Scott

Reputation: 184

Image resizing with Jquery Animate

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!

Upvotes: 5

Views: 18662

Answers (3)

DarthJDG
DarthJDG

Reputation: 16591

@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);
});

Upvotes: 2

Erick Petrucelli
Erick Petrucelli

Reputation: 14872

If I understood right, here is what you want.

I show the large image with position: absolute, then your layout isn't affected by the image being resized. If you have questions about this solution, post comments here.

Upvotes: 2

Aron Rotteveel
Aron Rotteveel

Reputation: 83173

This should not be too hard:

// increase factor
var factor = 2;

$('#foo').click(function() {
    $(this).animate({
        top: '-=' + $(this).height() / factor,
        left: '-=' + $(this).width() / factor,
        width: $(this).width() * factor
    });
});

How this is achieved:

  • Image is increased in size with a certain ratio. In this case it is * 2, but I can imagine you want to do something smart with an upper limit or so.
  • Image top and left offset is decreased with the current dimensions divided by the increase factor.

Quick demo here.

Upvotes: 10

Related Questions