Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Galeria de imagens

Publicado em: 2006-04-4 — 57.919 visualizacoes         

Créditos: Esta é uma versão adaptada de um código originalmente desenvolvido por Nathan Smith e esta sendo publicada com a devida permissão do autor

O grande barato da foto digital

Publicar e compartilhar fotos na Internet vem se tornando a cada dia uma prática cada vez mais comum e difundida.
Com a popularização da fotografia digital, a tomada de fotos viu-se da noite para o dia completamente livre dos fatores que freiavam seu uso irrestrito, notadamente a necessidade de revelar as fotos com todos os riscos, custos e incovenientes inerentes ao processo.

Meu netinho e minha netinha com menos de 3 anos de idade possuem cada um deles uma foteca com mais de 4.000 fotos. Uma quantidade infinitamente maior que o acêrvo de fotos colecionadas por seus pais e avós juntos durante toda a vida, em jurásicos “Álbuns de fotografias”.

O grande barato da foto digital, é o de não impor limites à quantidade de tomadas, ressalvados o tempo de carga das baterias e a capacidade das placas de memória, não havendo mais a necessidade de se munir de rolos e mais rolos de filmes de “12, 24 ou 36 poses” e tampouco se preocupar com preço e qualidade de revelação.
Tomar fotos digitais tem risco Zero e pode-se dizer que não há limites. A maioria dos bebezinhos com 1 mês de idade já tem uma fototeca respeitável para os padrões de alguns poucos anos atrás.

Galerias de fotos

Como consequência, uma das formas de armazenar e compartilhar fotos com amigos e familiares consiste na criação de galeria de imagens, onde avós e parentes no Brasil podem navegar e acompanhar o crescimento e evolução de netos e filhos na Inglaterra.
Blogueiros do mundo todo podem compartilhar imagens via Flicker, Morguefile e tantos outros sites especializados em imagens.

E, há ainda aqueles que preferem desenvolver suas próprias galerias usando tecnologias baseadas em scripts ou em flash.
E por que não baseadas em CSS?

Isso mesmo! galeria de fotos construidas com folhas de estilo em cascata, independentes de scripts e de plugins.

Esta matéria tem por objetivo mostrar os fundamentos de construção de uma galeria de imagens baseada em folhas de estilo em cascata.
Variações em torno do código mostrado, permitirão obter galerias com layout e funcionalidades completamente diferentes desta apresentada.

Quer ver o efeito final antes de continuar a ler ? Pois não! Eis a galeria explicada nesta matéria.

A espinha dorsal da galeria

O elemento HTML que irá sustentar a galeria é o elemento ul ou seja, nossa conhecida lista não ordenada. Cada item da lista será uma foto.
A escolha de uma lista para abrigar as fotos, permite acresentar fotos à galeria simplesmente adicionando-se mais um item <li>foto</li> à lista. Além disto você terá a opção de grupar o layout como fizemos nesta matéria ou linearizá-lo verticalmente em uma “tira” de fotos

Observe o código a seguir:


<ul class="hoverbox">
 
 <li>
   <a href="#">
     <img src="foto01.jpg" alt="descrição da foto" />
     <img src="foto01.jpg" alt="descrição da foto" class="preview" />
   </a>
 </li>

<li>
...
foto2
foto2
...
</li>
...
</ul>

Como funciona

Observe que em cada item li da lista colocaremos duas vezes a mesma foto usando dois elementos img dentro do item e que ao segundo elemento foi atribuida uma classe .preview
Uma foto vai ser a miniatura (thumbnail) e a outra, a foto ampliada que aparece quando o mouse passa em cima da miniatura.

Como o navegador Internet Explorer não suporta a pseudo-classe :hover em outro elemento que não seja uma âncora (ou link), as imagens foram enclausuradas dentro de um elemento a link morto <a href="#">.

Foi atribuida uma classe .hoverbox ao elemento ul para facilitar o posicionamento da galeria na página.

Para maiores detalhes copie e cole o código fonte da página que contém a galeria no seu editor HTML e faça suas mudanças e experimentos.
Coloquei alguns comentários no código fonte que irão orientá-lo nas adaptações.

Um desafio para você compartilhar

Que tal montar uma galeria com o seguinte layout:
No canto esquerdo da tela as miniaturas aparecem em uma coluna (na vertical como se fosse uma tira) e quando o usuário passa o mouse sobre a miniatura a foto ampliada aparece à direita da miniatura. Ver esquema a seguir:

esquema do desafio

Se você encontrar a solução hospede e mande o link ou envie via email para eu publicar e compartilharmos com os colegas leitores

[ATUALIZAÇÃO]
Em 2006-04-17: O Newton Horta usou o código da galeria no seu Blog para mostrar belas fotos de Fortaleza

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2006-04-4 (terça-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2006/04/04/galeria-img/trackback no seu site.

30 comentários na matéria: “Galeria de imagens”

  1. CristianeNo Gravatar disse:

    Estou lendo o livro jQuery 2ª Ed., estou no inicio e estou gostando bastante.
    Abraço…

  2. lolNo Gravatar disse:

    Internet explorer? fora-se o ie, vo programar pro firefox e o restante do mundo que se foda, se adapte ou morra, esse é o web standart mais correto para implementação.

  3. OswaldoNo Gravatar disse:

    Olá. Eu já conhecia esta galeria intitulada Hoverbox e a uso há 1 ano. Realmente achei a galeria bem interessante e uma matéria como esta que aborda a mesma é de boa valia.
    Ainda sou muito novato em CSS e não sei como alterar muita coisa através do código mencionado. Gostaria de saber se posso por exemplo mudar o efeito mouseover da galeria. Ao passar o mouse, invés de mostrar uma preview (imagem maior) gostaria de ver a thumb (miniatura) alterada. A alteração poderia ser uma cor diferente nas bordas ou a mesma imagem em um tom diferente de cor. Estou tentando fazer isso. Se puder ajudar neste aspecto, em compensação a matéria aqui publicada poderá ficar ainda mais interessante.

  4. FilhoNo Gravatar disse:

    Oi eu não consegui aplicar esse tutorial ao meu blog
    quando coloco as os dois links da imagem (um a miniatura e a outra a previa) aparece as duas ao mesmo lado, pq?
    http://imagenspja.blogspot.com/#

  5. EmersonNo Gravatar disse:

    Muito bom, vai ser muito útil para minha página!

  6. Marcel SampaioNo Gravatar disse:

    Obrigado Maujor!!

    Estou reiniciando minha empresa de representação e com sua ajuda e de um livro consegui criar minha página comercial.
    No caso minha dificuldade éra para acrescentar um logo em meu site, que consegui através de sua explicação da foto.

    Espero um dia te conhecer, pois já virei seu fã!!!

    Abraços,

    Marcel Sampaio

  7. vitorNo Gravatar disse:

    seguindo esse seu “desafio” como seria ele mas ao inves de a imagem grande aparece no mouseover ela aparecer qd eu clicar na imagem?

  8. idevalNo Gravatar disse:

    Muito boa a galeria realmente…não encontrei nada mais dinamico e com um visual tão legal na web atualmente…eu estava usando em meus trabalhos esta galeria e tava tudo normal, até eu descobrir q no i.e. que vem com o Vista..acho q eh o i.e. 7 …a foto ampliada fica abaixo das miniaturas…alguem sabe pq?

  9. CarolNo Gravatar disse:

    Estou com a mesma duvida do amigo aí em cima, como faço pra clicar e a imagen ficar ampliada? Pq se eu tiro o mouse a imagem desaparece. Estou precisando saber, se puder me ajudar agradeco muito.

  10. LimiarNo Gravatar disse:

    Excelente todo o site. Apliquei o que aprendi aqui em http://www.pousadasnoparaiso.com.br (chato é que não funciona corretamente sob o IE5).

    Parabéns e muito grato!

  11. katyaNo Gravatar disse:

    Oi !! Amei , eu gostaria de saber se esse codigo que está no codigo-fonte se pode colar no post do meu blog ? se ñ onde eu coloco ? Eu coloquei so que as imagens ñ aparecem, ai eu colei o codigo-fonte de um blog para fazer um teste . ai apareceu tudo certinho so que a galeria apareceu onde fica o meu lay ( fora do post, apareceu la encima onde fica a imagem do meu blog ) eu fiz esse teste em um site meu de teste . amaria se me respondesse e me ajudase obrigada.

  12. SPIRITIANo Gravatar disse:

    Excelente post, vou aplicar no meu blog, nota dez maujor. 😛

  13. soltein.com.br » Blog Archive » Primeiro site webstandard disse:

    […] http://www.maujor.com/blog/2006/04/04/galeria-img/trackback […]

  14. MisaelNo Gravatar disse:

    Oi nesse exemplo a foto permanece ampliada só quando o mouse esta em cima da foto. teria jeito de colocar tipo um “onclick” nele pra pra eu clicar e a imagen ficar ampliada. independente da posicão do mouse.
    estou desemperado atraz dessa duvida. por favor se vc puder me responder…

    fico grato pela atenção

  15. CarlosNo Gravatar disse:

    Como faço para, usando seu modelo, colocar uma imagem do meu site como “capa” ?

  16. Gilherme MedeirosNo Gravatar disse:

    fico bem legal!! I Love CSS!!! uHAUHuahuA aprendi esse ano…

    fiz a galeria do desafio.. pra quem quisé conferi

    Clique aqui!

    abraços!

  17. Wladmyr Martins ( Tio_Wlad )No Gravatar disse:

    Bunitim, mas em flash fica umas trozoporcentas vezes mais bunitu. Eu que sou velho e os sobrinhos é que adoram essa velhice de html, hehheeh. “Sou de um tempo em que as geladeiras eram brancas e os telefones pretos” …Rubem Braga.

  18. JaisonNo Gravatar disse:

    Ola.. apliquei alguns conceitos da galeria e fiz essa:
    http://www.woituski.com/site/?pagina=galeria_ver&id_galeria=4

    legal

  19. ronald salesNo Gravatar disse:

    bem, eu criei um site ,mas quendo ele foi ao ar , a galeria de foto não abriu , eu criei a galeria no flash , queria saber o motivo que levou isso, o site foi todo criado no site ,mas a galeria não apareceu …

  20. BragaNo Gravatar disse:

    Muito fixe. Ainda bem k ha gajos k partilham o conhecimento.
    Kem esta ligado a esta area e n tem dinheiro pra comprar livros de CSS, JavaScript, Html, Xml, Flash, Fireworks,ASP, etc…Pode aprender em foruns como este com gente k sabe
    Obrigado povo.

  21. Aurelio Candido .No Gravatar disse:

    Valew pelo codigo .
    Muito Bom Mesmo , Estava Precisando Para Colocar num Site .
    heheheh.
    Vsc Estão De Parabems .

    Aurelio .

  22. Marcos RobertoNo Gravatar disse:

    Muito bacana todos esses exemplos, estou comecando agora e qria me aprofundar mais . Qro desenvolver um site de galeria de fotos tipo, fotos em eventos. Mais se fizer so com html o site nao vai ficar pesado? vai demorar para carregar? Podem me dar uma ajuda?
    Obrigado
    Marcos Roberto
    mrb_santos@ig.com.br

  23. Viche disse:

    VICHE – O Retorno I

    É duro esquentar as turbinas após uns dias de descanso na bela e prazeirosa cidade litorânea de Fortaleza-CE. Mas a labuta me chama e retorno com a exposição de uma galeria de fotos de alguns pontos turísticos e de pequenos exemplos de caracte…

  24. Newton de Góes HortaNo Gravatar disse:

    Gostei e apliquei o código adaptado pelo Maurício, com algumas alterações nas dimensões das miniaturas e fotos (:hover).

    A galeria publicada pode ser vista aqui.

    Valeu Maurício, o post veio na hora certa.

  25. Jaison NiehuesNo Gravatar disse:

    Olá… estava pensando em bolar alguma maneira interessante de rolar as miniaturas (do lado esquerdo do proposta desafio)…
    Alguma rolagem suave.. como aquelas de flash para dar uma estilizada mais legal… Vou ver se faço hoje essa galeria proposta e depois passo o link para voces darem uma olhada…

  26. Francisco dos SantosNo Gravatar disse:

    Também, gostei da sua idéia, Alexandre, muito bom!

  27. Lucas AlvesNo Gravatar disse:

    Legal alexandre ficou maneiro mesmo.
    Parabéns.

  28. Alexandre Gomes GaigalasNo Gravatar disse:

    Maujor, re-escrevi o código da galeria com algumas modificações…

    Usei a solução para o problema do IE:hover proposta nessa página: http://www.xs4all.nl/~peterned/csshover.html

    E adicionei uma funçãozinha a mais.. quando você clica e segura na minuatura, ganha um zoom extra. Tudo via css puro.

    Para ver a galeria que eu fiz, explore os arquivos HTML desse diretório:
    http://www.gaigalas.net/photopreview
    O behavior para IE que utilizei também se encontra aí.

    Obs: Tanto a galeria do Nathan quanto a que eu re-escrevi não funcionam no IE5, na dele, a foto se amplia “pra sempre”, não voltando ao original. Na minha, o erro é maior, a página se desloca inteira para baixo quando passo o mouse em algum item. Pretendo corrigir isso em breve.

  29. Lucas AlvesNo Gravatar disse:

    Caramba Maurício muito bom mesmo o artigo.
    Tava lendo na INFO de Abril dagomir Marquizi sobre scanear fotos antigas e passar para midias, mas o que impede de gerar uma galeria de fotos com fotos antigas e disponibilizar na net pros parentes ver?
    Cara leio seu blog todos os dias e estou lendo todo o conteudo do seu site você esta de parabéns.

  30. farley rangelNo Gravatar disse:

    Maurício, muito bem-bolado o código! Estava realmente fazendo menção a isso nesses dias: Preciso de um album de fotos com um código hospedado por mim. Aí está a solução. Com meu conhecimento limitado, vou à procura de aceitar seu convite e criar a alternativa proposta de layout. Abraço.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo