Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 24/07/07

Galeria de imagens com CSS

Quantas vezes vocę já precisou desenvolver uma galeria de imagens e acabou recorrendo a recursos como Flash ou JavaScript? Graças ŕ uma necessidade que tivemos aqui na agęncia, resolvi desenvolver uma galeria simples, feita somente com [tag]CSS[/tag], baseando-se na utilização de pseudo-classes para visualização das imagens maiores.

Há alguns bons exemplos espalhados pela Internet buscando desenvolver algo sem utilização de artifícios externos, como este tutorial no CSSplay, que acabei utilizando como “base” para este método de desenvolvimento.

Nesta galeria que desenvolvi o raciocínio é muito simples, e muitos já devem ter feito algo bem parecido ou, até mesmo, igual. Iniciamos escrevendo o [tag]HTML[/tag]:

<!-- abre galeria -->
  <div id="galeria">
    <h1>Fotos de Curitiba</h1>
<!-- abre imagem e legenda default -->
    <img src="foto1.jpg" alt="Foto de Curitiba" />
    <span class="legenda">Rua 24 horas</span>
<!-- fecha imagem e legenda default -->
    <ul id="thumbs">
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto1_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto1.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Rua 24 horas</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto2_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto2.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Palácio Avenida</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="foto3_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="foto3.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Bosques</span>
        </a>
      </li>
    </ul>
  </div>
<!-- fecha galeria -->

Neste HTML criei uma div chamada “galeria” que irá conter o título da galeria, a imagem e legenda defaults para que apareça caso nada esteja selecionado, e a lista de thumbnails. Nessa lista, cada item possui um link que contém o thumb e a imagem em tamanho completo. Para finalizar, o desenvolvi o CSS prevendo o comportamento dos links, quando clicados, mostrando as imagens e legendas que estão inseridos:

* {
	margin: 0;
	padding: 0;
}
html, body {
	font: 11px "Trebuchet MS", Arial, sans-serif;
}
h1 {
	margin-bottom: 5px;
	font-size: 1.4em;
	text-transform: uppercase;
}
img {
	border: 2px solid #666;
}
#galeria {
	position: relative;
	width: 304px;
	margin: 1em auto;
	padding: 5px;
	background: #cacaca;
}
#galeria span.legenda {
	display: block;
	width: 296px;
	padding: 2px;
	background: #CACACA;
	font-style: italic;
	text-align: left;
}
#galeria ul#thumbs {
	clear: both;
	padding: 5px;
	text-align: center;
	list-style: none;
}
#galeria ul#thumbs li {
	display: inline;
	margin: 0 3px;
}
#galeria ul#thumbs li a {
	text-decoration: none;
}
#galeria ul#thumbs li a img.full,
#galeria ul#thumbs li a span.legenda {
	position: absolute;
	visibility: hidden;
	left: 5px;
}
#galeria ul#thumbs li a img.full {
	top: 30px;
	cursor: default;
}
#galeria ul#thumbs li a span.legenda {
	top: 188px;
	color: #000;
	cursor: text;
}
#galeria ul#thumbs li a:active img.full,
#galeria ul#thumbs li a:focus img.full,
#galeria ul#thumbs li a:active span.legenda,
#galeria ul#thumbs li a:focus span.legenda {
	visibility: visible;
}

Como pode ser observado, as imagens e legendas possuem “position: absolute”, posicionando-se de acordo com a div “galeria”, não oferecendo nenhuma dificuldade neste ponto. Claro, se as imagens variarem de tamanho, deverão ser feitos alguns ajustes específicos para cada foto, mas nada que represente muito trabalho.

Um ponto importante é a correção dos cursores tanto na imagem quanto na legenda pois, devido ao fato de ambos estarem dentro de um link, devemos trocá-los para que pareçam algo que realmente está fora, acima da lista de thumbnails.

Vocę pode visualizar a versão finalizada aqui. Caso haja alguma sugestão de melhoria, é só comentar :)

Assuntos: CSS, Web Design, XHTML
Trackback Feed deste artigo

13 comentários para "Galeria de imagens com CSS"

  1. Jader Rubini | 25/07/07 - 8:20 am

    Muito bom, parabéns Carlos. ;)

    Topo
  2. André Balieiro | 28/07/07 - 8:55 am

    Realmente eu sempre tive que apelar para o flash na hora de fazer algo parecido. Ficou muito bom em CSS. Parabéns.

    Topo
  3. Micael | 13/08/07 - 3:56 pm

    muito bacana. Interessantissimo

    Topo
  4. Rafael Marin | 14/08/07 - 2:18 pm

    Poxa, interessantíssimo, bem diferente das outras galerias 100% CSS que temos por aí.
    Abraços

    Topo
  5. Cezar Tamer | 13/02/08 - 2:12 pm

    Olha muito boa a galeria!!! Só tem um probleminha não funciona para o IE6!!!
    Só ví isso após um tempo!!! Para o multiple IE funciona…

    Vlw

    Topo
  6. Wanderley Rocha | 30/09/08 - 2:55 pm

    Boa tarde, Carlos Eduardo.
    Peguei como base a sua galeria de imagens para desenvolver uma para um projeto que estou participando. Me tire uma dúvida, encontrei um bug no IE 6 que não ocorre no FF. Ao clicar nas imagens de thumbnail, nem sempre, a imagem “full” é carregada na área central. No FF a imagem sempre é carregada. Li o comentário de um colega que havia este bug no IE 6. Vocę tem solução para ele? Agradeceria imensamente a resposta.
    Forte abraço,

    Topo
  7. Fábio Novais | 27/12/08 - 12:25 am

    Olá, boa noite.
    Li este tutorial sobre a Galeria de imagens em CSS e achei bem legal,mas como estou começando a usar CSS agora, fiquei com algumas dúvidas: após montar minha galeria, os thumbs ficaram na parte de cima da página, e as imagens maiores ficaram logo abaixo, porém acabam sendo cortada devido ao tamanho da tela. Como faço para deixar como no exemplo, com os thumbs embaixo ou do lado esquerdo das imagens maiores? A outra dúvida é a seguinte: Quero colocar esta galeria dentro de um site já existente, e que já tem uma página CSS que formata as características do site. Como farei para colocar este código html e css dentro de uma parte específica do meu site? Aguardo ansiosamente o contato.

    Topo
  8. Codelinemaniacs » Galeria de imagens com CSS | 20/01/09 - 9:31 am

    […] […]

    Topo
  9. Ivanbrg Moreira | 7/06/09 - 10:38 am

    Ops…
    Fiz um teste no IE8 e não funcionou corretamente, após clicar na última foto, não consegue mais visualizar as fotos anteriores…
    Alguma correção?!?

    Topo
  10. Ricardo | 15/07/09 - 3:45 pm

    Gostei. uma dúvida. E se eu precisar colocar 24 imagens como fica?

    Topo
  11. Diego | 7/08/09 - 1:21 pm

    Olá, a galeria ficou simples e bonita.
    Utilizei como base para colocar em meu site, mas por exemplo, coloquei um total de 12 thumb’s e em qualquer um que eu clico, ea imagem padrao nao é exibida. Qual seria o problema?

    No Aguardo,

    Diego

    Topo
  12. Paulo | 19/11/09 - 10:55 am

    Muito bom, mas não funciona no IE8.

    Topo
  13. Maysa | 22/01/10 - 3:13 pm

    mto boa a galeria mas, tem um jeito ai pra funciona no IE.

    Aguardo a resposta. vlw

    Topo
Comente este artigo
  1. (obrigatório)
  2. (obrigatório)

Links Randômicos
Meta
Apoio
Créditos
Creative Commons