Lightbox Componentes
Galeria em overlay de tela cheia, com legenda, navegação, zoom e autoplay.
O que é
Clique numa miniatura e a imagem abre ampliada por cima de tudo — com legenda, contador (1/5), setas de navegação entre imagens do mesmo grupo.
Como funciona
Elementos com o mesmo sw-lightbox-grp formam uma galeria navegável — a ordem é a ordem no DOM. Um único overlay é reaproveitado pra todos os grupos da página (criado sob demanda no primeiro uso).
Exemplos
Galeria de produtos
Ao vivo
<div class="demo-row">
<a sw-lightbox sw-lightbox-grp="galeria" href="../../assets/images/image-reveal/amber-chair.webp" sw-lightbox-cap="Poltrona Âmbar"><img class="demo-thumb" src="../../assets/images/image-reveal/amber-chair.webp" alt="Poltrona Âmbar"></a>
<a sw-lightbox sw-lightbox-grp="galeria" href="../../assets/images/image-reveal/architecture.webp" sw-lightbox-cap="Arquitetura Orgânica"><img class="demo-thumb" src="../../assets/images/image-reveal/architecture.webp" alt="Arquitetura Orgânica"></a>
<a sw-lightbox sw-lightbox-grp="galeria" href="../../assets/images/image-reveal/chrome-desert.webp" sw-lightbox-cap="Deserto Cromado"><img class="demo-thumb" src="../../assets/images/image-reveal/chrome-desert.webp" alt="Deserto Cromado"></a>
</div>
sw-lightbox-zoom — clique na imagem aberta pra ampliar
Ao vivo
<a sw-lightbox sw-lightbox-zoom href="../../assets/images/image-reveal/fabric-chrome.webp" sw-lightbox-cap="Clique na imagem aberta pra dar zoom"><img class="demo-thumb" src="../../assets/images/image-reveal/fabric-chrome.webp" alt="Tecido Cromo"></a>Atributos
sw-lightboxno
<a href="imagem-grande.jpg"> — ativa o lightboxsw-lightbox-grpagrupa imagens navegáveis entre si
sw-lightbox-caplegenda mostrada embaixo
sw-lightbox-zoompermite clicar na imagem aberta pra dar zoom
sw-lightbox-autoavança sozinho a cada N ms (só com mais de 1 imagem no grupo)
Variantes
Nenhum.
Eventos
sw:lightbox:open{ index, src }
sw:lightbox:nav{ index }
sw:lightbox:close—
API (JavaScript)
SW.Light.open(src, opções)abre uma imagem avulsa por código, sem precisar de um link na página
Requisitos
Nenhuma.
Limitações — o que ele não faz
Nenhuma.
