FancyZoom: Aplicando zoom a nuestras imágenes en WordPress
En una de las entradas de Ayuda WordPress, hablando del tema de la galería de imágenes que trae WordPress 2.5, comenté la opción que tengo instalada, en JokinSu, en la que las imágenes que tienen un enlace a la imagen original se pueden ampliar con este script: FancyZoom.
Parece que a más de uno le ha gustado el efecto, así que me he animado a mostrar lo sencillo que es aplicarlo a nuestro blog de WordPress (y a cualquier otro blog o web al que podamos acceder al código).
El efecto es el siguiente (pulsa en la imagen para ampliarla):
Y las Instrucciones de instalación, no pueden ser más sencillas:
1. Descargar el archivo comprimido y abrirlo en tu PC:
2. Dentro contamos con dos carpetas:
1- FancyZoom 1.1
- images-global
- js-global
2- __MACOSX (mi mamá me tiene prohibido acercarme a estos bichos…) 
3. Subimos a nuestro servidor las dos carpetas que tenemos dentro de la carpeta FancyZoom 1.1 (al directorio raiz de nuestro blog)
- images-global
- js-global
4. En el archivo header.php de nuestro theme (wp-content/themes/mi_theme/header.php) tenemos que añadir dos cosas:
1. El script de Fancy Zoom justo antes de el </head> del archivo header.php
<script src=”/js-global/FancyZoom.js” type=”text/javascript”></script>
<script src=”/js-global/FancyZoomHTML.js” type=”text/javascript”></script>
</head>
2. En la etiqueta body que está justo debajo añadir onload=”setupZoom()”
<body onload=”setupZoom()”>
Vamos, que como todo está junto, nos quedaría algo así:
<script src=”/js-global/FancyZoom.js” type=”text/javascript”></script>
<script src=”/js-global/FancyZoomHTML.js” type=”text/javascript”></script>
</head>
<body onload=”setupZoom()”>
5. Listo! Cualquier imagen que se añada en las entradas y que tenga un link a la imagen original de mayor tamaño será aumentada al hacer click sobre ella.
Una foto que tengo en mi album de Picasa:
Fuente: FancyZoom 1.1
Entradas Relacionadas
- Wordpress 2.5 ya está aquí!
- El blog actualizado a Wordpress 2.1 Ella
- Próximo WordPress con Google Gears para escribir offline
- Minitutorial para integrar Google Street View en WordPress
- Robar en un cajero
Si te gustó esta entrada anímate a escribir un comentario o suscribirte al feed y obtener los artículos futuros en tu lector de feeds.
Comentarios
Hay que dejar que la página completa cargue…ya que sino simplemente te enlaza a la imagen.
El servidor donde estoy alojado no es todo lo rápido que esparaba, es una pena…
Tendré que valorar un posible cambio…
Hace menos de un mes vi un efecto similar que era muchisimo mas rapido y cargaba dinamicamente. Aparte, no requeria mucho GPU/CPU como este. Lamentablemente no recuerdo donde lo vi =(,
[...] JokinSu ha publicado un estupendo tutorial del script FancyZoom que te permite aplicar un fantástico efecto de zoom “onpage” en tu blog WordPress. Como el proceso no es el habitual, al no ser un plugin en realidad, es vital disponer de estas instrucciones que JokinSu ha traducido. [...]
soy yo? o tu ejemplo no funciona?