Setembro 03, 2010, 02:22:58

Autor Tópico: [Hi5-Tutorial] Galerias de imagens  (Lida 47246 vezes)

0 Membros e 1 Visitante estão a ver este tópico.

  • *
  • Mensagens: 23.055
  • 342 créditos ( + )
  • Bons Posts: 211
  • Sexo: Masculino
    • Selminho Hi5
  • Referimentos: 361
[Hi5-Tutorial] Galerias de imagens
« em: Fevereiro 24, 2009, 19:29:22 »
Primeira de 4 Galerias




Parte css:

Código: [Seleccione]
<style type="text/css">
<!-- www.submundos.com/forum -->
.PunkecasG { width:680px; margin:0 auto; text-align:left;}
.PunkecasIM { background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg') center no-repeat;
width:500px; height:220px; position:relative; top:-1px;float:right; border:1px solid #FF0000;}
ul.PunkecasF {position:relative;list-style:none;  width:162px;padding:1px;background:#FF000;margin:0; padding:0; }
.PunkecasF:after {display: block;content: ".";height: 0;font-size:0; visibility: hidden;clear: both;}
ul.PunkecasF li {width:75px;height:50px;float:left; border:1px solid #FF0000;margin:1px; }
ul.PunkecasF li img {border:none; width:75px;height:50px;}
ul.PunkecasF li span img {border:none;width:500px;height:220px;}
ul.PunkecasF a {display: block;}
ul.PunkecasF a span {display: none;}
ul.PunkecasF a:hover span {display: block;position: absolute; top:-5px; left: 177px; background:#FFFFFF;border:1px solid #FF0000;}
</style>

Parte html

Código: [Seleccione]
<div class="PunkecasG"><div class="PunkecasIM"></div><ul class="PunkecasF">
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal1.jpg" alt="Descrição 1" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal1.jpg" alt="Descrição 1"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal2.jpg" alt="Descrição 2" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal2.jpg" alt="Descrição 2"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal3.jpg" alt="Descrição 3" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal3.jpg" alt="Descrição 3"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal4.jpg" alt="Descrição 4" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal4.jpg" alt="Descrição 4"  /></span></a></li>
   
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal5.jpg" alt="Descrição 5" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal5.jpg" alt="Descrição 5"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal6.jpg" alt="Descrição 6" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal6.jpg" alt="Descrição 6"  /></span></a></li>
 
<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal7.jpg" alt="Descrição 7" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal7.jpg" alt="Descrição 7"  /></span></a></li>

<li><a href="#"><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal8.jpg" alt="Descrição 8" /><span><img src="http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGal8.jpg" alt="Descrição 8"  /></span></a></li></ul></div>

Nota: Para alterar imagem inicial --> ir á parte css e mudar o url http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg para o que querem, as outras são de caras.
« Última modificação: Março 12, 2009, 12:42:00 por Riey »
Quando a boca não consegue dizer o que o coração sente o melhor é deixar a boca sentir o que o coração diz (A)


  • *
  • Mensagens: 23.055
  • 342 créditos ( + )
  • Bons Posts: 211
  • Sexo: Masculino
    • Selminho Hi5
  • Referimentos: 361
Re: TOPICO DE GALERIAS
« Responder #1 em: Fevereiro 24, 2009, 19:29:26 »
Segunda de 4 Galerias


IMAGEM TEMPORARIAMANTE INDISPONÍVEL.

Parte css:

Código: [Seleccione]
<style type="text/css">
<!-- www.submundos.com/forum -->
.a, .a:visited {color:transparent;}
#Submundos {position:relative; width:450px; height:620px; background:transparent; border:4px dashed #FFFFFF; margin:5px auto; background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg')}
a.Submundosg, a.Submundosg:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000000; width:53px; height:53px; float:left; margin:5px 9px; position:relative; cursor:crosshair;filter:Alpha(Opacity=50)}
a.Punkecasa {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasb {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasc {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasd {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecase {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasf {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasg {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecash {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasi {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasj {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecask {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasl {background:url(URL DA IMAGEM DO BOTÃO);}
a.Submundosg span {visibility:hidden; display:block; position:absolute; width:420px; height:450px; top:80px; left:9px; color:#ffffff; background-image:url(URL DO BACKGOUND DAS IMAGENS GRANDES); text-align:center; border:1px solid #ffffff; font-family:tahoma,letter-spacing:1px; cursor:default;background-color:#006666}
a.Punkecas span {left:-1px; top:130px;}
a.Punkecasb span {left:-74px; top:130px;}
a.Punkecasc span {left:-147px; top:130px;}
a.Punkecasd span {left:-220px; top:130px;}
a.Punkecase span {left:-293px; top:130px;}
a.Punkecasf span {left:-366px; top:130px;}
a.Punkecasg span {left:-1px; top:65px;}
a.Punkecash span {left:-74px; top:65px;}
a.Punkecasi span {left:-147px; top:65px;}
a.Punkecasj span {left:-220px; top:65px;}
a.Punkecask span {left:-293px; top:65px;}
a.Punkecasl span {left:-366px; top:65px;}
a.Submundosg:hover {white-space:normal; border:1px solid #fff; z-index:100;filter:none}
a.Submundosg:hover span {visibility:visible; z-index:100;filter:none}
a.Submundosg:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;filter:none}
a.Submundosg:active, a.Submundosg:focus {border:1px dotted #ffff00; z-index:10;filter:none}
a.Submundosg:active span, a.Submundosg:focus span {visibility:visible; z-index:10;display:block}
a.Submundosg:active span img, a.Submundosg:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>

Parte html:

Código: [Seleccione]
<div id="Submundos">
<a class="Submundosg Punkecasa" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasb" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasc" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecase" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasf" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasg" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecash" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasi" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasj" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecask" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasl" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
</div>

Nota: Na parte html da galeria onde está " href="#" " podem adicionar ai o destino url, onde está "alt="" " podem adicionar uma descrição que aparece quando se coloca o cursor por cima da imagem grande exemplo " alt="Submundos" " onde diz " title="" " podem adicionar o titulo da imagem,l exemplo: " title="Punkecas" "
« Última modificação: Fevereiro 25, 2009, 17:25:08 por PunkeCas ® »
Quando a boca não consegue dizer o que o coração sente o melhor é deixar a boca sentir o que o coração diz (A)


Offline psg

  • Membro
  • *
  • Mensagens: 2.783
  • 3308 créditos ( + )
  • Bons Posts: 34
  • Sexo: Masculino
  • Referimentos: 1
Galeria horizontal
« Responder #2 em: Fevereiro 24, 2009, 20:35:01 »
Galeria 1 ( horizontal)




Parte em CSS:
Código: [Seleccione]


 <style type='text/css'>
#pedrog1{width:1000px; height:200px; border: 1px dashed #0000CC;} 
.pedrog2{cursor:default; list-style:none; background:#000000;}   
.pedrog2 a{cursor:default; position:relative;}   
.pedrog2 a .preview{display:none;}   
.pedrog2 a:hover{font-size:100%; z-index:1;}   
.pedrog2 a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}   
.pedrog2 img{background:#000000; vertical-align:top; width:80px; height:80px; filter:alpha(opacity=50); border:none;}   
.pedrog2 li{background:#000000;  display:inline; float:left; margin:3px; padding:5px; position:static;}   
.pedrog2 .preview {width:200px; height:150px; filter:alpha(opacity=100)}  </style>



Parte em HTML:
Código: [Seleccione]

<div id='pedrog1'><br/><br/><br/>
<ul class='pedrog2'>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
</a>
</li>
</ul>
</div>




« Última modificação: Fevereiro 25, 2009, 16:41:01 por pedrol96 »
You are not your job. You are not how much you have in the bank. You are not the contents of your wallet. You are not your fucking Khakis. You are not a beautiful and unique snowflake. You are the all-singing, all-dancing crap of the world. Brad Pitt em Fight Club

Offline psg

  • Membro
  • *
  • Mensagens: 2.783
  • 3308 créditos ( + )
  • Bons Posts: 34
  • Sexo: Masculino
  • Referimentos: 1
Re: TOPICO DE GALERIAS
« Responder #3 em: Fevereiro 24, 2009, 20:43:20 »
Galeria 1 ( vertical)




Parte em CSS:
Código: [Seleccione]


 <style type='text/css'>
#pedrog1{width:210px; height:1005px; border: 1px dashed #0000CC;} 
.pedrog2{cursor:default; list-style:none; background:#000000;}   
.pedrog2 a{cursor:default; position:relative;}   
.pedrog2 a .preview{display:none;}   
.pedrog2 a:hover{font-size:100%; z-index:1;}   
.pedrog2 a:hover .preview{display:block; position:absolute; top:-33px; left:-45px; z-index:1;}   
.pedrog2 img{background:#000000; vertical-align:top; width:80px; height:80px; filter:alpha(opacity=50); border:none;}   
.pedrog2 li{background:#000000;  display:inline; float:left; margin:3px; padding:5px; position:static;}   
.pedrog2 .preview {width:200px; height:150px; filter:alpha(opacity=100)}  </style>



Parte em HTML:
Código: [Seleccione]

<div id='pedrog1'><br/><br/><br/>
<ul class='pedrog2'>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/01.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/02.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/03.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/04.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/05.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/06.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/07.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/08.jpg'/>
</a>
</li>
<li>
<a href='#'>
<img alt='descrição' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
<img alt='descrição' class='preview' src='http://www.tidbits.com.br/download/_images/img/09.jpg'/>
</a>
</li>
</ul>
</div>





« Última modificação: Fevereiro 25, 2009, 16:53:47 por pedrol96 »
You are not your job. You are not how much you have in the bank. You are not the contents of your wallet. You are not your fucking Khakis. You are not a beautiful and unique snowflake. You are the all-singing, all-dancing crap of the world. Brad Pitt em Fight Club

  • Membro
  • *
  • Mensagens: 145
  • 57 créditos ( + )
  • Bons Posts: 1
  • Sexo: Masculino
    • HI5
  • Referimentos: 0
Re: [Hi5 Tutorial] Galerias de imagens
« Responder #4 em: Fevereiro 25, 2009, 15:44:44 »

CSS:
Código: [Seleccione]
<style type="text/css">
#Mand { padding:0; margin:0 auto; list-style-type:none; overflow:hidden; width:495px; height:240px; border:1px solid #888; background:#fff url(http://img514.imageshack.us/img514/9868/fundogaleriaig5.gif);}

#Mand li { float:left;}

#Mand li a { display:block; height:240px; width:28px; overflow:hidden; float:left; text-decoration:none; border-right:1px solid #fff; cursor:default;}

#Mand li a img {border:0;}

#Mand li a:hover { background:#eee; width:320px;}
</style>

HTML:
Código: [Seleccione]
<ul id="Mand">
<li>
<a href="# "><img src="http://www.4winmobile.com/tg/T830/01-320x240.jpg" width="320" height="240" title="Jardim" /></a></li>

<li>
<a href="# "><img src="http://www.fvac.ca/images/320x240.jpg" width="320" height="240" title="Deserto" /></a></li>

<li>
<a href="# "><img src="http://nnmonitors.com/imgs/video/SampleVideo(320x240).jpg" width="320" height="240" title="Smáfro" /></a></li>

<li>
<a href="# "><img src="http://tribulandia.blogspot.com/Wild%20Animal%20180%20(320%20x%20240).jpg" width="320" height="240" title="Jacares" /></a></li>

<li>
<a href="# "><img src="http://ozeascuriosidades.files.wordpress.com/2007/09/animais002.jpg" width="320" height="240"  title="Lobo" /></a></li>

<li><a href="# "><img src="http://br.geocities.com/chapecoutil/imagens/animais.jpg" width="320" height="240" title="Dog" /></a></li>

<li><a href="# "><img src="http://pics.livejournal.com/missiku/pic/00031598/s320x240" width="320" height="240" title="Cat" /></a></li>
</ul>
« Última modificação: Fevereiro 25, 2009, 15:47:19 por mand »

Offline psg

  • Membro
  • *
  • Mensagens: 2.783
  • 3308 créditos ( + )
  • Bons Posts: 34
  • Sexo: Masculino
  • Referimentos: 1
Galeria 2
« Responder #5 em: Fevereiro 25, 2009, 15:47:14 »
Galeria 2




Parte em CSS:
Código: [Seleccione]
<style type='text/css'>


#container {position:relative; width:680px; height:550px; background:#009900; border:1px solid #000; margin:5px auto; font-family:verdana, arial, sans-serif; font-size:12px;}

#container a.pics {float:left; margin:7px 21px; display:inline; color:#000; text-decoration:none; border:0px dashed #000; width:115px; height:100px; cursor:default; filter:gray;}
#container a.pics img.thumb {display:block; border:0px;}
#container a.pics span {display:none; border:0; width:580px; background:#006600 ; border:0px solid #669900 ; text-align:center; filter:none;}
#container a.pics span img {margin:10px auto; border:0px solid #009900; filter:none;}

#container a.pics:hover {white-space:normal; border:0px; filter:none;}
#container a.pics:hover span {display:block; position:absolute; left:9px; top:300px; z-index:10; height:235px;}

#container a.pics:active {border:0px solid #fc0;}
#container a.pics:active span {display:block; position:absolute; left:9px; top:192px; z-index:5; height:500px;}

#container a.pics:focus {border:0px solid #fc0; outline:0;}
#container a.pics:focus span {display:block; position:absolute; left:9px; top:200px; z-index:5; outline:0;}

#container span.info {clear:left; display:block; text-align:center; line-height:20px; margin:0; padding:200px 0 0 0; width:600px; text-align:center; color:#eee; z-index:1; font-size:13px; font-weight:bold;}
</style>



Parte em HTML:
Código: [Seleccione]

<div id='container'>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/1-2.jpg?t=1235562792'/>
<span><img alt='pedrog96 1' src='http://i400.photobucket.com/albums/pp85/pedrol96/1x.jpg' title='pedrog96 1 big'/><br/>pedrog96 1</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://s400.photobucket.com/albums/pp85/pedrol96/th_2.jpg'/>
<span><img alt='pedrog96 2' src='http://i400.photobucket.com/albums/pp85/pedrol96/2x.jpg?t=1235563294' title='pedrog96 2 big'/><br/>pedrog96 2</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/3.jpg?t=1235564491'/>
<span><img alt='pedrog 3' src='http://i400.photobucket.com/albums/pp85/pedrol96/3x.jpg?t=1235564525' title='pedrog96 3 big'/><br/>pedrog96 3</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/4.jpg?t=1235566752'/>
<span><img alt='pedrog 4' src='http://i400.photobucket.com/albums/pp85/pedrol96/4x.jpg?t=1235566811' title='pedrog96 4 big'/><br/>pedrog96 4</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/5.jpg?t=1235568208'/>
<span><img alt='pedrog 5' src='http://i400.photobucket.com/albums/pp85/pedrol96/5x.jpg?t=1235568210' title='pedrog96 5 big'/><br/>pedrog96 5</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/6.jpg?t=1235568375'/>
<span><img alt='pedrog 6' src='http://i400.photobucket.com/albums/pp85/pedrol96/6x.jpg?t=1235568376' title='pedrog96 6 big'/><br/>pedrog96 6</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/7.jpg?t=1235568417'/>
<span><img alt='pedrog 7' src='http://i400.photobucket.com/albums/pp85/pedrol96/7x.jpg?t=1235568418' title='pedrog96 7 big'/><br/>pedrog96 7</span>
</a>
<a class='pics' href='#'><img alt='' class='thumb' src='http://i400.photobucket.com/albums/pp85/pedrol96/8.jpg?t=1235568519'/>
<span><img alt='pedrog 8' src='http://i400.photobucket.com/albums/pp85/pedrol96/8x.jpg?t=1235568522' title='pedrog96 8 big'/><br/>pedrog96 8</span>
</a>



<span class='info'><img src='http://s400.photobucket.com/albums/pp85/pedrol96/th_submundos.jpg'/><br/>
optimizado por Pedrog96</span>
</div>



Ainda tem muitas coisas imperfeitas, que serão aprefeiçoadas brevemente :D

Nota: Para a galeria ficar com mais de oito imagens teriam qe alterar várias medidas de altura dos objectos.

« Última modificação: Março 03, 2009, 16:24:36 por pedrol96 »
You are not your job. You are not how much you have in the bank. You are not the contents of your wallet. You are not your fucking Khakis. You are not a beautiful and unique snowflake. You are the all-singing, all-dancing crap of the world. Brad Pitt em Fight Club

  • *
  • Mensagens: 23.055
  • 342 créditos ( + )
  • Bons Posts: 211
  • Sexo: Masculino
    • Selminho Hi5
  • Referimentos: 361
Re: [Hi5 Tutorial] Galerias de imagens
« Responder #6 em: Fevereiro 25, 2009, 17:00:47 »
...
« Última modificação: Fevereiro 25, 2009, 17:15:42 por PunkeCas ® »
Quando a boca não consegue dizer o que o coração sente o melhor é deixar a boca sentir o que o coração diz (A)


Offline psg

  • Membro
  • *
  • Mensagens: 2.783
  • 3308 créditos ( + )
  • Bons Posts: 34
  • Sexo: Masculino
  • Referimentos: 1
Galeria 3
« Responder #7 em: Fevereiro 25, 2009, 18:37:03 »
Galeria 3




fonte: http://project47.viscountbox.com/galeria-de-imagens-com-css/

Parte em CSS:
Código: [Seleccione]

<style type='text/css'>
* {
margin: 0;
padding: 0;
}
HTML, body {
font: 11px "Trebuchet MS", Arial, sans-serif;
}
h1 {
margin-bottom: 5px;
font-size: 1.4em;
text-transform: uppercase;
}
img {
border: 2px solid #666;
}
#galeria {
position: relative;
width: 304px;
margin: 1em auto;
padding: 5px;
background: #cacaca;
}
#galeria span.legenda {
display: block;
width: 296px;
padding: 2px;
background: #CACACA;
font-style: italic;
text-align: left;
}
#galeria ul#thumbs {
clear: both;
padding: 5px;
text-align: center;
list-style: none;
}
#galeria ul#thumbs li {
display: inline;
margin: 0 3px;
}
#galeria ul#thumbs li a {
text-decoration: none;
}
#galeria ul#thumbs li a img.full,
#galeria ul#thumbs li a span.legenda {
position: absolute;
visibility: hidden;
left: 5px;
}
#galeria ul#thumbs li a img.full {
top: 30px;
cursor: default;
}
#galeria ul#thumbs li a span.legenda {
top: 188px;
color: #000;
cursor: text;
}
#galeria ul#thumbs li a:active img.full,
#galeria ul#thumbs li a:focus img.full,
#galeria ul#thumbs li a:active span.legenda,
#galeria ul#thumbs li a:focus span.legenda {
visibility: visible;
}
</style>


Parte em HTML:
Código: [Seleccione]

<!-- www.submundos.com -->
<!-- abre galeria -->
  <div id="galeria">
  <h1><center>Galeria</center></h1>

<!-- abre imagem e legenda default -->
    <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1.jpg" alt="Foto de Curitiba" />
    <span class="legenda">Rua 24 horas</span>
<!-- fecha imagem e legenda default -->
    <ul id="thumbs">
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto1.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Rua 24 horas</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto2_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto2.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Palácio Avenida</span>
        </a>
      </li>
      <li>
        <a href="#nada" title="Visualizar imagem">
          <img src="http://i400.photobucket.com/albums/pp85/pedrol96/foto3_thumb.jpg" alt="Preview da imagem" />
          <img class="full" src="http://i400.photobucket.com/albums/pp85/pedrol96/foto3.jpg" alt="Foto de Curitiba" />
          <span class="legenda">Bosques</span>
        </a>
      </li>
    </ul>
  </div>
<!-- fecha galeria -->

« Última modificação: Fevereiro 25, 2009, 19:13:35 por pedrol96 »
You are not your job. You are not how much you have in the bank. You are not the contents of your wallet. You are not your fucking Khakis. You are not a beautiful and unique snowflake. You are the all-singing, all-dancing crap of the world. Brad Pitt em Fight Club

  • *
  • Mensagens: 23.055
  • 342 créditos ( + )
  • Bons Posts: 211
  • Sexo: Masculino
    • Selminho Hi5
  • Referimentos: 361
Re: [Hi5-Tutorial] Galerias de imagens
« Responder #8 em: Fevereiro 25, 2009, 18:42:07 »
Qaundo o que postam não é da vossa autoria agradecia que colocasem a fonte!

http://project47.viscountbox.com/galeria-de-imagens-com-css/...
« Última modificação: Fevereiro 25, 2009, 18:43:18 por PunkeCas ® »
Quando a boca não consegue dizer o que o coração sente o melhor é deixar a boca sentir o que o coração diz (A)


  • Membro
  • *
  • Mensagens: 268
  • 0 créditos ( + )
  • Bons Posts: 1
  • Sexo: Masculino
    • O meu perfil
  • Referimentos: 0
Re: [Hi5-Tutorial] Galerias de imagens
« Responder #9 em: Fevereiro 28, 2009, 11:02:12 »
Segunda de 4 Galerias


IMAGEM TEMPORARIAMANTE INDISPONÍVEL.

Parte css:

Código: [Seleccione]
<style type="text/css">
<!-- www.submundos.com/forum -->
.a, .a:visited {color:transparent;}
#Submundos {position:relative; width:450px; height:620px; background:transparent; border:4px dashed #FFFFFF; margin:5px auto; background: #FFFFFF url('http://i371.photobucket.com/albums/oo151/SubmundosPunkecas/PunkecasGalemain.jpg')}
a.Submundosg, a.Submundosg:visited {display:inline; color:#000; text-decoration:none; border:1px solid #000000; width:53px; height:53px; float:left; margin:5px 9px; position:relative; cursor:crosshair;filter:Alpha(Opacity=50)}
a.Punkecasa {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasb {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasc {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasd {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecase {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasf {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasg {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecash {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasi {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasj {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecask {background:url(URL DA IMAGEM DO BOTÃO);}
a.Punkecasl {background:url(URL DA IMAGEM DO BOTÃO);}
a.Submundosg span {visibility:hidden; display:block; position:absolute; width:420px; height:450px; top:80px; left:9px; color:#ffffff; background-image:url(URL DO BACKGOUND DAS IMAGENS GRANDES); text-align:center; border:1px solid #ffffff; font-family:tahoma,letter-spacing:1px; cursor:default;background-color:#006666}
a.Punkecas span {left:-1px; top:130px;}
a.Punkecasb span {left:-74px; top:130px;}
a.Punkecasc span {left:-147px; top:130px;}
a.Punkecasd span {left:-220px; top:130px;}
a.Punkecase span {left:-293px; top:130px;}
a.Punkecasf span {left:-366px; top:130px;}
a.Punkecasg span {left:-1px; top:65px;}
a.Punkecash span {left:-74px; top:65px;}
a.Punkecasi span {left:-147px; top:65px;}
a.Punkecasj span {left:-220px; top:65px;}
a.Punkecask span {left:-293px; top:65px;}
a.Punkecasl span {left:-366px; top:65px;}
a.Submundosg:hover {white-space:normal; border:1px solid #fff; z-index:100;filter:none}
a.Submundosg:hover span {visibility:visible; z-index:100;filter:none}
a.Submundosg:hover span img {margin:10px; border:1px solid #000; position:relative; z-index:100;filter:none}
a.Submundosg:active, a.Submundosg:focus {border:1px dotted #ffff00; z-index:10;filter:none}
a.Submundosg:active span, a.Submundosg:focus span {visibility:visible; z-index:10;display:block}
a.Submundosg:active span img, a.Submundosg:focus span img {border:1px solid #000; position:relative; margin:10px; z-index:10;}
</style>

Parte html:

Código: [Seleccione]
<div id="Submundos">
<a class="Submundosg Punkecasa" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasb" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasc" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecase" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasf" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasg" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecash" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasi" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasj" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecask" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
<a class="Submundosg Punkecasl" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span></a>
</div>

Nota: Na parte html da galeria onde está " href="#" " podem adicionar ai o destino url, onde está "alt="" " podem adicionar uma descrição que aparece quando se coloca o cursor por cima da imagem grande exemplo " alt="Submundos" " onde diz " title="" " podem adicionar o titulo da imagem,l exemplo: " title="Punkecas" "


2 erros Punkecas! Tome nota:

              CSS
1. Falta "a" no "Punkecas" uma vez q deste "Punkecasa" como class

a.Punkecas span {left:-1px; top:130px;}   


              HTML
2.  Erro no 1º sinal ">"

>a class="Submundosg Punkecasd" href="#"><span><img src="URL DA IMAGEM EM GRANDE" alt="" title=""/></span>[/url]

 

  • Membro
  • *
  • Mensagens: 4.435
  • 20664 créditos ( + )
  • Bons Posts: 14
  • Sexo: Masculino
  • Referimentos: 25
Re: [Hi5-Tutorial] Galerias de imagens
« Responder #10 em: Abril 09, 2009, 01:07:58 »
Sem o Rato Por Cima:


Com o Rato Por cima:

Parte Css:
Código: [Seleccione]
<style type="text/css">
.filipegr{padding-top:9px;width:170px; height:300px; background: transparent url(http://i518.photobucket.com/albums/u348/filipegr1992/optimizadoporfilipegr.jpg);}
.filipegr .filipe a {position:relative; left:9px;display:block; height:20px; width:150px; overflow:hidden;text-decoration:none; border:none; border: 1px solid #FFF !important;}
.filipegr .filipe a img{ border:none;}
.filipegr .filipe a:hover img{filter:alpha(opacity=50); opacity:0.5;}
.filipegr .filipe a:hover { height:180px; background-image: url(http://i518.photobucket.com/albums/u348/filipegr1992/submundoscomgaleira.jpg); border: 1px dashed Black !important;}
</style>

Parte Html:
Código: [Seleccione]
<div class="filipegr">
<div class="filipe"><a href="#"><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180" /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"  /></a></div>
<div class="filipe"><a href="# "><img src="URL DA IMAGEM" width="150" height="180"/></a></div>
</div>

Ps: As Imagens devem ter o tamanho conforme os "width" e "height"...
« Última modificação: Abril 09, 2009, 01:11:08 por Filipegr »