Galeria de imagens
Publicado em: 2006-04-4 — 67.896 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
Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Visite o site dos livros.
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 https://www.maujor.com/blog/2006/04/04/galeria-img/trackback no seu site.
Estou lendo o livro jQuery 2ª Ed., estou no inicio e estou gostando bastante.
Abraço…
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.
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.
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/#
Muito bom, vai ser muito útil para minha página!
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
seguindo esse seu “desafio” como seria ele mas ao inves de a imagem grande aparece no mouseover ela aparecer qd eu clicar na imagem?
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?
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.
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!
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 post, vou aplicar no meu blog, nota dez maujor. 😛
[…] http://www.maujor.com/blog/2006/04/04/galeria-img/trackback […]
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
Como faço para, usando seu modelo, colocar uma imagem do meu site como “capa” ?
fico bem legal!! I Love CSS!!! uHAUHuahuA aprendi esse ano…
fiz a galeria do desafio.. pra quem quisé conferi
Clique aqui!
abraços!
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.
Ola.. apliquei alguns conceitos da galeria e fiz essa:
http://www.woituski.com/site/?pagina=galeria_ver&id_galeria=4
legal
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 …
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.
Valew pelo codigo .
Muito Bom Mesmo , Estava Precisando Para Colocar num Site .
heheheh.
Vsc Estão De Parabems .
Aurelio .
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
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…
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.
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…
Também, gostei da sua idéia, Alexandre, muito bom!
Legal alexandre ficou maneiro mesmo.
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.
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.
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.