Plugin zoom jquery
3 seguidores
Buenos días
Estoy buscando para una web algún plugin que me permita hacer lo siguiente: tendría una caja con varios botes (sería a modo de producto) y me gustaría que al pasar el ratón por dicha caja me sacase a modo de zoom el bote por el que estén pasando el puntero.
Por ejemplo: si tengo una caja con ambientadores (por decir algo), al pasar el ratón me hiciese zoom y me sacase el ambientador de vainilla, el ambientador de pino, etc... (lo siento no se me ocurre ahora un ejemplo mejor jajajaja).
¿Conocéis alguno? Muchas gracias!
rafael_o Mod Plus
Hum...
https://www.google.com.mx/search?q=jquey+zoom
La realidad es de que hay que buscar y probarar, para que escojas el que te guste.
Yo lo que hago es descargar el demo, y revisar el código que sea muy fácil de entender. No te pongo alguno en especial porque casi no uso ese recurso de zoom.
markosci
Gracias @rafael-8
Si, he hecho la búsqueda pero no encuentro ninguno que sea como comento en el ejemplo: una caja entera y que al hacer hover en ella el "zoom" que me haga sea el del bote por donde estuviesen pasando (no sé si me he explicado mejor).
rafael_o Mod Plus
Hay dos sopas. O el zoom se aplica en el mismo marco que estás viendo. (Digo marco, como el espacio cuadrado que enmarca una imagen)
http://www.jacklmoore.com/zoom/
O abre una ventanita adicional y tu navegas en la imagen de tamaño pequeño.
http://www.elevateweb.co.uk/image-zoom/examples
Curiosamente son los dos resultados iniciales.
Una tercer opción sería que el zoom se vea en un cuadro adicional pero pre seleccionado.
rafael_o Mod Plus
Hum. Hay muy claras opciones.
Que el zoom lo veas en el mismo cuadro donde está tu imagen original.
http://www.jacklmoore.com/zoom/
Que el zoom lo veas en una ventana nueva
http://www.elevateweb.co.uk/image-zoom/examples
Y curiosamente esos son los dos primeros resultados.
El segundo tiene mil maneras de verse, como ventana, como lupa, con efecto elástico, fade.
rafael_o Mod Plus
Opciones: Que el zoom lo veas en el mismo cuadro donde está tu imagen original. jacklmoore . com / zoom
Que el zoom lo veas en una ventana nueva elevateweb . co . uk / image-zoom / examples
Y curiosamente esos son los dos primeros resultados. El segundo tiene mil maneras de verse, como ventana, como lupa, con efecto elástico.
markosci
Buenas @rafael-8
Si esos plugins lo he visto pero quizás no me he explicado bien, perdón.
Pongo un ejemplo práctico:
Si tengo esta foto, lo que necesitaría es que el zoom/plugin me muestre únicamente el producto por el que están pasando. Si pasan por la caja de Mikado, que la ventana que saliese únicamente la caja de mikado, no un zoom aplicado a toda la foto, sino como si seleccionase un producto en concreto de dicha caja.
smalonso Mod
Creo que lo que estás buscando es un tooltip que puedas poner una imagen dentro. Hay miles de librerías para ello si buscas.
rafael_o Mod Plus
Ahí necesitas armar algo específico tu mismo. Antes eso se hacía con un tag image map https://www.w3schools.com/tags/tag_map.asp El problema es de que no es tan "responsive" que digamos.
Pero actualmente tendrías que armar un "collage" de zonas sensibles, tal vez un svg para detectar las zonas.
Busca Html5 Image Map responsive
https://www.google.com.mx/search?q=+Html5+image+map+responsive
https://stackoverflow.com/questions/30998955/more-modern-image-maps
Y ya aparte de ello dispararás tu evento.
rafael_o Mod Plus
Hay por ahí unos plugin de Jquery que recalcula las coorednadas del Image Map.
http://mattstow.com/experiment/responsive-image-maps/rwd-image-maps.html#blossom
rafael_o Mod Plus
Peeeeero también podrías hacer algo sencillo con simple CSS con un mouse hover y un transform
https://jsfiddle.net/2uxzxrw7/