Home Programas Revistas Ebooks Videos Online Ufologia
2008-06-30

Saiba colocar uma Galeria De Imagens no seu blog  

Crie uma galeria de imagens baseada em CSS, que mostra versões maiores das imagens a partir de thumbnail's, quando o mouse passar sobre elas. Um subtítulo pode ser adicionado à imagem ampliada. Além disso, é possível modificar a largura final da imagem apresentada. Muito bom para apresentar em uma postagem no seu blog com várias imagens, e que você quer que não ocupe muito espaço. A galeria é compatível com o IE6 , Firefox, Ópera 8.

Veja exemplo:Passe o mouse nas imagens abaixo.




Como colocar em seu blog:
1º passo:Copie e cole esse código abaixo, logo após da tag <HEAD>
do seu template, e depois salve.
(O tamanho das imagens ampliadas são ajustadas nesse código. Mude como quiser, só respeitando o tamanho da sua página de postagem)

.gallerycontainer{
position: relative;
/*Add a height attribute and set to largest image's height to prevent overlaying*/
}

.thumbnail img{
border: 1px solid white;
margin: 0 5px 5px 0;
}

.thumbnail:hover{
background-color: transparent;
}

.thumbnail:hover img{
border: 1px solid blue;
}

.thumbnail span{ /*CSS for enlarged image*/
position: absolute;
background-color: lightyellow;
padding: 5px;
left: -1000px;
border: 1px dashed gray;
visibility: hidden;
color: black;
text-decoration: none;
}

.thumbnail span img{ /*CSS for enlarged image*/
border-width: 0;
padding: 2px;
}

.thumbnail:hover span{ /*CSS for enlarged image*/
visibility: visible;
top: 0;
left: 230px; /*position where enlarged image should offset horizontally */
z-index: 50;
}

</style>

2º passo:
Copie e cole esse código abaixo, onde você quer que as imagens apareçam em seu blog. Em um post, na sidebar, cabeçalho, etc. Apenas mudando o caminho das imagens.

<div class="gallerycontainer">

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="66px" border="0" /><span><img src="URL DA IMAGEM" /><br />TEXTO QUE QUISER</span></a>

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="66px" border="0" /><span><img src="URL DA IMAGEM" /><br />TEXTO AQUI</span></a>

<br />

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="media/sushi2_thumb.jpg" width="100px" height="75px" border="0" /><span><img src="URL DA IMAGEM" /><br />TEXTO QUE QUISER</span></a>

<a class="thumbnail" href="URL DA IMAGEM#thumb"><img src="URL DA IMAGEM" width="100px" height="70px" border="0" /><span><img src="URL DA IMAGEM" /><br />TEXTO QUE QUISER</span></a>

<br />

<a class="thumbnail" href="URL DA IMAGEM#thumb">TEXTO QUE QUISER<span><img src="media/dynamicdrive.gif" /><br />TEXTO QUE QUISER</span></a>

<br />

<a class="thumbnail" href="URL DA IMAGEM#thumb">TEXTO QUE QUISER<span><img src="URL DA IMAGEM" /><br />TEXTO</span></a>
</div>


Sua galeria de imagens está pronta pra ser usada. Qualquer dúvida deixe um comentário.




Bookmark este post:
Ma.gnolia DiggIt! Del.icio.us Blinklist Yahoo Furl Technorati Simpy Spurl Reddit Google

VEJA TAMBEM



Postar um comentário

Por favor deixe seu email pra futuro contato. Comentários sem email válido não serão respondidos!