Acompanho desde os anos 2000 a evolução da Web e como as coisas têm mudado. Existem certas coisas que só eram possíveis de fazer usando JavaScript. Felizmente, hoje o cenário é outro, e temos o luxo de poder escolher se vamos usar JS ou não. Uma dessas coisas é o efeito chamado "lightbox".
O que é
Lightbox é basicamente uma forma bem simpática de mostrar uma imagem ampliada, sem sair da página para ver a foto inteira, que é o comportamento padrão dos navegadores. Geralmente vem em uma moldura que se abre ao clicar na imagem, com um botão de fechar, para voltar à visão anterior. Foi criado em 2012 por Lokesh Dakar, em Javascript e foi um sucesso. Seguido logo por scripts concorrentes, utilizando outras bibliotecas ou possuindo outros recursos. Até hoje, o script de Lokesh funciona! Deixei o link para o site do Lightbox original no final deste artigo.
Hoje em dia, graças aos avanços no CSS, dá para atingir o mesmo efeito, sem a complicação de usar JavaScript. Abaixo segue um tutorial de como implementar um em seu site.
O código para a galeria
Para atingir o efeito, precisamos de uma estrutura em HTML para termos um conteúdo ilustrativo:
<section class="galeria">
<h2>Gallery</h2>
<div class="item">
<a href="#imagem1">
<img src="https://source.unsplash.com/fdlZBWIP0aM/500x500" />
</a>
<strong>Foto 1</strong>
</div>
<div class="item">
<a href="#imagem2">
<img src="https://source.unsplash.com/Yr4n8O_3UPc/500x500" />
</a>
<strong>Foto 2</strong>
</div>
<div class="item">
<a href="#imagem3">
<img src="https://source.unsplash.com/_-SwhhV7tSo/500x500" />
</a>
<strong>Foto 3</strong>
</div>
</section>No código acima, nenhuma novidade, apenas uma seção com três imagens clicáveis. Note que cada âncora <a> possui um href="#imagemN sendo N o número da imagem. Isto vai ser importante mais para a frente. O CSS para a formatação do conteúdo segue abaixo.
@include (https://fonts.googleapis.com/css?family=Montserrat:300,300i,400,400i,700,700i&display=swap);
/* Body */
body {
background: #111;
box-sizing: border-box;
color: #fff;
font-family: "Montserrat", sans-serif;
font-size: 12px;
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
/* Galeria */
.galeria {
display: grid;
grid-gap: 1em;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 10vh auto;
margin: 2em auto;
max-width: 100%;
width: 600px;
}
.galeria h2 {
font-size: 30px;
grid-column: 1/4;
}
.galeria a {
cursor: zoom-in;
transition: filter 0.2s ease-in-out;
}
.galeria a:hover {
filter: brightness(90%);
}
.galeria .item strong {
display: block;
font-size: 1.5em;
text-align: center;
}
.galeria img {
border-radius: 1em;
max-width: 100%;
}Utilizei o display: grid na seção .galeria, mas isto não faz parte do efeito. Usei apenas pela praticidade. Num artigo futuro, escreverei sobre como usar o Grid Layout.
O código para os lightboxes
O HTML também é bastante simples. Basta criar a seguinte estrutura para cada imagem que se deseja ter o efeito de ampliação:
<div class="lightbox" id="imagemN">
<a href="#" class="fechar">×</a>
<div class="conteudo">
<img src="https://source.unsplash.com/fdlZBWIP0aM/900x900" />
<p>Foto 1</p>
</div>
</div>Neste código, temos um <div> com um id equivalente aos href="#imagemN" presentes na estrutura feita para a galeria; um link com uma âncora genérica href="#" para fechar a janela; um <div> para o conteúdo do lightbox; uma img com resolução maior, para ser a versão ampliada e uma legenda opcional.
Aplicando para as três imagens que temos na galeria, o código ficará assim:
<div class="lightboxes">
<div class="lightbox" id="imagem1">
<a href="#" class="fechar">×</a>
<div class="conteudo">
<img src="https://source.unsplash.com/fdlZBWIP0aM/900x900" />
<p>Foto 1</p>
</div>
</div>
<div class="lightbox" id="imagem2">
<a href="#" class="fechar">×</a>
<div class="conteudo">
<img src="https://source.unsplash.com/Yr4n8O_3UPc/900x900" />
<p>Foto 2</p>
</div>
</div>
<div class="lightbox" id="imagem3">
<a href="#" class="fechar">×</a>
<div class="conteudo">
<img src="https://source.unsplash.com/_-SwhhV7tSo/900x900" />
<p>Foto 3</p>
</div>
</div>
</div>Até aí, nada de especial. O que realmente muda a situação, é o que vem a seguir.
.lightbox {
background: rgba(0, 0, 0, 0.8);
display: none;
position: fixed;
z-index: 1000;
}
.lightbox:target {
align-items: center;
bottom: 0;
display: flex;
justify-content: center;
left: 0;
right: 0;
top: 0;
}
.lightbox img {
border-radius: 1em;
display: block;
margin: auto;
max-height: 80vh;
max-width: 90vh;
}
.lightbox .fechar {
color: #fff;
font-size: 4em;
font-weight: bold;
height: 1em;
position: fixed;
right: 0;
top: 0;
width: 1em;
z-index: 1001;
}
.lightbox p {
font-size: 2em;
font-weight: bold;
text-align: center;
}Reparou na pseudo-classe :target? É ela que faz o truque!
Basicamente, ela cria a possibilidade de mudar o estilo do elemento que tiver sua id no final da URL! Bastante perspicaz. Se o id #imagem1 estiver presente na barra de endereços do navegador, o alvo ('target') será atingido, ativando o efeito aplicado na regra que faz uso deste artifício.
A única limitação é caso você queira alguma funcionalidade extra que não seja possível no CSS, como copiar a imagem para a área de transferência, integrá-la a alguma ação de uma aplicação ou outra coisa muito específica.
Esta técnica não precisa ser usada somente para este efeito de lightbox, claro. Você pode criar modais, menus ou outros efeitos. Fique livre para usar sua criatividade. Também não está limitada a ampliar imagens: qualquer elemento HTML pode ser colocado na <div> que será mostrada após o clique.
Use JavaScript somente quando necessário, senão, deixe o CSS te dar uma pequena ajuda. É menos código para se preocupar.
Deixei um link abaixo para o CodePen que fiz demonstrando o efeito com o código usado neste artigo. Quaisquer dúvidas ou sugestões, deixe um comentário!