Efecto de zoom en las imágenes con jQuery

8 de octubre de 2010 86 comentarios ,

Hace poco vimos cómo aumentar las imágenes usando Zoom It, ahí les mencionaba que estos efectos de zoom se pueden conseguir con distintas librerías de scripts, uno de ellos es jQuery, y hoy veremos uno en particular que es una creación de Ben Nadel y que hace eso, seleccionar un área de la imagen para aumentarla.

Puedes ver el demo en este blog de pruebas. Al hacer click sobre el recuadro se hará un zoom, para quitar el zoom sólo basta dar click fuera de la imagen.

Implementarlo sólo requiere cuatro pasos: primero descarga este archivo, descomprímelo y sube el archivo zoom-clip.js a un servidor.

Luego entra en Diseño | Edición de HTML y pega antes de </head> lo siguiente:
<script language='javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js' type='text/javascript'/>
<script language='javascript' src='URL del archivo .js' type='text/javascript'/>
Cambia lo que está en color rojo por la URL del archivo que previamente subiste al hosting.

Ahora antes de ]]></b:skin> pega esto:
#view {
border: 1px solid #333333; /* Borde de la imagen */
overflow: hidden;
position: relative;
width: 400px; /* Tamaño de la imagen */
}

#image {
display: block;
left: 0;
top: 0;
}

#zoom {
background-image: url(http://4.bp.blogspot.com/_dsEG33PDaHw/TK4Oj4JLR6I/AAAAAAAAAZc/dcjleXweXTY/s1600/fade.PNG);
border: 1px solid #000000;
cursor: pointer;
display: none;
height: 200px;
position: absolute;
width: 200px;
z-index: 100;
}

Por último usa este código cuando quieras ponerle el zoom a tus imágenes:
<div id="view">
<img id="image" src="URL de la imagen" width="400" />
</div>
Cambia la URL de la imagen donde se indica y listo.
Verás que tanto en los estilos como en el último código hay un ancho de 400px, este es el ancho que tendrá la imagen, si deseas cambiar el tamaño tendrás que cambiar ambos valores que están marcados en negrita.


86 comentarios en:

" Efecto de zoom en las imágenes con jQuery "

  1. Hola Amigo Potro!..

    En mi Blog vino incluido un Gadget el cual se llama Web Amigas, Este quiero personalizarlo osea colocarle la flecha 'http://lh6.ggpht.com/_gYHHsgwfxNo/TJyxheF4btI/AAAAAAAACDo/V4UztSpyFCU/right.png' que tiene el widget 'Contenido' y que las Webs Amigas se abran en otra ventana, Me podrias ayudar?..

    ResponderEliminar
  2. la raja wn ta terrile weno, pero un problema, una vez que se pone el zoom se puede alejar la imagen?

    Saludos wn D:

    ResponderEliminar
  3. , en esta entrada se explica cómo poner iconos a los gadgets.

    MCarlitooH2, claro, sólo da click fuera de la imagen y se sale del zoom.

    ResponderEliminar
  4. se ve increible potro, una mas de tu genialidades eres todo genio en blogger

    ResponderEliminar
  5. Potroo, no me quiero meter en tu diseño, porque este trabajo que haces es bueno y exitoso... Pero por ahi seria aun mas comodo si en el menu de esta web agregas la seccion Inicio...
    Es solo una sugerencia, tal vez que no lo haces por otro motivo, solo digo...
    Saludos

    ResponderEliminar
  6. Listoo Potrooo!! Coloquee el Iconooo, Peroooo pues obvio falta lo otroo, no abren en otra ventana... :!

    ResponderEliminar
  7. Muy bueno truco!! Pero, no hay alguna manera de volver atrás? porque una vez que hacés el zoom no se puede volver.

    ResponderEliminar
  8. lerh, en realidad no es mía la genialidad sino de Ben Nadel :)

    Coloush +16, quizá más adelante cuando agregue más pestañas, por mientras puedes hacer click en el logotipo y te dirige al inicio.

    KatoGd, busca donde tengan el href y después de su enlace agrega el target='_blank'

    Julián Cardoso, sí, haciendo click fuera de la imagen ;)

    ResponderEliminar
  9. Potro parece q en mi blog no esta activado las entradas antiguas- home - entradas recientes, sabras como puedo activarlas o hacer q se vean en una busqueda del blog, gracias

    ResponderEliminar
  10. Bueno pOTRo por ahi : http://www.pazosblogger.com/2009/12/mostrar-los-link-de-entradas-recientes.html encontre y ya lo solucioné! en esta pag te agradecen a tu blog seguro ya habias solucionado esto! iguamente gracias!

    ResponderEliminar
  11. Ya te había respondido en la otra entrada donde preguntaste ;)

    ResponderEliminar
  12. Este comentario ha sido eliminado por el autor.

    ResponderEliminar
  13. AAAAAAAAAAAAAAHHHH!!
    Potro, ¿me recuerdas? La que te dijo el problema de las columnas... Pues ahora, tras poner nieve en mi blog... Las dos columnas se me han quitado de los dos laterales, ya no aparecen ahí, si no que salen abajo del todo... ¿Cómo es eso? Si quieres te dejo el permiso para irte por mi blog y hacer cambios, todo menos borrarme el blog, cambiarme datos de plantilla... ¡Pero es que estoy harta ya, desesperadaa!

    ResponderEliminar
  14. Hola Potro, he llegado a tu blog buscando ayuda y veo que manejas muy bien el tema. Mi duda no tiene que ver con este post y perdona que te la formule aquí.

    Mi consulta es: ¿puedo crear un blog cuya plantilla luego utilice para una página web? Mi idea es tener una página inicial donde sólo aparezca una imagen de fondo, quizá un mensaje, y una hilera de botones en la parte inferior con el menú.

    Sólo dime si es posible, por favor, y seguimos hablando.

    Muchas gracias por adelantado.

    Milenia

    ResponderEliminar
  15. Hola Potro, me surgio otra duda, espero que puedas responder:
    Mira en mi blog: www.porvelez.com.ar
    en los posts sale el Titulo, abajo una imagen de calendario, pero no sale la fecha...
    Sabes cual es el error de esto?, para que al lado del icono de calendario salga la fecha...
    Saludos!

    ResponderEliminar
  16. Ana, me parece extraño que el script de la nieve haya hecho eso pues no toca las medidas de la plantilla, pero para asegurarnos deshaz el cambio que hayas hecho con la nieve para ver si así se suben las columnas, sino, puedes reinstalar la plantilla para no tener que eliminar todo.

    Milenia, tendrías que limpiar toda la plantilla pues los códigos que maneja Blogger no son compatibles para un sitio Web común, pero sí, ya poniendo en blanco la plantilla puedes partir de ahí, mira las entradas 1, 2, y 3 de Vagabundia que habla sobre ello.

    Coloush +16, posiblemente no tienes incluido el código de la fecha.

    ResponderEliminar
  17. No se a que te refieres potro, Ya que este widget vino con la Plantilla original y no encuentro como modificarlo /:

    ResponderEliminar
  18. Hola Potro!! Uff... qué lluvioso el día en Huelva...

    El blog va muy raro. Cuando encontré tu blog puse unos cuantos scripts, me acuerdo que puse el de "dividir la cabecera". No me sirvió mucho, no me gustaba cómo quedaba en ese blog (en los demás ha quedado fenomenal).
    Le he quitado la nieve, como me dijiste, pero tampoco. Ve a mi blog. La columna aparece con el fondo negro, como lo tenía antes... ¡pero sale abajo del todo! Es como si se hubiera movido tal cual, pero abajo de las entradas.
    Pásate por mi blog (http://elrincondeanahuelva.blogspot.com) y a ver si encuentras solución...

    Y gracias por ayudarme ;)
    Ana

    ResponderEliminar
  19. Ola potro, espero me puedas ayudar, porque siempre que publico una nueva entrada estan cerrados los comentarios? Te agradeceria mucho si me ayudas porque no se donde esta el problema, pienso que es el codigo HTML pero tal vez tu sabes mas. Gracias D:

    ResponderEliminar
  20. potro podrias hacer un post de como colocar un icono a lado de la url enves del icono que aparce de blogger

    ResponderEliminar
  21. KatoGd, a esto me refiero, es para abrir los enlaces en otra pestaña.

    Ana, no sé si hayas hecho alguna modificación con el ancho del blog, quizá por ahí podría estar el problema, pero mi sugerencia es la misma, reinstalar la plantilla para corregir cualquier problema que haya surgido :\

    ulyzz, ve a Configuración > Comentarios y en la primera opción de dice 'Comentarios' marca la casilla 'Mostrar'.

    Milenia, por nada :)

    ResponderEliminar
  22. Joseph Leon, ya te respondido en la otra entrada, no es necesario duplicar comentarios. Saludos.

    ResponderEliminar
  23. Mi amigo potro otra ves yo, espero me recuerdes (lo mas probable que no).

    bueno solo te e publicado una ves (con esta 2) la otra ocasión para ver sobre indexar mi blog a un .com y en realidad no pude.

    Me gustaria que me ayudaras y yo te ayudaria con lo que me pidas "paypal" espero puedas.

    Mi correo:

    lindix_111@hotmail.com

    gracias

    ResponderEliminar
  24. hola potro. tengo una duda pero es de un scrip que pusiste hace unos meses, no me funciona tu link de correo. ¿cómo te puedo escribir? gracias.

    ResponderEliminar
  25. Uy este efecto está super bueno, innovador,,,Gracias Potro ¿No hay forma de mover la imagen hacia los lados y hacia arriba con un Scroll cuando la imagen está en acercamiento (zoom)?

    ResponderEliminar
  26. lindix111, en esta entrada, te pregunté sobre el modo que hiciste la configuración pero ya no me respondiste.

    leda, por el momento las consultas por correo están suspendidas, sólo deja tu pregunta en la entrada donde está el script y con gusto veo cómo ayudarte.

    ANIMEGRIS, lamentablemente no, pero sería buenísimo que se pudiera hacer :\

    ResponderEliminar
  27. Perdon por hacerte esta pregunta en esta entrada quiero saber si puedes responderme esto: como poner un boton de Entrar el cual te redireccione a la pagina principal como en la web de algun cantante por ejemplo. Desde ya gracias.

    ResponderEliminar
  28. Mira esta entrada de Oloblogger que tiene un tutorial sobre ello:
    http://oloblogger.blogspot.com/2010/02/otra-pantalla-de-presentacion-facil.html

    ResponderEliminar
  29. Gracias por responder. Me vendria muy bien si tu publicas como hacerlo porque en el blog que me pasaste no entendi ninguna de las formas que explica como hacerlo. Desde ya gracias.

    ResponderEliminar
  30. Buenas, me encanta tu blog, si quieres me hago seguidor, pero porfavor hazte tu primero segudor de mi blog, avisame por comentario.
    http://www.centropokemon2010.blogspot.com/ ¡¡Espero que te guste!

    ResponderEliminar
  31. Parece hasta loco pensar que en Blogger se pueden hacer todas estas cosas. Recuerdo mi primer blog (el que acabo de relanzar) estuve como una semana buscando una plantilla que tenga 3 columnas porque estaba encaprichado, y no la podía hallar en toda la web :P jajajaja... y ahora me sales con estos trucos fabulosos!!!

    Esta muy buena la forma en que se puede agrandar sólo la parte que deseas ver... y esa transición que tiene... queda muy profesional.

    Un abrazo!!!

    ResponderEliminar
  32. Sin duda es un efecto muy vistoso, quizá sólo habría que agregarle algunos controles de zoom in y zoom out, pero bueno "lo que ves es lo que hay" jajajajajaja.

    Un abrazo!

    ResponderEliminar
  33. Jajajajajajaja... mira si le reprochas algo a "tu amigo" y te dice "es lo que hay" te ríes o te tomas un avión y le das una golpiza? XD jajaja

    ResponderEliminar
  34. Jajajaja, no estaría mal, pero prefiero tomar un avión en irme a... Sí bro, Cancún, no lo puedo evitar, jajaja.

    ResponderEliminar
  35. Hola Potro que tal !

    No entiendo este paso:

    Ahora antes de ]]> pega esto:

    ¿Donde veo eso? en el header ? O en donde ? Muchas gracias y un saludo !

    ResponderEliminar
  36. Ahí mismo dentro de Diseño | Edición de HTML.

    ResponderEliminar
  37. No entiendo, no me sale nada de eso :s, tengo el blog, en la plataforma de wordpress, por si sirve de ayuda, y en el .txt header no me sale nada :S enfin :S

    ResponderEliminar
  38. Todos los tutoriales que se mencionan aquí son para Blogger.
    Saludos.

    ResponderEliminar
  39. hola pronto cuando dices: "sube el archivo zoom-clip.js a un servidor." a que te refieres como que "servidor" no entiendo .. gracias

    ResponderEliminar
  40. hola Potro, te vengo a molestar otra vez xD... acabo de poner el script en mi otro blog http://blog.safer321.com anda de maravilla :D pero dime puedo establecer una altura ya q solo da la anchura... lo intente y no pasa nada xD...
    ah y otra pregunta q no tiene nada q ver con este tema ayer configure las DNS de mi dominio para blogger todo anda de maravilla pero no puedo ingresar cuando pongo el "www." solo entra tal cual te escribi arriba y de igual manera en mi archivo principal http://www.safer321.com asi no puedo ingresar solo de esta manera http://safer321.com tendra solucion? gracias de antemano :D...

    ResponderEliminar
  41. Hola Safer321, se supone que con el ancho se debe ajustar automáticamente el alto, pero si no lo hace entonces prueba agregando height: 200px;

    Respecto al dominio ahí en la configuración de esa área desde Blogger verás que donde has escrito la URL de tu dominio personalizado hay una casilla que habla acerca de eso. Marca la casilla y guarda los cambios.

    ResponderEliminar
  42. la casilla dice redireccionar http://safer321.com a http://blog.safer321.com en si el problema q hay es q solo pueden ver mi web si escriben asi http://safer321.com pero si quieres entrar de este modo http://www.safer321.com no ingresa sale esto "Not Found : The requested URL / was not found on this server." eso es quizas hice algo mal? o tengo q esperar q se actualize los dns? ya paso mas de 24 horas...


    gracias.

    ResponderEliminar
  43. hola El Potro, te comento q me pase toda la madrugada tratando de solucionarlo xD... tengo sueño xD.... bueno me toco cambiar http://blog.safer321.com por htt://www.safer321.com ai si me aparecio redireccionar safer321.com a www.safer321.com xD pero igual no se redireccionaba xD bueno me toco entrar a mi cpanel y redireccionar safer321.com a www.safer321.com xD q locura solo por un www. xD... bueno en fin lo solucione (algo loco) ahora el problema es q yo deseaba una intro xD q se vea primero eso luego el blog... se podra? vi entradas buscando en la red pero no me acuerdo xD...
    gracias.

    ResponderEliminar
  44. Lo que sucede es que WWW es un subdominio, y al tener 'blog' antes del nombre de tu dominio entonces estás remplazando el subdominio WWW por el subdominio 'blog' y no puedes tener dos subdominios al mismo tiempo.

    Saludos.

    ResponderEliminar
  45. protro aque servidor tengo que subir el archivo porfa respondeme :D

    ResponderEliminar
  46. A cualquiera que acepte archivos .js como por ejemplo Google Sites o Dropbox.

    ResponderEliminar
  47. Párese que lamentable mente estos trucos son solo para Blogger yo lo quería para mi Website que lamentable :`(

    ResponderEliminar
  48. Tanto como lamentable no ya que los que usamos Blogger tenemos las limitaciones que un sitio Web no tiene.
    Pero de cualquier manera muchos de estos trucos también son aplicables para los sitios Web.

    ResponderEliminar
  49. pues amigo me podrias ayudar a aplacarlo en mi web agregame a msn christian_lokillo.xd@hotmail.com ok

    ResponderEliminar
  50. Lo siento pero todas las preguntas se hacen a través de los comentarios. Quizá lo que te está faltando es agregar los estilos correctamente.

    ResponderEliminar
  51. Buenas Potro, no sé cuál será el problema pero aplico el efecto y funciona bien salvo que el recuadro para hacer zoom en la imagen sólo me deja moverlo por la zona de arriba de la misma, qué raro. Seguiré probando a ver si doy con la solución jeje

    ResponderEliminar
  52. Lo puse en fringefilia Potro, pero en vista de que no iba como quería lo quité, puse todo tal cual explicas en la guía pero sin la librería jquery que ya la tengo, además la misma versión. Vuelvo a ponerlo todo por si quieres echar un vistazo a mi plantilla :D

    ResponderEliminar
  53. Pues nada, entré de nuevo y no lo vi, quién sabe en qué parte lo habrás puesto. Pero bueno, para que no te compliques igual puedes usar Zoom It sin necesidad de añadir scripts.

    ResponderEliminar
  54. Perdona Potro es que lo puse de nuevo pero como seguía sin funcionarme bien no lo publiqué ni en un post ni en la sidebar, pero mantengo el código del efecto zoom en la plantilla. Ahora sí que puedes ver un ejemplo en esta entrada:

    http://fringefilia.blogspot.com/2011/01/audiencias-para-el-ultimo-capitulo-310.html

    Es la primera imagen. Ah! y como siempre muchas gracias por todo máquina.

    ResponderEliminar
  55. Pues podría ser un problema con la plantilla aunque no identifico cuál podría ser, también he visto que has aplicado el hack de jQuery pero no en todas partes, quizá por ahí podría estar también el problema.
    Recuerda que jQuery tampoco es compatible con Mootools.

    Saludos!

    ResponderEliminar
  56. ¿He aplicado el hack jQuery.noConflict? no tenía ni idea Potro jeje, ahora mismo voy a echar un vistazo a la plantilla. Por otra parte, no recuerdo haber usado la librería mootools, sólo jquery que yo sepa, aún así probaré quitando ese hack y aplicando de nuevo este efecto de zoom, a ver si ahí radica el problema.

    Saludos y gracias otra vez fenómeno

    ResponderEliminar
  57. Jaja, pues al menos un script tenía parcialmente aplicado ese hack, quizá así estaba el código original. Sino sigo pensando que quizá la opción que te mencionaba en el comentario #55 puede servirte mejor :)

    ResponderEliminar
  58. Hola potro he puesto el zoom pero me queda arriba y no se desplaza por toda la imagen (de arriba abajo sólo en horizontal)...que tendría que cambiar? gracias

    ResponderEliminar
  59. http://anaurrutia-interiores.blogspot.com/2011/09/blog-post.html

    ResponderEliminar
  60. potro la dirección donde pone Ana es donde he puesto el zoom

    ResponderEliminar
  61. lo del zoom.it está muy bien, pero no me gusta que aparezca el logo de zoom it...se podría quitar?

    ResponderEliminar
  62. Hola Ana U.,

    Aunque no vi puesto el zoom, sí es un hecho que en algunas plantillas no funciona bien y sucede eso que comentas. Desconozco porqué sea, pero si puedes hacerlo mejor con Zoom It entonces tendrás la ventaja de que funcionará sin problemas, y que no estarás llenando la plantilla con scripts.

    Saludos.

    ResponderEliminar
  63. ....mi gozo en un poco, Potro no vá bien, la imagen se pone arriba.

    ResponderEliminar
  64. Ni hablar, parece que se resiste este truco en tu plantilla. Entré de nuevo pero ya no vi ninguno de estos códigos, supongo que desististe.

    ResponderEliminar
  65. Al final he tenido que optar por éste script, me gusta mas el tuyo, pero no puedo con mi plantilla:

    <img src="URL-de-tu-imagen" class="magnify" style="width:200px; height:150px" />

    ResponderEliminar
  66. Potro he movido algo en la plantilla por la zona del /skin y ahora no me salen todas las entrada en la página principal, puedes ayudarme? gracias

    ResponderEliminar
  67. Potro, dándole vueltas era algo de la fechas, parece ser que la plantilla no coge fecha anteriores…o algo así, el caso es que le he puesto actualización automática y si entra…

    ResponderEliminar
  68. a ver que te parece

    http://plugins.jquery.com/project/ajax-zoom-360-spin-rotate

    ResponderEliminar
  69. Se ve interesante... y bastante complejo sin contar con lo poco funcional para la mayoría ya que requiere ocho diferentes scripts, varios estilos y cada foto debe tener un ángulo diferente.

    ResponderEliminar
  70. Potro, me salen solo 5 entradas en la pagina principal, como puedo arreglarlo para que me salgan las 6...? creo que es un problema de la actualización por fechas pero no tengo ni idea de donde debo de mirar en la plantilla...gracias

    ResponderEliminar
  71. Hola Ana, ya te he respondido eso en otra entrada. Saludos.

    ResponderEliminar
  72. Potro, ¿Como le puedo hacer que con el cursor, cuando se haga zoom en la imagen, se pueda mover por dentro?

    Es decir, que cuando le de click, se ponga el zoom, como lograr que se pueda desplazar en la imagen con el cursor sin tener que darle click fuera de la imagen, por que es un poco incómodo tenerlo qué hacer.

    ¿Se puede? Y si se puede ¿Cómo se hace?

    ResponderEliminar
  73. Hola Abraham, hasta donde sé el script no lo permite, igual estuve indagando en la página del autor antes de hacer la publicación pero no encontré nada de información al respecto :/

    ResponderEliminar
  74. hice todo lo que dice al pie de la letra....y al final me muestra la foto pero sin ningun efecto de zoom, sera que es pq uso una mac? me ayudas? me voy a volver chino con esto y no sale el bendito zoom

    ResponderEliminar
    Respuestas
    1. No, no tiene que ver con tu equipo, ¿en cuál blog o entrada lo has puesto?

      Eliminar
  75. Tengo un problema amigo, no me deja pasar el recuadro del zoom a mitad de imagen la mitad de arriba puedo hacerle zoom la otra mitad no se puede

    ResponderEliminar
    Respuestas
    1. Hola, ¿me puedes mostrar una entrada donde tengas ese problema?

      Eliminar
  76. Buenas Potro!!! Otra vez molestandote por mi web (www.lossabaleros.com.ar).
    Trato de aplicar esto pero no puedo descargar el archivo mencionado. Tira error 509. Como puedo bajarlo? Por otro lado, cuando explicas que se tiene que subir a un servidor, cual recomiendas?

    Saludos y gracias por todo!

    ResponderEliminar
    Respuestas
    1. Hola, ya he subido el archivo a un nuevo alojamiento. Saludos.

      Eliminar
    2. Gracias Potro, que servidor recomiendas en la actualidad para subir el archivo adjunto?
      Abrazo enorme!

      Eliminar
    3. Hay muchas opciones, Google Sites por ejemplo.

      Eliminar
  77. Hola potro, dices que para crear el zoom en la imagen hay que utilizar el código último.
    Pero dónde lo pego???? En la plantilla? En la entrada donde dice editar HTML??? o Dónde? Muchísimas gracias.




    ResponderEliminar

Si tu blog contiene material protegido por derechos de autor habilita tu perfil y deja únicamente el nombre de tu blog, no dejes la dirección del mismo, de lo contrario el comentario será eliminado.

 
Ir Arriba Ir Abajo
I Ciudad Blogger