Una de las cosas que hemos de cuidar mucho es el como se visualizan las imágenes en nuestra página web y que el usuario tenga una experiencia agradable al pulsar sobre una miniatura.

Buscando varias opciones, he encontrado una herramienta que cumple este objetivo. Se trata de FancyZoom y que permite visualizar una imagen, maximizándola al clickar sobre ella.

Los pasos para instalar esta herramienta son los siguientes:

  1. Descargar el paquete FanzyZoom clickando aquí
  2. Subir las carpetas a la raiz de nuestro sitio

    (podemos utilizar un cliente FTP como por ejemplo Filezilla)

  3. Añadir las siguientes líneas dentro del código de la cabecera de nuestra página.
    1. Si tenemos WordPress, nos iremos al editor y buscaremos el fichero “header.php” o “cabecera.php” y allí realizaremos la modificación indicada.
    2. Estas líneas las tenemos que añadir dentro de los tags <HEAD>
    3. <script src=”/js-global/FancyZoom.js” type=”text/javascript”></script>
      <script src=”/js-global/FancyZoomHTML.js” type=”text/javascript”></script>
  4. Modificar el Tag BODY.
    1. Lo siguiente será buscar el tag <BODY> y dentro del tag, como un atributo incluir el siguiente código
    2. onload=”setupZoom()”
    3. Nos debería quedar algo así –> <body id=”XXX” […] onload=”setupZoom()”>
  5. Listo!!!
    1. Ya lo tenemos operativo. A partir de ahora cuando clickemos sobre una imagen, nos hará el siguiente efecto.
Web del desarrollador:  Cabel
  • Podemos añadir el tag Title en nuestra href
  • Funciona con imagenes (jpg, gif, png, bmp or tiff)
  • Si dominamos Javascript, la herramienta es flexible, y podríamos añadirles efectos de fadeIn y fadeOut a nuestras imagenes, así como otras funcionalidades.
  • Si queremos que una imagen no se amplíe,tan solo debemos añadir el atributo rel=”nozoom” a nuestro href.