Cambio de tamaño de la imagen con Jquery Animate

Question

¿Es posible animar una imagen desde el centro hacia afuera en lugar de hacerlo de izquierda a derecha (y de arriba hacia abajo)? El efecto que trato de lograr es similar al lightbox, cuando haces clic en una imagen y se expande hacia afuera.

Gracias!

Answer 1

@ La solución de Aron está bien, pero tiene ciertas limitaciones: no se puede tener una imagen dentro del flujo de documentos.

Mi solución realmente crea un clon de la imagen completamente posicionado y lo muestra en la parte superior de la imagen original. Calcula la posición absoluta de la imagen original usando .offset().

La desventaja de este método es que si el flujo de documentos cambia (como al cambiar el tamaño de la ventana del cliente), el elemento absolutamente posicionado permanece en la posición anterior. Depende del diseño de su página si puede usar este método o no.

Haga clic en la imagen en mi demostración para alternar el efecto. 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); 
}); 

Answer 2

Esto no debería ser demasiado difícil:

// increase factor 
var factor = 2; 

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

Cómo se logra esto:

• imagen aumenta de tamaño con una cierta proporción. En este caso es * 2, pero me imagino que quieres hacer algo inteligente con un límite superior más o menos.
• El desplazamiento superior e inferior de la imagen se reduce con las dimensiones actuales divididas por el factor de aumento.

Quick demo here.

Answer 3

Si he entendido bien, here is what you want.

Muestro la imagen grande con position: absolute, luego su diseño no se ve afectado por la imagen que está cambiando de tamaño. Si tiene preguntas sobre esta solución, publique comentarios aquí.