Assinar
Galeria de Imagens em CSS Puro
Esses dias lembrei de uma galeria de fotos bem dinâmica que fiz em CSS Puro. Funcionou em todos os navegadores na época.
O mais legal dela é a abordagem minimalística do CSS. Não uso uma classe por foto, tudo é baseado na tag img e pra ativar a galeria basta adicionar uma única class="photopreview" na lista não-ordenada que contém as imagens.
Fiz duas versões, aqui e aqui. As fotos (e um pouco de inspiração) eu roubei da galeria que o Maujor fez.
Essa galeria também é legal pra mostrar como os navegadores implementam diferente cada coisa no CSS. No Firefox por exemplo você pode clicar e arrastar sobre as fotos (segunda galeria) que a propriedade active se mantém. Já nos demais, acontecem coisas estranhas.
Provavelmente essa galeria é muito menor do que qualquer uma feita em Flash ou Ajax. Não tem efeitos de transparência nem transição, mas é elegante e funcional.
Com um pouco mais de trabalho dá pra colocar miniaturas reais nela (as que usei são apenas redimensionamentos) e zoom real também. Preferi evitar a fadiga e deixar o código simples, a idéia da galeria é apenas transmitir uma….. idéia.
29/3/2007 às 6:47 am
Ficou muito bom. A primeira achei mais interessante mas as duas ficaram ótimas. Realmente é muito mais leve do que qualquer galeria de imagens existentes por ai, mas é uma pena que ainda tenhamos que sofrer as conseqüências da falta de padronização dos navegadores.
Abraços.
29/3/2007 às 9:26 am
conheço isso de algum lugar… =P… rs
http://www.maujor.com/blog/2006/04/04/galeria-img/
29/3/2007 às 10:47 am
William, dá uma lida nesse comentário:
http://www.maujor.com/blog/2006/04/04/galeria-img/#comment-152
Me inspirei na galeria do Maujor sim
Só que reescrevi todo o código (que ficou mais limpo, com menos classes css) e mais recursos (zoom).
30/3/2007 às 10:29 am
Eu sei, inclusive foi o Maujor que lançou o desafio de melhorar o código, citei apenas pq acredito eu que seria bom mostrar uma referencia sobre o assunto… melhorado ou não a idéia inicial foi dele não? links servem para isso!
13/5/2008 às 4:22 pm
Cara! ficou muito massa eu to aplicando no meu site e sei que vai ficar da hora! valeu pelo post!
20/5/2008 às 12:26 pm
brother eu posso estar usando sua ideia. eu estou vamos dize começando
fiz o curso mas não aprendi
valeu at+++
20/5/2008 às 12:27 pm
assim sem esquecer ficou muito massa
22/10/2008 às 8:04 am
olá,
estou usando 12 imagens de tamnaho 350 x 175, depois dou o zoom para 750×375, o que acontece que as 4 primeiras consigo vizualizar no browser as outras, quando desço a página, elas aparecem fora da tela… como faço para ficar sempre no ventro da tela, numa posição fixa… para todas as imagens?
desde já agradeço
16/2/2009 às 12:06 pm
oi motei uma galeria de fotos mais quando mando para meu servidor as images não aparecem http://www.estoratiaimperial.com.br/galeria3.htm se poder meu ajudar para saber onde esta o erro obrigado.
16/2/2009 às 12:07 pm
http://www.estofariaimperial.com.br/galeria3.htm end correto
8/7/2009 às 11:34 am
Gostoei muito dessa galeria. Havia visto uma feita em Java Script, porém como ainda estou “engatinhando” em Java prefiro essa feita somente no CSS rsrs… Vou estar estudando ela e se der implementando algumas coisas.
Obrigado
Anderson
24/11/2009 às 3:43 pm
muito legal essas galerias!!!!!!
11/2/2010 às 2:28 pm
Jovem, estou construindo o meu site e há muito tempo que venho procurando essas informações e sem querer me deparei com a sua bondade. Já estou testando e tá ficando legal, assim que ficar pronto mando o linkdo site para você.
Obrigado por colocar essas informações preciosas para nós leigos.
Valeu
Alberto – SSa-Ba
4/6/2011 às 2:50 am
Velho ficou muito legal, e o melhor, super leve.