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
- Actualizando JokinSu a Wordpress 2.3.1.
- Minitutorial para integrar Google Street View en WordPress
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. [...]
a mi tampoco me funciona el ejemplo, y dudo que sea cuestión de tiempo al cargar la página. ¿Es posible que ya no funcione en versiones recientes de Wordpress (o de Firefox)?
En JokinSu, ahora lo tengo desactivado, pero si vas a la página de FancyZoom puedes verlo en acción.
Gracias amigo, tu tutorial me a servido para poder aplicar zoom a mis imágenes.
Venía hace algunos días intentadolo desde el sitio: http://www.cabel.name/2008/02/fancyzoom-10.html (en ingles), pero no podía lograrlo.
Una consulta más haber si me puedes dar una mano, la imágen ampliada siempre me queda al medio de la página que es formato blog. Así es que si que estas situado en la parte superior o en la inferior, no la puedes ver hasta que mo te diriges al centro del página.
Sabrías como hacer para que la imágen ampliada, la abra siempre al medio del monitor?
Saludos cordiales, Juan Carlos.
Me alegro que te haya servido Juan Carlos.
Sobre tu pregunta, no acabo de entenderla del todo. La imagen, esté donde esté, al clickar sobre ella se are siempre en el centro de la pantalla.
Ya me dirás
soy yo? o tu ejemplo no funciona?