Volver a inicio

Zoom Image Component

Componente web personalizado que permite aplicar efecto de zoom en imágenes mediante click o hover, con seguimiento del cursor para explorar detalles específicos de la imagen.

Zoom interactivo
Personalizable
Fácil de usar

Ejemplos de uso

Zoom básico con click

Montañas y naturaleza

Haz click en la imagen para activar el zoom. Mueve el cursor para explorar diferentes partes de la imagen. Haz click fuera de la imagen o nuevamente en ella para desactivar el zoom.

Código HTML

<!-- Importar el componente -->
<script src="zoom-image-component/index.js"></script>
<link rel="stylesheet" href="zoom-image-component/index.css">

<!-- Implementación básica con click -->
<zoom-image-component data-zoom-mode="click" data-zoom-level="2">
  <div data-zoom-image-wrapper>
    <img src="ruta/a/imagen.jpg" alt="Descripción de la imagen">
  </div>
</zoom-image-component>

Atributos importantes

<!-- data-zoom-mode: Establece cómo se activa el zoom (click/hover) -->
<!-- data-zoom-level: Nivel de ampliación al hacer zoom (2 = 200%) -->

Zoom con hover

Detalle de producto

Simplemente coloca el cursor sobre la imagen para activar el zoom. El zoom se desactivará automáticamente al mover el cursor fuera de la imagen.

Código HTML

<zoom-image-component 
  data-zoom-mode="hover" 
  data-zoom-level="1.5" 
  class="zoom-fancy">
  <div data-zoom-image-wrapper>
    <img src="ruta/a/imagen.jpg" alt="Descripción de la imagen">
  </div>
</zoom-image-component>

CSS personalizado

.zoom-fancy [data-zoom-image-wrapper] {
  --image-wrapper-border-radius: 8px;
  --image-wrapper-border: none;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

Galería de productos con zoom

Laptop

Laptop Pro

$1,299.99

Smartphone

Smartphone Z

$899.99

Auriculares

Auriculares Pro

$249.99

Esta galería muestra cómo implementar el zoom en imágenes de productos, ideal para tiendas online.

Estructura de la galería

<div class="product-gallery">
  <div class="product-card">
    <zoom-image-component data-zoom-mode="click" data-zoom-level="2.5" class="zoom-square">
      <div data-zoom-image-wrapper>
        <img src="imagen.jpg" alt="Laptop">
      </div>
    </zoom-image-component>
    <h4>Laptop Pro</h4>
    <p>$1,299.99</p>
  </div>
  
  <!-- Más productos... -->
</div>

CSS personalizado

.product-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 20px;
}

.zoom-square [data-zoom-image-wrapper] {
  --image-wrapper-max-width: 250px;
  --image-wrapper-aspect-ratio: 1/1;
}

/* Cursor personalizado */
.zoom-crosshair [data-zoom-image-wrapper] {
  cursor: crosshair;
}

Opciones de personalización

Estilo redondeado

Faro
Bordes redondeados con borde morado

Ajuste contain

Perro
object-fit: contain con fondo blanco

Estos ejemplos muestran cómo personalizar la apariencia del componente usando variables CSS y clases personalizadas.

Opciones de personalización

/* Estilo redondeado */
.zoom-rounded [data-zoom-image-wrapper] {
  --image-wrapper-border-radius: 12px;
  --image-wrapper-border: 2px solid var(--component-primary);
}

/* Ajuste contain */
.zoom-contain [data-zoom-image-wrapper] {
  --image-object-fit: contain;
  --image-wrapper-border: 1px solid #e0e0e0;
  background-color: white;
}

/* Variables CSS disponibles */
[data-zoom-image-wrapper] {
  --image-wrapper-max-width: 300px;
  --image-wrapper-aspect-ratio: 300/420;
  --image-wrapper-border-radius: 0;
  --image-wrapper-border: 1px solid;
  --image-object-fit: cover;
}

HTML con clases personalizadas

<zoom-image-component data-zoom-mode="click" class="zoom-rounded">
  <div data-zoom-image-wrapper>
    <img src="imagen.jpg" alt="Descripción">
  </div>
</zoom-image-component>

Responsive con desactivación en móviles

Imagen de libro

Este ejemplo desactiva automáticamente el zoom en pantallas menores a 768px de ancho, mejorando la experiencia en dispositivos móviles. Prueba a reducir el tamaño de tu ventana para ver cómo funciona.

Implementación responsive

<zoom-image-component 
  data-zoom-mode="click" 
  data-zoom-level="2" 
  data-disable-below="768">
  <div data-zoom-image-wrapper>
    <img src="imagen.jpg" alt="Descripción">
  </div>
</zoom-image-component>

Cómo funciona

// El componente comprueba automáticamente el ancho de ventana
// y añade la clase zoom-disabled si es menor que el valor
// especificado en data-disable-below

// El atributo data-disable-below establece en qué punto
// se desactiva la funcionalidad de zoom (en píxeles)

// Cuando el zoom está desactivado, el cursor no cambia
// y los eventos de click/hover no tienen efecto
Ver documentación completa