6 de janeiro de 2010

CSS Tutorial - Criando um álbum de fotos com CSS



Criar um álbum de fotos pode parecer uma tarefa difícil, mas é mais fácil do que você pensa, isso é possível com CSS.

Vou mostrar agora as técnicas para criação um mini álbum de fotos para você colcar na sibebar do seu blog ou site, mas pode ser onde você quizer. :D

Veja a demonstração desse álbum de fotos em ação aqui .

Vamos por partes...

Primeiro esse é o HTML que usaremos para desenvolver o álbum de fotos, não modifique, as únicas modificações que faremos nesse código é a substituição das imagens que estão no código pelas imagens de sua preferência. O endereço de cada imagem deve ser adicionado duas vezes em cada link, uma no lugar do "imagemthumbx.jpg" que será a thumbnail e o mesmo endereço em "imagemaqui2.jpg" que será a imagem grande exibida quando o mousepassar em cima da thumbnail.

Para adicionar mais imagens basta copiar os links e colar dentro da div e fazer o mesmo procedimento.

Se você possuir um conhecimento mais avançado de CSS pode modificar do jeito que quiser.
<div id="album">
<center>
<a class="fotosdoalbum" href="#"><img src="imagemathumb1.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui1.jpg" width="800" height="500" alt="ilustracao03.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb2.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui2.jpg" width="800" height="500" alt="img2.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb3.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui3.jpg" width="800" height="500" alt="Realistic_Flaming_Guitar_Fire.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb4.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui4.jpg" width="800" height="500" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb5.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui5.jpg" width="800" height="500" alt="marvelheroes10.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb6.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui6.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb7.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui7.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
<a class="fotosdoalbum" href="#"><img src="imagemathumb8.jpg" width="80" height="80" alt="" border="0"><span><img src="imagemaqui8.jpg" width="50" height="50" alt="banner125x125.jpg" border="0"></span></a>
</center>
</div>

Agora o CSS...

Primeiramente, nessa parte do CSS criamos o id "album" onde podemos fazer as modificações de corpo do álbum. Na propriedade background colocamos o endereço da imagem(entre as aspas) que ficará no rodapé como uma decoração do álbum.
A imagem é essa aqui.
#album {
position:absolute;
border:0px solid #0090ff;
border-width:1px 1px 1px 1px;
padding:5px 5px 100px 5px;
width:200px;
background:url('fundoalbum.png') no-repeat bottom left;

Agora vamos personalizar nossas thumbnails, que são as mini imagens do nosso álbum,
com a classe .fotosdoalbum mais o comando reservado img podemos modificar as bordas, margens, dimensões, etc, das imagens.
.fotosdoalbum img{
border:5px solid #33ccff;
margin:3px;
width:70px;
height:70px;
}

Criamos novamente mais uma classe .fotosdoalbum mais o comando reservado img só que agora com o :hover, o :hover significa que algo irá mudar quando se colocar o mouse em cima, no caso a cor da borda das thubnails irão mudar.
.fotosdoalbum img:hover{
border:5px solid #ff66cc;
margin:3px;
width:70px;
height:70px;
}

Agora criamos mais uma classe .fotosdoalbum mais os comandos reservados span e img, essa parte do CSS é para as modificações das imagens dentro da tag <span> no HTML, que são as imagens grandes que são exibidas.
.fotosdoalbum span img{
border:5px solid #ff66cc;
margin:3px;
width:450px;
height:340px;
}

E o passo final, essa parte do CSS é uma das mais importantes, a classe .fotosdoalbum mais o comando reservado span é responsável por esconder as imagens grandes graças a propriedade visibility com o valor hidden...
.fotosdoalbum span{
visibility:hidden;
position:absolute;
}

...e só exibir as imagens grandes quando se passa o mouse em cima das thubshots, para isso criamos novamente a classe .fotosdoalbum mais o span e o comando :hover que "diz" ao browser que algo será modificado quando se passar o mouse em cima das thumbnails, a modificação será mostrar as imagens grandes para isso usamos a propriedade visibility só que agora com o valor visible.

Para modificar a direção em que a imagem será exibida, basta mudar o left para right ou vice versa:
.fotosdoalbum:hover span{
visibility:visible;
position:absolute;
top:10px;
left:220px;
}

Mas eu vou ter que redimensionar os thumshots e as imagens grandes para ficarem todas do mesmo tamaho no álbum? Vai dar um trabalhão!

Ei, não se preocupe com isso, basta adicionar as imagens do jeito que estão e elas serão automaticamente redimensionadas pelo CSS :D

E esse é o álbum de fotos completo: aqui, você pode copiar o código fonte completo para testar.

9 comentários:

  1. Olá!Adorei seu site. Bom mesmo!
    Esse tutorial sobre como criar um álbum de fotos com CSS já vai-me ser util posteriormente!;)
    Gostei mesmo daqui e pretendo visitar-lhe mais vezes...
    Agradeço também, o comentário no JeGue's Design. Se sinta a vontade sempre que quiser dar uma passadinha por lá, ok?!

    Abraço!

    ResponderExcluir
  2. @Jéssica Guedes: Esse álbum de fotos é bem útil mesmo para exibir suas fotos preferidas ;D

    Obrigado pelos elogios !

    ResponderExcluir
  3. Oi danilo, muito show esse codigo, mais tem como ao clicar a imagem ficar exibida? por que quando se tira o mouse da imagem ela some. Estou criando um blog para festas, esse codigo ia ser perfeito =)

    ResponderExcluir
  4. e aí cara adorei as suas postagens e queria que vc me ensinasse a fazer um álbum de fotos que ao clicar nela em miniatura ela crescesse, entendi? E que as imagens em miniaturas ficasse tudo na parte direita que ao clicar em umas delas ficasse maior bem no centro, mas ñ queria no formato flash, eu queria que as pessoas possa salvar elas, entendi?
    valeu
    eu espero o seu e tão aguardado retorno...
    desde já fico agradecido
    abraços
    xau

    ResponderExcluir
  5. @masinho: Obrigado, que bom que gostou ! Olha só, acho que esses links podem te ajudar a contruir o menu que você ta querendo:

    demostração do Elastic Thumbnail Menu
    como contruir o Elastic Thumbnail Menu

    espero que tenha te ajudado de alguma forma.

    ResponderExcluir
  6. O que mais gostei desse álbum é que além de mostrar as fotos de um modo elegante inibe a cópia indevida com o botão direito do mouse, pois uma vez que este é movido para fora do thumbnail a foto desaparece e a cópia torna-se impossível. Pretendo adotar este modelo para as fotos que irei postar assim que entrar em férias na faculdade e começar a construir o site de meu canil(na cinofilia costuma-se roubar fotos e fazer mau uso delas e eu procurava uma solução semelhante há tempos)

    ResponderExcluir
  7. Caro Danilo, muito bom este código. é o que eu estava precisando. Mas não consegui colocar ele como uma postagem do blogger, como faço?
    Obrigado.
    DJ Leandro

    ResponderExcluir
  8. Excelente tutorial. Bem explicativo!
    Gostaria de saber como faço para colocar textos para cada imagem ampliada?
    Gato pela atenção

    ResponderExcluir
  9. amigo ótimo tutorial, mas tipo como eu faço para mudar o album de lugar, tipo, eu queria chegar ele mais para cima, e tirar as bordas azuis q ficam do lado, que dão akele espaço entre as imagens pequenas e as grandes, queria diminuir esse espaço. ficou assim no blog http://fitnesssaude.blogspot.com/2010/12/album.html

    obrigado, fico no aguardo.

    ResponderExcluir