Me gustaría cambiar el mundo, pero no encuentro el código fuente

Efecto Zoom con movimiento en las imágenes, el mejor que hayáis podido ver.

Seguramente, muchos de las personas que estén visitando el blog y hayan apretado en una imagen, se estarán preguntando que es lo que estoy utilizando para que tenga este efecto de zoom.

Pues no busqueis un plugin, porque no lo encontrareis.

Hay plugins que dicen hacer lo que hago aquí, pero no se acercan ni remotamente.

En Primer lugar, bajaros este archivo.

En el encontrareis dos carpetas:

images-global

js-global

Estas carpetas, las debeis colocar en vuestro directorio raiz.

Una vez que las tengas colocadas, deberemos hacer las llamadas necesarias desde nuestro Theme.

Para ellos, editaremos el archivo header.php

Justo antes de la etiqueta </head>

Deberemos poner:
[XML]

[/XML]

También deberemos modificar la etiqueta cambiandolo por:

[XML]

[/XML]

Podría ser que nuestra etiqueta , no se llamara exactamente así, si no que fuera algo parecido a esto:

[XML]
<body >
[/XML]

En este caso, deberiamos poner, basandonos en el ejemplo anterior:

[XML]
<body onload=”setupZoom()”>
[/XML]

y ya está, ya que el script que hemos colocado, hace las llamadas automáticamente, así que no hace falta que hagamos ninguna modificación a nuestras imágenes ni añadir nada a nuestras imágenes cuando las insertemos en el blog, todo es automático.

Eso sí, aseguraros que ponéis un título a la imagen si queréis que salga el banner inferior con la explicación, es decir, en la imagen inferior, que pone, Imagen Aumentada tipo Zoom, quizás uno de los mejores efectos con fotos, si mirásemos el código de la foto, veríamos que pone:

[XML]
Imagen Aumentada tipo Zoom
[/XML]

El código de la foto, debe tener title para que salga el banner gris oscuro, si no no sale
El resultado de esto es el siguiente, haz clic en la imagen:

Imagen Aumentada tipo Zoom

José Conti

Pertenezco al equipo de traducción oficial de WordPress España, soy amante de WordPress por su sencillez de uso y potencial. Trabajo con WordPress desde finales de 2004, principios de 2005. Realizo mantenimientos de webs realizadas con WordPress y WooCommerce entre otras muchas cosas.

View more posts from this author
18 thoughts on “Efecto Zoom con movimiento en las imágenes, el mejor que hayáis podido ver.
  1. oscar

    hice y copie el codigo de zoom pero no me sale, si se mustra la imagen pequeña pero cuando le doy clic para expanderlo si lo hace pero ya no puede regresar al tamaño original, tampoco muestra el titulo.

    ayuda por favor.

    el codigo de mi imagen:

    Documento sin título

    <body onload=”setupZoom()”>

     
    Reply
  2. admin

    Podría ser que tuvieras algún conflicto con algún otro javascript o incluso, tuvieras algún problema con el SO.

    Si me das la URL donde tienes la foto lo miro

    Un saludo

     
    Reply
  3. mauro

    Hola loco gracias por el tuto pero no me sale y segui todos tus pasos , subi al directorio raiz , cabe resaltar que estoy usando wordpress,

    Hice todo = , la unica diferencia fue que el body termino asi:

    <body id=”home”onload=”setupZoom()”>

    La web la puedes ver en mi correo , nola pongo x aqui ya que esta en fase de construccion

    gracias de antemano.

     
    Reply
  4. admin

    @Mauro, no lo tienes bien puesto el tema de body, carga la página y mira el código fuente, te está cargando <bodyonload=”setupZoom()”> no
    <body onload=”setupZoom()”>

    Un saludo

     
    Reply
  5. Callevirtual

    Hola Jose, en primer lugar felicitarte por las aportaciones que haces a la comunidad, sigo tus aportaciones desde varios sitios.

    No se por que a mi no me va, av er si me puedes ayudar.

    Tengo Buddypress he metido las carpetas en la raiz del tema, y al ver que no me funcionaba en la raiz del dir de intalacion e incluso del site.

    He realizado los cambios en header.php del tema Facebuddy.

    He comprobado con FIREBUZ que cargan los scripts y la funcion, pero aun asi no me funciona.

    Me parece muy atractivo como para desistir ¿me echas una mano?

     
    Reply
  6. admin

    Hola @Callevirtual

    Gracias por el comentario,

    La verdad es que no sabría decirte cual puede ser el error, ya que lo que está sucediendo es que al entrar en la página, te envía directamente al Blog…

    Pero hay una cosa… al mirar el código fuente de tu página, hay frames por todos lados 8| ¿¿¿Has modificado algo??? o has metido WPMU dentro de frames??? es que lo veo muy raro. o quizás estás usando algún redireccionamiento crop???

    Un saludo

     
    Reply
  7. admin

    A ver, me lo he estado mirando con un poco más de calma…

    Lo de los frames, no acabo de entenderlo.. pero bueno, me ha dado la sensación que lo estás haciendo para que en el navegador te salga directamente la direccion de la página, y no donde has instalado el WPMU ¿Me equivoco?

    El problema, creo yo, es donde has instalado WPMU, me explico, lo has instalado dentro del subdirectorio “blog” y aquí radica el problema, se produce un conflicto.

    Por un lado, tienes el directorio de insalación de WPMU que es Blog, y despues la llamada que hace BuddyPress al Blog del la instalación que es Blog, el resultado es que se crea un conflicto y tre sale la página del Blog de BuddyPress…. no se si me explico.

    Para mirar de resolverlo, puedes hacer dos cosas, una más sencilla y otra más complicada….. mucho más complicada.

    La sencilla, es hacer una pequeña modificación en el arqchivo wp-config.php… no se si funcionará. Mirate esta entrada en el foro de buddypress-es: http://buddypress-es.com/foros/topic/modificar-urls

    Lo que debes probar, es a modificar la url del blog, quizas así te salgas. Si no es así…. deberás o bien reinstalar todo, pero utilizando otro nombre de subdirectorio, o bien, haces una copia de seguridad de la base de datos, modificas todo lo que haga referencia a la url tanto de internet como absoluta a blog, eliminas la base de datos, subes la base de datos modificada y en un principio, todo debería de funcionar….

    Supongo que como verás, lo más sencillo y rápido, si es que funciona, es mirar de cambiar la url mediante el archivo wp-config.php…. si no puedes, yo probaría de modificar la base de datos, ya que lo peor que te puede pasar es que debas reinstalar todo, así que como se suele decir, el No, ya lo tienes.

    No se si te he ayudado, o te he liado más.

    Un saludo

     
    Reply
  8. admin

    Sinceramente, tu pregunta no la entiendo….

    Dreamweaver, es de creación web, código básicamente… pues lo insertas tal y como explico, subes por ftp los archivos, y ya está.

    Un saludo

     
    Reply
  9. admin

    Hola Gustavo,

    Tu problema radica, creo yo, en que no hace una llamada correcta a java.

    el path de java es:
    /js-global/FancyZoom.js
    /js-global/FancyZoomHTML.js

    y tú tienes:
    js-global/FancyZoom.js
    js-global/FancyZoomHTML.js

    te falta la barra del principio ( / )

    Un saludo

     
    Reply

Deja un comentario

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.