Galeria de imagens
Publicado em: 2006-04-4 — 28,371 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:
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
(Post ainda não avaliado)
Loading ...----------------x-x-x--------------- fim da matéria ---------------x-x-x---------------
Esta matéria foi publicada em: 2006-04-4 (Tuesday). 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.
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.
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.
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.
Legal alexandre ficou maneiro mesmo.
Parabéns.
Também, gostei da sua idéia, Alexandre, muito bom!
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…
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.
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…
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
Valew pelo codigo .
Muito Bom Mesmo , Estava Precisando Para Colocar num Site .
heheheh.
Vsc Estão De Parabems .
Aurelio .
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.
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 …
Ola.. apliquei alguns conceitos da galeria e fiz essa:
http://www.woituski.com/site/?pagina=galeria_ver&id_galeria=4
legal
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.
fico bem legal!! I Love CSS!!! uHAUHuahuA aprendi esse ano…
fiz a galeria do desafio.. pra quem quisé conferi
Clique aqui!
abraços!
Como faço para, usando seu modelo, colocar uma imagem do meu site como “capa” ?
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
[…] http://www.maujor.com/blog/2006/04/04/galeria-img/trackback […]
Excelente post, vou aplicar no meu blog, nota dez maujor.
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.
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!
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.