Veremos hoje como desenvolver uma galeria de imagens
com a pseudo-classe :target das CSS3. A Pseudo-classe
:target tem como função alterar os estilos do elemento alvo, já falei sobre o assunto em outros artigos, portanto, não vou me alongar explicando os benefícios de
utilização dessa pseudo-seletor.
Eu não sou o autor original dessa galeria, vi o assunto no VirtuousWeb
e decidi trazê-lo aqui também, com algumas alterações para que ela funcione no
Internet Explorer.
Vamos lá. O HTML é bem simples e não tem
segredo, basta você observar a estrutura abaixo utilizada para o
tutorial:
<div id="container">
<div id="galeria">
<div id="bloc_img">
<img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" />
<div id="img_1"><img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" /></div>
<div id="img_2"><img src="img/foto2.jpg" alt="Foto 2" title="Foto 2" /></div>
<div id="img_3"><img src="img/foto3.jpg" alt="Foto 3" title="Foto 3" /></div>
</div>
<div id="bloc_bt">
<a href="#img_1" class="bt_1"><img src="img/foto1-thumb.jpg" alt="Foto 1" title="Foto 1" /></a>
<a href="#img_2" class="bt_2"><img src="img/foto2-thumb.jpg" alt="Foto 2" title="Foto 2" /></a>
<a href="#img_3" class="bt_3"><img src="img/foto3-thumb.jpg" alt="Foto 3" title="Foto 3" /></a>
</div>
</div>
</div>A div com o id “bloc_img” é onde devem ficar as imagens maiores, e a
div com o id “bloc_bt” é onde ficam os thumbnails das imagens. Se
repararem, existe uma imagem que é filha direta da div com o id
“bloc_img”, ela será utilizada como imagem default da galeria, essa
opção foi implementada por mim e não existia na galeria original.
Agora vamos às regras CSS:
#container {
width:720px;
margin:50px auto;
}
#galeria {
background-color:#eee;
border-bottom:3px solid #aaa;
padding:10px;
overflow:hidden;
width:700px;
}
#bloc_img {
width:700px;
height:500px;
margin-bottom:10px;
}
#bloc_img > img {position:absolute}
#img_1, #img_2, #img_3 {
width:700px;
height:500px;
display:none;
position:relative;
z-index:2;
}
#img_1:target, #img_2:target, #img_3:target {display:block}
a.bt_1, a.bt_2, a.bt_3 {
float:left;
width:226px;
height:130px;
margin-right:11px;
}
a.bt_3 {margin-right:0}O código acima nada mais faz do que aplicar display:block ao alvo, quando o usuário clicar nos thumbs das
imagens. Vejam a demonstração.
Se você reparar no código-fonte, verá que existe um JavaScript
desenvolvido por Peter Ryan para
habilitar o funcionamento da pseudo-classe :target no Internet
Explorer.
Você também pode efetuar o download
dessa galeria para estudo futuro.
De 0 a 10, o quanto você recomendaria este artigo para um amigo?