JS Component
Lightbox Y2Light
Galeria de imagens em overlay - navegação por teclado/swipe, grupos, legenda, zoom e autoplay.
1. Galeria - Clique nas imagens
2. Trigger Personalizado
4. API JavaScript
// Abrir lightbox programaticamente
Y2Light.open('https://exemplo.com/foto.jpg', {
caption: 'Minha foto',
zoom: true
});
// Fechar
Y2Light.close();
// Navegar
Y2Light.next();
Y2Light.prev();
// Eventos
document.addEventListener('yd:y2light:open', e => console.log('Abriu', e.detail));
document.addEventListener('yd:y2light:close', () => console.log('Fechou'));
document.addEventListener('yd:y2light:nav', e => console.log('Navegou:', e.detail.index));
Quick Reference
| Atributo / Classe | Elemento | Descrição |
|---|---|---|
y2light |
a / qualquer | Ativa o lightbox no elemento |
href="url" |
a | URL da imagem em tamanho completo |
y2light-grp="nome" |
a | Agrupa imagens para navegação entre elas |
y2light-cap="texto" |
a | Legenda exibida abaixo da imagem |
y2light-zoom |
a | Habilita zoom ao clicar na imagem aberta |
y2light-auto="ms" |
a | Autoplay do grupo (intervalo em ms) |
y2light-count="false" |
a | Oculta o contador (N / Total) |
| ← → (teclado) | - | Navegar entre imagens do grupo |
| ESC | - | Fechar lightbox |
| Swipe | - | Navegar em dispositivos touch |
Y2Light.open(url, opts) |
JS | Abrir via JavaScript |
yd:y2light:open / close / nav |
evento | Disparados ao abrir, fechar e navegar |