Mini_Logo klosions HDMini_Logo klosions HDMini_Logo klosions HDMini_Logo klosions HD
  • HOME
  • KIT DIGITAL
  • KIT CONSULTING
  • SERVICIOS IT
    • Mantenimiento informático
    • Suministro de equipos y software
  • CONSULTORÍA & ERP
    • Softwares de Gestión
      • REPASAT
      • A3ERP
      • INNUVA
    • Klosions esync a3erp prestashop
    • Cuadros de mando
  • SERVICIOS DE INTERNET
    • Diseño de páginas web
    • Su tienda online
    • Posicionamiento Web
      • Posicionamiento web
      • Análisis y posicionamiento Web
    • LOPD – Protección de datos
    • Adaptación Web a la LSSI-CE
    • Hosting y Contratación de Dominios
    • Servicio Community Manager
  • BLOG
  • CONTACTO
    • CONTACTO
    • TRABAJA CON NOSOTROS
  • HELP DESK
  • HERRAMIENTAS
  • RSS TOOLS
  • BLOG
  • +34 93 119 29 16
✕
Añadir un Sitemap en Google WebMasters
24/01/2013
Construir un sitio multi-idioma con WordPress
05/02/2013

FancyZoom – Visor de Imágenes

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.
Share
0
Lluis
Lluis

Comments are closed.

NUESTRAS MARCAS

ENTRADAS RECIENTES

  • Charla en Gironella: Facturación Electrónica y Nuevos Cambios Legales
    19/03/2025
  • No se ha podido instalar el servicio a3ERPHost
    21/02/2023
  • A3ERP Configuracion.ini trazar errores mail
    25/01/2023
  • Modificaciones Sistema A3ERP
    25/01/2023

ESET SMART SECURITY STANDARD

ESET NOD32 ANTIVIRUS STANDARD

DISEÑAMOS SU TIENDA ONLINE

DISTRIBUIDOR A3ERP

2025 - KLOSIONS TIC S.L.U - Todos los derechos reservados.
Buy now