Código jQuery para ver foto más grande

  Pues en este post explicaré como hacer para que, al pasar el puntero del mouse por encima de una foto pequeña (o thumbnail), esta se vea más grande en otro sitio.

   En el código HTML podríamos tener algo como:

<div class="box_imgpeque">
<img src="images/100_6747.JPG" width="160" height="90" alt=""/>
</div>
<div class="box_imgpeque">
<img src="images/100_6745.JPG" width="160" height="90" alt="">
</div>
<div class="box_imgpeque">
<img src="images/100_6710.JPG" width="160" height="90" alt="">
</div>

<div class="box_imggrande"></div>

   Creo que el HTML está claro. En los divs "box_imgpeque" tendríamos las imágenes en pequeño y, en el div "box_imggrande" irían las imágenes grandes. Por supuesto en el CSS de "box_imggrande" le daríamos una posición en pantalla (con top y left por ejemplo) y tendrá que ser un div oculto ("display:none"), ya que, sólo aparecerá cuando el puntero del mouse esté en la foto pequeña (después, al retirar el mouse, este div volverá a desaparecer).

El CSS podría ser algo como lo que sigue:

.box_imgpeque {
 font-weight:200;
 font-size:1.1em;
 color:#86F3A5;
 width: 195px;
 height: 177px;
 padding: 0px 0px 0px 0px;
 float:left;
}
.box_imggrande {
 display:none;
 width:550px;
 height:290px;
 position:absolute;
 top:750px;
 left:250px;
 z-index:1000;
}

   Bien, ¿como saber a que foto apunta el ratón y, después, mostrarla en grande?. Con el siguiente código en jQuery, usando el registrador de eventos del ratón .hover(), es bastante fácil:

<script type="text/javascript">

   var imagen=$(".box_imgpeque img")
   var imagengrande=$("div.box_imggrande");
   imagen.hover(
      function(){
         ruta=($(this).attr('src'));
         $("div.box_imggrande").append("<img src="+ruta+" width=550 height=290 alt=''/>");
         imagengrande.fadeIn(700);
}, //fin de primera función
      function(){
         $("div.box_imggrande").empty();
         imagengrande.hide()
} //fin de segunda función
); //fin de .hover()

</script>

   Lo comento un poco. El la primera linea guardamos en la variable "imagen" un array con todas las imágenes cuyo div tenga la etiqueta "box_imgpeque". En la segunda guardamos en "imagengrande" la selección del div contenedor "box_imggrande". Después aplicamos ".hover()" a cada una de la imágenes (que están guardadas en la variable "imagen"). El registrador de eventos ".hover()" contiene dos funciones separadas por una coma. La primera función contiene el código a ejecutar cuando el ratón está encima de una imagen y la segunda se ejecuta cuando el puntero sale fuera.
En la primera función guardamos en "ruta" el atributo 'scr' (osea, la ruta y nombre) de la imagen donde apunta el mouse (this). Después localizamos el div "box_imggrande" y le agregamos el texto html con la imagen y el nuevo tamaño. Seguidamente hacemos aparecer, con un efecto suave, el div.
En la segunda función, cuando el puntero del mouse sale fuera dela imagen pequeña, primero localizamos y vaciamos el contenido del div (empty()) y, después, lo ocultamos (hide()).

   Y, creo, esto es todo amigos. Si tenéis alguna duda dejad un comentario.