Pseudo-atributo :target em galeria de imagens
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"><br /> <div id="galeria"><br /> <div id="bloc_img"><br /> <img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" /><br /> <div id="img_1"><img src="img/foto1.jpg" alt="Foto 1" title="Foto 1" /></div><br /> <div id="img_2"><img src="img/foto2.jpg" alt="Foto 2" title="Foto 2" /></div><br /> <div id="img_3"><img src="img/foto3.jpg" alt="Foto 3" title="Foto 3" /></div><br /> </div><br /> <div id="bloc_bt"><br /> <a href="#img_1" class="bt_1"><img src="img/foto1-thumb.jpg" alt="Foto 1" title="Foto 1" /></a><br /> <a href="#img_2" class="bt_2"><img src="img/foto2-thumb.jpg" alt="Foto 2" title="Foto 2" /></a><br /> <a href="#img_3" class="bt_3"><img src="img/foto3-thumb.jpg" alt="Foto 3" title="Foto 3" /></a><br /> </div><br /> </div><br /></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 {<br /> width:720px;<br /> margin:50px auto;<br />}<br />#galeria {<br /> background-color:#eee;<br /> border-bottom:3px solid #aaa;<br /> padding:10px;<br /> overflow:hidden;<br /> width:700px;<br />}<br />#bloc_img {<br /> width:700px;<br /> height:500px;<br /> margin-bottom:10px;<br />}<br />#bloc_img > img {position:absolute}<br />#img_1, #img_2, #img_3 {<br /> width:700px;<br /> height:500px;<br /> display:none;<br /> position:relative;<br /> z-index:2;<br />}<br />#img_1:target, #img_2:target, #img_3:target {display:block}<br />a.bt_1, a.bt_2, a.bt_3 {<br /> float:left;<br /> width:226px;<br /> height:130px;<br /> margin-right:11px;<br />}<br />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.
é desenvolvedor Front-end desde 2005, viciado em XHTML e CSS. Atualmente trabalha em uma agência web, a Ambulance (www.ambulance.com.br) como desenvolvedor front-end. É criador do blog Pinceladas da Web e do CSS no Lanche, voltado para o mundo do desenvolvimento Front-End.
