Lupa Zoom: el zoom de WooCommerce en cualquier imagen
Añade la clase lupa a una imagen y, al pasar el ratón, se amplía la zona que hay bajo el cursor. Es el mismo efecto que el zoom de las fichas de WooCommerce, pero en cualquier imagen y sin depender del tema.
- Precio
- Gratis, licencia GPLv2 o posterior
- Requisitos
- WordPress 5.6 o superior y PHP 7.2 o superior
- Peso
- JavaScript propio sin jQuery, unos 7 KB comprimido
- Datos
- Sin peticiones externas y sin datos de los visitantes
Pruébalo aquí
Pasa el ratón por la imagen. Es una captura de esta web a doble resolución: el plugin muestra la versión pequeña y amplía con la grande.
Por qué existe
El zoom de las fichas de WooCommerce es justo lo que pide un catálogo, un portfolio o una galería, pero solo existe en la ficha de producto y cada tema lo trata a su manera.
Cómo se usa
- Instala y activa el plugin en tu WordPress.
- Añade la clase lupa a la imagen o al bloque que la contiene. En Elementor, en Avanzado → Clases CSS; en WPBakery, en Extra class name.
- Si quieres, ajusta el modo y el nivel de zoom en Ajustes → Lupa Zoom.
- Para una imagen suelta también tienes el shortcode [lupa_zoom id="123"].
En revisión en el directorio de WordPress.org. Mientras tanto, descárgalo de GitHub.
Qué hace
- En la imagen o en su contenedor. La clase vale en la propia imagen o en el widget que la envuelve, y también en elementos cuya imagen es un fondo de CSS.
- Respeta los recortes. Con object-fit: cover o las cajas de proporción fija de los constructores, amplía justo el recorte que se ve.
- Zoom automático. Calcula el nivel según la resolución real del archivo original, o lo fijas tú por imagen.
- Dos modos. Zoom dentro de la imagen, como WooCommerce, o lupa con un panel al lado.
- Contenido dinámico. Funciona con carga diferida, sliders, contenido cargado por AJAX y Elementor.
- Táctil opcional. En móvil y tablet, manteniendo el dedo y arrastrando.
Para desarrolladores
- Atributos por imagen: data-lupa-src, data-lupa-zoom, data-lupa-mode y data-lupa-lens.
- API en JavaScript: LupaZoom.refresh(), LupaZoom.destroyAll() y el evento lupa:refresh.
- Filtros de PHP: lupa_zoom_should_enqueue para cargarlo solo donde haga falta y lupa_zoom_config.
Lo hicimos para webs que mantenemos y lo publicamos gratis para quien lo necesite. Ver plugins de WordPress a medida
Preguntas frecuentes
¿Necesita WooCommerce?
No. Funciona en cualquier imagen. Si usas WooCommerce, puedes aplicarlo también a la galería de producto y desactivar su zoom para que no salgan dos.
¿Qué imagen amplía?
La del atributo data-lupa-src si lo pones. Si no, la más grande del srcset y, si no hay, la del src. Para que el zoom se vea nítido, la imagen original tiene que ser más grande que la que se muestra.
¿Ralentiza la web?
Carga un archivo de JavaScript y uno de CSS pequeños, sin jQuery. Si solo lo usas en algunas páginas, el filtro lupa_zoom_should_enqueue evita cargarlo en el resto.
¿Funciona en móvil?
Por defecto está desactivado en pantallas táctiles para no estorbar al desplazarse. Puedes activarlo en los ajustes: se amplía manteniendo el dedo y arrastrando.
¿Necesitas un plugin hecho para tu web?
Hacemos plugins de WordPress y WooCommerce a medida: la lógica de tu negocio, editores para tu equipo e integraciones. Código tuyo y presupuesto cerrado.
Primera consulta sin coste. Analizamos lo que nos cuentas y te damos una respuesta en 48 h laborables.