Estoy intentando crear el efecto de ampliación de la imagen cuando pasas el mouse sobre una miniatura de imagen como la que está usando Google Images. Sin embargo, me encuentro con un problema en el que la imagen ampliada sigue empujando a la otra imagen a otra ubicación dependiendo de la posición de la imagen ampliada.

Esto es lo que tengo hasta ahora:

<style>
img{float:left;}
</style>

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
  $("#I1").mouseover(function(){

    $("#I1").animate({height:300,width:300},"fast");
   });
 $("#I1").mouseout(function(){
    $("#I1").animate({height:96,width:128},"fast");
   });
});
</script> 

 <img id="I1" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
<img id="I2" src="http://www.dpstudiolab.com/weblog/wp-content/uploads/2007/11/display-pop-up-2.thumbnail.jpg" >
3
user701510 13 jul. 2011 a las 11:11

4 respuestas

La mejor respuesta

¿Has intentado darle un índice z más alto que el resto y una posición absoluta? Definitivamente, debe darle una posición absoluta: así es como lo elimina de la pila DOM y lo hace flotar allí de forma independiente sin hacer que otros elementos dependan de él.

O bien, puedes jugar con clones como hice aquí:

.. eliminado url vieja ..

Se actualizó con más "imágenes", animación más suave y se eliminaron los errores anteriores a los que solían bloquear una imagen.

http://jsfiddle.net/Swader/jKTVn/7/

8
Swader 13 jul. 2011 a las 12:00

Definitivamente necesita mantenerlo en una posición absoluta para eliminarlo del flujo normal. Desafortunadamente, esto también significa que necesita rastrear la posición. Podría recomendar duplicar un div absolutamente posicionado directamente en la parte superior, darle un índice z más alto y luego animar la expansión de ese div. En el mouseout, guárdelo y luego elimine el elemento.

<style>
.over {
  /* We use this for all of the generated hover-overs */
  position:absolute;
  z-index:2;
}
img {
  float:left;
  position:relative; /* z-index doesn't work unless position is set */
  z-index:1;
}
</style>

<div id="images">
  <img id="img1" src="foo.jpg">
  <img id="img2" src="bar.jpg">
  <img id="img3" src="baz.jpg">
</div>

<script>
  // First catch the mouse enter, grab position, make new element, append it, then animate
  $("img").mouseenter(function() {
    var top = $(this).position().top;
    var left = $(this).position().left;
    var src = $(this).attr("src");
    $('<div class="over" style="top:'+top+' left:'+left+'" src="'+src+'"></div>')
     .appendTo($("#images"))
     .animate({height:300,width:300},"fast");
  });

  // Note the mouseleave on the hovered element instead of the img
  $(".over").mouseleave(function() {
    var self = this;
    $(this).animate({height:96,width:128},"fast",function() {
      self.remove();
    }
  });
</script>
2
Evan 13 jul. 2011 a las 07:32

Los efectos que obtienes en Google Images están en la caja de luz de desplazamiento. Puede probar Suckerfish-Hoverlightbox (consulte demo) para este efecto. Cambiar el tamaño de una imagen dará como resultado un cambio en la posición de otras imágenes.

1
Nathan 8 sep. 2012 a las 19:16

Vea la demostración de trabajo: http://jsfiddle.net/rathoreahsan/Gsh6B/3/

Debe tomar estas imágenes en DIV separados con el estilo div { display:inline } aplicado. Debe establecer la propiedad del índice z para ambos DIV y position:relative y position:absolute como hice en mi demostración. Lo más importante es left:130px en el segundo div img que mantiene el img en la misma posición.

Vea otra demostración funcional de la solución dada por Swader con pequeñas modificaciones:

http://jsfiddle.net/rathoreahsan/jKTVn/5/

1
Ahsan Rathod 13 jul. 2011 a las 11:49