FancyZoom: Aplicando zoom a nuestras imágenes en WordPress

Fancy ZoomEn 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):

Movil japones

Y las Instrucciones de instalación, no pueden ser más sencillas:

1. Descargar el archivo comprimido y abrirlo en tu PC:


FancyZoom 1.1.zip (53 KB)

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

Fancy zoom: aplicando zoom a nuestras imágenes

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:

Miyajima

Fuente: FancyZoom 1.1

Laburpen hitzak: ,

No Responses to “FancyZoom: Aplicando zoom a nuestras imágenes en WordPress”

  1. manu Says:

    soy yo? o tu ejemplo no funciona?

  2. jokinsu Says:

    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…

  3. Stahn Says:

    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 =(,

  4. JokinSu Says:

    Stahn, cuando lo encuentres no te olvides de comentárnoslo.

    Gracias

  5. Efecto Zoom a las imágenes del Blog | Ayuda WordPress Says:

    […] 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. […]

  6. L'Individu Says:

    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)?

  7. JokinSu Says:

    En JokinSu, ahora lo tengo desactivado, pero si vas a la página de FancyZoom puedes verlo en acción.

  8. Juan Carlos Says:

    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.

  9. Jokinsu Says:

    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

  10. Julia Ruiz Says:

    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.

  11. Marina Gorosito Says:

    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

    • jokinsu Says:

      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)

  12. dadá Says:

    A mi tampoco me funciona…

  13. jokinsu Says:

    Pues funciona.

    Haz click sobre la imagen del cervatillo y verás cómo se amplía

  14. Marcelo Says:

    El efecto funciona perfecto, sólo una cosa, no me aparecen los gifs de las sombras ni la x para cerrar la ventana, que puede pasar?

  15. Anibal Says:

    Para que funcione tuve que modificar la ruta del head
    sacándole “/”

    Pero además no encuentra la imagen “close” ni las sombras; evidentemente es un problema de rutas pero no le puedo encontrar la solucion.
    ¿alguien podrá ayudarme?

    saludos y gracias!

    • javier Says:

      Para los botones y sombras es en elarchivo FanyZoom.js la linea 44 o busca “var zoomImagesURI = ‘/images-global/zoom/”
      y cambialo por “var zoomImagesURI = ‘images-global/zoom/” sin las comillas, saludos a todos bye.

  16. miguel_dev Says:

    Gracias Javier, a mi tampoco me aparecía la X de cerrar debido a las rutas. Solucionado

  17. Martin Says:

    Hola, yo tengo la ultima version de wordpress y el ejemplo no me funciona, que me puede estar sucediendo?

Utzi erantzun bat

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Aldatu )

Twitter picture

You are commenting using your Twitter account. Log Out / Aldatu )

Facebook photo

You are commenting using your Facebook account. Log Out / Aldatu )

Google+ photo

You are commenting using your Google+ account. Log Out / Aldatu )

Connecting to %s


%d bloggers like this: