FancyZoom: Aplicando zoom a nuestras imágenes en WordPress
Escrito el : 12-05-2008 | Por : jokinsu | Categoría : Internet, Jokinsu
Etiquetas: imagen, Wordpress
15
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
soy yo? o tu ejemplo no funciona?
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 =(,
Stahn, cuando lo encuentres no te olvides de comentárnoslo.
Gracias
[...] 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
Pues no puedo… mira que llevo mas de una hora con un ejemplo sencillo y no funciona..
La verdad es que en la pagina original los ejemplos si van..
Y necesito como el comer que esto mefuncione… ¿me echais una mano.. seguro que alguno es capaz de sacar el error.
Aqui os pongo mi página de prueba que he hecho y que no funciona:
Documento sin título
tengo las dos imagenes en la raiz de la carpeta, junto con el archivo html y las dos carpetas descargadas de js e imagenes-global…
Muchas Gracias.
Comprueba que has colocado las líneas de código que te indico en el lugar indicado.
Con las líneas y la carpeta en la raiz de tu web debe funcionar
oa me encanto el efecto pero no se donde tengo q guardar mis imagenes ni el tamaño q deben tener. me podrias ayudar?
desde ya muchas gracias
Cariños
Dios los Bendiga
El tamaño y el lugar donde alojas tus imágenes es indiferente. Si lo tienes correctamente configurado tiene que funcionar.
Hay también un plugin para Wordpress: WP FancyZoom Wordpress Plugin
(granades.com/wp-fancyzoom-wordpress-plugin)
A mi tampoco me funciona…
Pues funciona.
Haz click sobre la imagen del cervatillo y verás cómo se amplía