Añadir un Sitemap en Google WebMasters
24/01/2013Construir un sitio multi-idioma con WordPress
05/02/2013Una 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:
-
Descargar el paquete FanzyZoom clickando aquí
-
Subir las carpetas a la raiz de nuestro sitio
(podemos utilizar un cliente FTP como por ejemplo Filezilla)
-
Añadir las siguientes líneas dentro del código de la cabecera de nuestra página.
- Si tenemos WordPress, nos iremos al editor y buscaremos el fichero «header.php» o «cabecera.php» y allí realizaremos la modificación indicada.
- Estas líneas las tenemos que añadir dentro de los tags <HEAD>
- <script src=»/js-global/FancyZoom.js» type=»text/javascript»></script>
<script src=»/js-global/FancyZoomHTML.js» type=»text/javascript»></script>
-
Modificar el Tag BODY.
- Lo siguiente será buscar el tag <BODY> y dentro del tag, como un atributo incluir el siguiente código
- onload=»setupZoom()»
- Nos debería quedar algo así –> <body id=»XXX» […] onload=»setupZoom()»>
-
Listo!!!
- 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.
