Blog

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 CSS, 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 HTML:

<!-- 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

Technorati Tags: CSS, HTML