Anything Zoomer

Anything Zoomeres un plugin de jQuery que nos añade la funcionalidad de ampliar un imagen, texto o cualquier otro elemento HTML al pasar el ratón por encima o al hacer hover. El plugin lo he visto en CSS-Tricks.

Para utilizarlo necesitarás cargar la biblioteca jQuery en primer lugar, a continuación, el archivo del plugin y luego la llamada a la función de la zona que se desee hacer el zoom.

<link rel="stylesheet" href="css/anythingzoomer.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script src="js/jquery.anythingzoomer.js"></script> 
<script> 
  $(function(){ 
    $("#zoom").anythingZoomer(); 
  }); 
</script>

Existe una estructura específica de HTML y CSS para que todo este trabajo funcione correctamente, como por ejemplo:

<div id="zoom">
  <div class="small">
    <img src="demo/rushmore_small.jpg" alt="small rushmore" />
  </div>
    <-- the large content can be cloned from the small content -->
   <div class="large">
      <img src="demo/rushmore.jpg" alt="big rushmore" />
   </div>
</div>

Una parte interesante del plugin es que se pueden añadir targets para determinadas zonas. La idea es permitir una buena cantidad de flexibilidad en la personalización de cada parte. Lo podrás ver en los ejemplos en funcionamiento y más documentación.

Descargar