Essa é uma galeria é Hoverbox Image Gallery, desenvolvida pelo Nathan Smith, e é uma idéia muito legal para se fazer uma galeria de fotos sem usar Flash ou Javascript.
É bem simples de fazer e funciona em todos os browsers. Veja o exemplo:
Para fazer igual, é só utilizar a mesma estrutura do html:
<div id="galeria"> <ul class="hoverbook> <li><img src="#" alt="#" /><img src="#" alt="#" class="preview" /></a></li> </ul> </div>
A mesma imagem precisa ser invocada duas vezes (uma sem class definido, e outra com a class “preview” e para cada imagem da galeria, é só acrescentar um item li na lista.
Já o CSS, vai ficar assim:
#galeria{width:450px;} .hoverbox{cursor:default; list-style:none;} .hoverbox a{cursor:default; position:relative;} .hoverbox a .preview{display:none;} .hoverbox a:hover{font-size:100%; z-index:1;} .hoverbox a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;} .hoverbox img{background:#fff; border-color:#aaa #ccc #ddd #bbb; border-style:solid; border-width:1px; color:inherit; padding:2px; vertical-align:top; width:80px; height:50px;} .hoverbox li{background:#eee; border-color:#ddd #bbb #aaa #ccc; border-style:solid; border-width:1px; color:inherit; display:inline; float:left; margin:3px; padding:5px; position:static;} .hoverbox .preview {border-color:#000; width:200px; height:150px;}
Em #galeria, é só definir a largura da galeria, enquanto o tamanho do thumb você configura em .hoverbox img . A largura da imagem quando aberta, fica na propriedade .hoverbox .preview mas a dica é se for aumentar o tamanho do preview, não se esqueça de aumentar o padding / margin entre os thumbs, do contrário a imagem ampliada vai obstruir o acesso à outras imagens da galeria.
Clique aqui para baixar o exemplo da Hoverbook Image Gallery.
Cara, que legal. Acho muito show de bola essas idéias, coisas muito simples, mas que não passa pela nossa cabeça.
Curti.
Aquele abraço.
Muito bom, curti cara! Vou usá-la no meu projeto.
Bem legal o site também. Sucesso.
Como faço para colocar essa galeria em um post do blogger? ela é ótima, é o que eu estou procurando a um tempão…
Se puder me ajudar, te agraço!
Abraço!
mano num consigo faze isso no meu
Existe algumas correções a fazer no código postado.
Em:
O certo é “hoverbox”>
E em:
O correto é:
Funcionou muito bem, ótima galeria.
Olá amigo como faço para criar uma galeria dessa no blogger? de ja sou muito grato e parabens.
Boa, mas deu um erro comigo, pois preciso colocar a galeria dentro de uma página php e fazer um include, nesse momento o css perde a validade e não funciona, como posso resolver esse problema?
grato!
Cara muito bacana…. me ajudou bastante!!!!!!!!