Um efeito realmente espectacular para apresentar a sua galeria de imagens.
Coloque o seu rato sobre uma das imagens para a poder ver em pormenor.
Como podem obter este efeito:
1. Façam upload das vossas imagens e dos respectivos thumbnails para um servidor qualquer.
Os thumbnails são aquelas imagens miniatura da imagem normal que aparece no post e que, quando se passa o rato sobre elas, fazem emergir a imagem original ao lado.
Qualquer editor de imagem (photoshop, irfanview, paint shop pro, etc.) permite criar thumbnails a partir de imagens.
Mesmo na internet será fácil encontrar serviços que vos fazem esta tarefa num piscar de olhos. É só googlar um pouco.
Para fazer upload de imagens e de ficheiros para servidores, também podem googlar um pouco e certamente encontrarão servidores gratuitos que armazenem os vossos ficheiros e imagens.
2. Criem uma página html com o seguinte código:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>galeria1</title>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="main.js"></script>
<style>
body {
margin:0;
padding:40px;
background:#fff;
font:80% Arial, Helvetica, sans-serif;
color:#555;
line-height:180%;
}
h1{
font-size:180%;
font-weight:normal;
color:#555;
}
h2{
clear:both;
font-size:160%;
font-weight:normal;
color:#555;
margin:0;
padding:.5em 0;
}
a{
text-decoration:none;
color:#f30; }
p{
clear:both;
margin:0;
padding:.5em 0;
}
pre{
display:block;
font:100% "Courier New", Courier, monospace;
padding:10px;
border:1px solid #bae2f0;
background:#e3f4f9; margin:.5em 0;
overflow:auto;
width:800px;
}
img{border:none;}
ul,li{
margin:0;
padding:0;
}
li{
list-style:none;
float:left;
display:inline;
margin-right:10px;
}
/* */
#preview{
position:absolute;
border:1px solid #ccc;
background:#333;
padding:5px;
display:none;
color:#fff;
}
/* */
</style>
</head>
<body>
<a href="http://www.profelectro.info/Uploads/luisj/10G_2010_1.jpg"
class="preview" title="Edilson"><img
src="http://www.profelectro.info/Uploads/luisj/10G_2010_1s.jpg"
alt="Edilson"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/10G_2010_2.jpg"
class="preview" title="Helder+Igor"><img
src="http://www.profelectro.info/Uploads/luisj/10G_2010_2s.jpg"
alt="Helder+Igor"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_1.jpg"
class="preview" title="Joao"><img
src="http://www.profelectro.info/Uploads/luisj/11L_2010_1s.jpg"
alt="Joao"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_2.jpg"
class="preview" title="Como não se deve trabalhar"><img
src="http://www.profelectro.info/Uploads/luisj/11L_2010_2s.jpg"
alt="Como não se deve trabalhar"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_3.jpg"
class="preview" title="Em actividade"><img
src="http://www.profelectro.info/Uploads/luisj/11L_2010_3s.jpg"
alt="Em actividade"></a><br>
<a href="http://www.profelectro.info/Uploads/luisj/11L_2010_4.jpg"
class="preview" title="Em actividade"><img
src="http://www.profelectro.info/Uploads/luisj/11L_2010_4s.jpg"
alt="Em actividade"></a>
</body>
</html>
É óbvio que na parte inferior do código mostrado, devem substituir os endereços onde se encontram alojadas as minhas imagens e o respectivo nome e anotações pelos das vossas.
Usei o prefixo s para os thumbnails, para as poder distinguir das imagens propriamente ditas.
3. Façam o upload deste ficheiro html que criaram para um servidor qualquer (ver acima), bem como dos ficheiros "jquery.js" e "main.js"
Estes ficheiros podem ser descarregados aqui:
jquery.js
main.js
4. Agora é só colocarem no vosso post Blogger o seguinte código:
<iframe src="http://www.profelectro.info/galeria1.html" height="800" width="100%"></iframe>
Sendo que devem alterar o URL para o URL onde colocaram o vosso ficheiro html anteriormente criado.
Caso haja algum problema, coloquem-no nos comentários, que eu ajudarei no que puder e souber.
Boa Sorte!
envie-me um comentário via
