Galeria de imagens com CSS3
Postado por: Pedro Rogério em
Nesse tutorial vou mostrar 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á fiz outros tutoriais sobre o assunto, 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, acabei a encontrando no site VirtuousWeb e acabei efetuando algumas alterações para que a mesma funcionasse no Internet Explorer.
Dando continuidade ao tutorial, 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 as 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 ao usuário clicar nos thumbs das imagens aplicar display:block ao seu alvo. 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.
Sobre Pedro Rogério
Pedro Rogério é desenvolvedor web por paixão, não saberia fazer melhor outra coisa. Além de escrever para o CSS no Lanche também escreve para o Pinceladas da Web, blog com assuntos gerais sobre desenvolvimento web.
I’m glad you like the article, and yours with real images is much better.
Good continuation
A idéia é boa, mas é legal usar o JS para que a página não pule quando uma thumb é clicada.
Esse salta da tela me causa desconforto
Muito legal, principalmente pelo fato de cada imagem ter uma respectiva ancora na url, isso permite compartilha uma foto especifica da galeria sem ter que mandar url do source, e de funcionar sem javascript.
Muito bom…
Quem sabe futuramente ñ precisamos mais utilizar javascript para fazer efeitos legais,e sim usando css3.
Consegui que funcionasse no blogger
Gostei dessa abordagem Pedro. Você realmente melhorou o tutorial que você encontrou.
Eu já havia me perguntado se seria possível usar a mesma técnica dos suckerfish dropdowns para :hover no caso de :target, o artigo do Peter que você linkou tinha a resposta, yay!
E ai Pedro muito massa essa galeria.
Porém gostaria de aumentar ela pra 6 imagens, porém não dá certo as 3 imagens a mais não ficam corretas.
Gostaria de sua ajuda se possível.
Obrigado.
At.: Júnio Moreira
Júnio,
Você deve ter esquecido de modificar o tamanho das imagens thumb para comportar as novas em
26.a.bt_1, a.bt_2, a.bt_3 {
27. float:left;
28. width:226px;
29. height:130px;
30. margin-right:11px;
31.}
Roberto,
O Problema não acontece nas miniaturas e sim não imagens principais.. Quando clico elas não aparecem no lugar devido para elas.
Realmente, o que matou foi esse saltar de tela, mas mesmo assim achei a idéia bacana.
[...] CSS no Lanche likebot_bgcolor = ''; likebot_url = 'http://vareschi.com.br/?p=17'; likebot_type = [...]
Olá, boa tarde,
Isso seria muito bom se todos os browsers no mercado aceitassem css3
Outra coisa
Eu estou interessado em trabalhos como freelancer
Eu trabalho com:
XHTML, CSS, Padrões web, Metodologia tableless
ColdFusion
PHP
SQL
Mysql
Sql Server
VB.NET
Tenho o meu portfólio aqui:
http://www.profissionalweb.net/
O meu ultimo projecto foi para um arquitecto vice presidente do IAB no Rio de Janeiro
http://www.ronaldojcosta.com
Estou a trabalhar actualmente na finalização do blogue oficial da profissionalweb.net
Estou também a trabalhar com aplicações em ambiente windows com VB.NET
Estou a reformular o website da empresa britaminho
http://www.britaminho.com
Contactem-me
cara muito bom msm parabens gostei muito
inclusive me fez me aprofundar mais no css
mais sem modificaçoes ela nao abriu no ie
cara me ajuda eu fiz tudo certinho
mais msm assim nao abre no IE
ninguem responde nesse forum nao aff :@