Lightbox Componentes

O que é

É o jeito de mostrar fotos grandes sem sair da página: a pessoa clica na miniatura e a imagem abre ampliada no meio da tela. Numa galeria, ela passa para a próxima com as setas, o teclado ou arrastando o dedo no celular. Você coloca sw-lightbox num link <a> cujo href é a foto grande, com a miniatura dentro. Para juntar várias fotos numa galeria, dê o mesmo nome em sw-lightbox-grp. Tem ainda legenda, contador "2 / 5", zoom ao clicar, passagem automática e o truque de uma miniatura só que abre um álbum inteiro.

O JavaScript do núcleo cria, uma vez só, a tela escura com a imagem, o botão de fechar, as setas, a legenda e o contador. Ao clicar no link ele não abre a foto numa aba nova: mostra na tela escura, com um "carregando" enquanto a imagem chega. Fecha com o ×, com Esc ou clicando fora da foto. Enquanto aberto, a página não rola. Sem JavaScript, o link continua funcionando: abre a foto normalmente.

Quando usar

• Galeria de fotos: imóvel, obra, cardápio, portfólio de fotógrafo, antes e depois.
• Foto de produto na loja: miniatura na página, grande ao clicar.
• Card de post/imóvel com uma capa só que abre o álbum todo (sw-lightbox-set).
• Para imagens passando sozinhas na página (não em tela cheia), use o Slider.

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O segundo CSS traz as setas (ícones).

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Faça um link para a foto grande, com a miniatura dentro, e coloque sw-lightbox. Clique na foto.

   

   <a sw-lightbox href="fotos/varanda-grande.jpg" sw-lightbox-cap="Vista do rio a partir da varanda">
     <img src="fotos/varanda-miniatura.jpg" alt="Vista do rio">
   </a>

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

1. Uma foto

O jeito mais simples: um link por foto. A legenda vem de sw-lightbox-cap ou, se ele faltar, do title do link. Sem nenhum dos dois, fica sem legenda.

2. Galeria (várias fotos)

Links com o mesmo nome em sw-lightbox-grp viram uma galeria: abrindo qualquer um, aparecem setas, contador "2 / 4" e dá para passar com ← → ou arrastando no celular. sw-lightbox-count="false" esconde o contador.

3. Uma miniatura que abre um álbum

Com sw-lightbox-set, a página mostra uma foto só, mas ao abrir aparecem todas: o href é a primeira, e sw-lightbox-set lista as outras, separadas por vírgula. Um selo "+N" aparece sozinho sobre a miniatura.

4. Passando sozinho

sw-lightbox-auto troca de foto sozinho a cada tantos milissegundos (2000 = 2 segundos), enquanto a galeria estiver aberta. Links com hidden entram na galeria sem aparecer na página.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

Galeria de imóvel em grade Ao vivo

<div class="l l-4 gap-3">
  <a sw-lightbox sw-lightbox-grp="apto-302" href="fotos/fachada.jpg" sw-lightbox-cap="Apto 302 — Fachada">
    <img class="r-m w-fl" src="fotos/fachada-p.jpg" alt="Fachada" loading="lazy">
  </a>
  <a sw-lightbox sw-lightbox-grp="apto-302" href="fotos/sala.jpg" sw-lightbox-cap="Apto 302 — Sala">
    <img class="r-m w-fl" src="fotos/sala-p.jpg" alt="Sala" loading="lazy">
  </a>
  <!-- …mais fotos com o mesmo sw-lightbox-grp… -->
</div>

Card de post com capa que abre o álbum Ao vivo

Reforma da cozinha

3 fotos · Bairro Funcionários

<article class="card">
  <a sw-lightbox href="reforma/1.jpg" sw-lightbox-set="reforma/2.jpg, reforma/3.jpg"
     sw-lightbox-cap="Reforma da cozinha — antes e depois">
    <img src="reforma/capa.jpg" alt="Reforma da cozinha">
  </a>
  <strong>Reforma da cozinha</strong>
  <p>3 fotos · Bairro Funcionários</p>
</article>

<button type="button" sw-btn="out" id="ver-planta"><i class="swi-expand"></i> Ver planta</button>

<script>
  document.getElementById('ver-planta').addEventListener('click', () => {
    SW.Light.open('fotos/planta.jpg', { caption: 'Planta baixa — 72 m²', zoom: true });
  });
</script>

// os eventos saem no document
document.addEventListener('sw:lightbox:open', (e) => {
  console.log('abriu em', e.detail.src, 'posição', e.detail.index);
});
document.addEventListener('sw:lightbox:change', (e) => {
  console.log('trocou para', e.detail.src);
});
document.addEventListener('sw:lightbox:close', () => {
  console.log('fechou a galeria');
});

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js.
• swcore.compl.min.css — os ícones das setas ‹ › (sem ele as setas ficam vazias).

Cuidados — erros comuns

• O nome no JavaScript é SW.Light, não SW.Lightbox.
• Usar a mesma imagem pesada na miniatura e no href: a página fica lenta. Tenha uma miniatura pequena e a foto grande só no href.
• Esquecer o alt da miniatura: é ele que o Google e o leitor de tela leem.
• Nome de galeria repetido em dois lugares da página (dois imóveis com sw-lightbox-grp="fotos"): as fotos dos dois se misturam. Use nomes diferentes.
• No sw-lightbox-set, a legenda (sw-lightbox-cap) aparece só na primeira foto.

O que ele não faz

• Só imagens: não abre vídeo, PDF nem página.
• Não tem miniaturas embaixo da foto aberta nem botão de baixar/compartilhar.
• O zoom é fixo (1,6×), sem pinça de dois dedos.