Nov 29
Zoomi, Javascript para efecto de zoom en imagenes.
Zoomi es un ligero Javascript que posee la capacidad de permitirnos añadir a nuestras imágenes un efecto zoom muy bonito. Fácil de usar. Para utilizarla deberemos descargar por supuesto zoomi.js pero también necesitaremos de jQuery. Ver Demo.
Descargamos los script: zoomi.js y jQuery.js (estas son descargas desde Xyberneticos.com) e incluir el siguiente código en medio de nuestro < head>
<script type="text/javascript" src="zoomi.js"></script>
<script type="text/javascript" src="jQuery.js"></script>
Ahora a cualquier < img > deberemos darle la class = “zoomi” para que automáticamente se convierta en una imagen con efecto zoomi.
Zoomi utiliza el atributo alt=”url” para proporcionar la dirección de la segunda imagen que nos permitirá realizar el zoom. Lo que significa que la primer imagen será nuestra miniatura y la segunda una imagen en tamaño mayor.
He aquÃÂ un ejemplo:
CSS:
-
<img class=“zoomi” src=“bamboo1.jpg” alt=“bamboo.jpg”>
Aunque Zoomi también nos permite realizar el efecto utilizando una única imagen. Esto permite ahorrar ancho de banda, y hace fácil la creación de miniaturas.
He aquÃÂ un ejemplo:
CSS:
-
<img class=“zoomi” src=“image.jpg” width=“180″>
Web Oficial Zoomi
Gracias a Xyberneticos por esto.
Comments: 23
Con respecto a este asunto de Zoomi todo el mundo que ha escrito sobre el tema se ha dedicado a Copiar/Pegar el artÃculo de Xyberneticos pero nadie se ha molestado en añadir alguna explicación más. Yo con esos datos no hago nada de nada.
pues es que la verdad es un script muy sencillo pero ¿que es lo necesitas saber? ¿Cual es tu duda? si me dices puedo ampliar el tema un poco mas con mucho gusto.
te dejo esto puede ser que te ayude
ejemplo sencillo
Bueno, es evidente que mis conocimientos son muy pocos. Gracias a esta ampliación he conseguido hacer funcionar “algo” es javascript. Acabo de meterme a fondo con HTML y CSS y las ganas de aprender me han llevado a comerme el coco con cosas que aún me vienen grandes.
Digamos que el recien llegado al asunto tarda en darse cuenta que al lado del html debe “guardar como” los scripts con extensión .js. Yo lo que hacÃa era copiar/pegar el código del scriptt en el HTML y claro, nada de nada.
He conseguido el efecto tal y como lo pones en el ejemplo pero no sé cómo conseguir el efecto de la chica de la página oficial, donde haces clic y la imagen viene poco a poco.
Muchas gracias por tu interés.
No hay problema todos pasamos por lo mismo; no logras e efecto de la chica de la página oficial por q hacia falta agregar un script mas al head aquà esta otro ejemplo espero te sea de ayuda
ejemplo ya html solo es ejemplo no se fijen mucho en el diseño xD
De este viaje casi me vuelvo loco del todo pero al final funcionó. Ahora lo que me pasó fue lo contrario porque este tercer script queda dentro del HTML y yo comencé por copiarlo y “guardarlo como” junto a los otros .js (en un intento desesperedado lo llamaba function.js. he hecho un par de pruebas y me ha funcionado correctamente.
Muchas gracias.
Una cuestión más a ver si me puedes echar una mano más.
me gustarÃa que el recuadro de la imagen no salga azul (de echo quiero que no salga nada de nada) pero esto no me ha funcionado
a { border-style: none;}
y tampoco
a { bordeline: none;}
¿¿Alguna sugerencia?? Gracias de antemano
Después de trastear e investigar di con la solución
a img { border-style: none; }
Mucha suerte. Si acabo lo que estoy haciendo paso por aquà y dejo un enlace.
Ok!! espero tu enlace xD
suerte
Buenas. Aquà estoy de nuevo para abusar de tu confianza. Respecto a Zoomi todo sale correctamente según tus consejos y textos pero me surge un problema. Hago el efecto que quiero sin problema pero sólo me lo deja aplicar a una y sólo una imagen. Por ejemplo se me ocurrió copiar/pegar una imagen y después cambiarte en el código src y alt; src lo interpreta bien pero no parece enterarse de la orden alt. Esta segunda imagen tiene asociado su href=”#” id=”zoomme” pero no hay manera.
A ver si pudieras orientarme. Si salgo de esta pienso publicar un tuto con todo lujo de detalles sobre el asunto que se titule “Como hacer funcionar Zoomi y sobrevivir para verlo”
Suerte y gracias.
Voy a revisar, a ver si puedo ayudarte, pero seria mas fácil si pusieras un enlace para ver el código asà entenderÃa mas fácil cual es el problema.
Muy agradecido.
Estoy trabajando en una galerÃa de imágenes de trabajos propios. Un portafolio, más o menos.
Aún no tengo subida la página pero puedo dejarte
esta
imagen del código. Incluye una explicación abajo.
Lo del tuto va en serio. Por supuesto, en los créditos aparecerÃamos los dos (yo como simple escribano)
PD He insertado la dirección de la imagen con enlace pero no estoy seguro de que aparezca.
Pues esta es una solución a tu problema; y no te preocupes yo creo en la filosofia del Software Libre y el Open Source, si no se colabora unos con otros nunca vamos avanzar; Suerte en tu proyecto ejemplo espero te sea de ayuda
ejemplo ya html solo es ejemplo no se fijen mucho en el diseño xD
— Mozilla es mejor q Explorer —
Funcionó!!
Gracias de nuevo y espero poder poner el link dentro de poco. Será una cosa sencilla (ya sabes que estoy comenzando con HTML, CSS y estos js)
También te notificaré la publicación del tuto.
Mucha suerte.
PD: imagino que lo sabrás pero todos estos dÃas de atrás tu página estaba inaccesible. En lugar de abrirla te salÃa un archivo para descargar.
La primera parte de mi compromiso ya está. Aquà te dejo el comienzo de los que pretende ser mi portafolio Es un trabajo muy sencillo pero se ciñe a lo que me habÃa propuesto. Ya sé que hay cosas que deberáin estar en CSS y no con tablas, pero eso lo dejo para más adelante.
Respecto al tuto no prodrá ser hasta dentro de un par de semanas porque marcho de vacaciones de Semana Santa (ventajas de dedicarse a la educación) y estaré ese tiempo sin publicar en mi blog.
Mucha suerte.
[...] de cabez debido a los JavaScript que deben usarse. Gracias a la inestimable ayuda de Ruy de Tutula puede ir solucionando todos los problemas. Dentro de un par de semanas publicaré un tutorial sobre [...]
Aunque
un poco tarde aquÃ
te dejo el enlace hacia el tutorial sobre el efecto Zoomi (paso a paso)Un
saludo y mucha suerte
xloYRT hi nice site thx http://peace.com
oye una pregunta, este script puede funcionar para una imagen que esta dentro de una tabla. Contestame porfavor. Te lo agradezco mucho
Porfavor ayudenme es que soy principiante
claro que si te puede funcionar para una imagen dentro de un tabla; tu aplicas el script directamente en la parte del codigo que inserta la imagen y lo tienes que agregar en cada imagen que insertas en una pag web.
Hola buenas, estoy intentando hacer funcionar el zoomi, en el apartado de stock de esta web: http://www.escarautomoviles.com y no logro hacerlo funcionar, me he hecho un ejemplo sencillo y funciona, pero a la hora de ponerlo en el real no funciona, si alguien me puede ayudar, lo agradecerÃa bastante.
Pueden ver el código de la web, y decirme que es lo que falla?
con mucho gusto voy a revisar!!! nada mas espera a el fin de semana, por q el filtro de la empresa me bloquea tu pag.