Re: Galeria de imagem com CSS

2009-03-20, 8:06 pm Reputação da mensagem: 100% (1 votos)

Criar um album com 8 imagens:

Deve substituir as imagens e os textos.

Código:: <center><style type="text/css"> .StormG { width:450px; margin:1 auto; text-align:left;} .StormIM { background: #FFFFFF url('') center no-repeat; width:450px; height:220px; position:relative; top:2px;float:right; border:1px solid #FFFFFF;} ul.StormF {position:relative;list-style:none; width:165px;padding:1px;background:#FF000;margin:0; padding:0; } .StormF:after {display: block;content: ".";height: 0;font-size:0; visibility: hidden;clear: both;} ul.StormF li {width:75px;height:50px;float:left; border:1px solid #FFFFFF;margin:1px; } ul.StormF li img {border:1px solid #FF0000; width:75px;height:50px;} ul.StormF li span img {border:none;width:279px;height:212px;} ul.StormF a {display: block;} ul.StormF a span {display: none;} ul.StormF a:hover span {display: block;position: absolute; top:1px; left: 165px; background:#FFFFFF;border:1px solid #FF0000;} </style></center></br> <center><div class="StormG"><div class="StormIM"></div><ul class="StormF"> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 1" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 1" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 2" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 2" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 3" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 3" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 4" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 4" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 5" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 5" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 6" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 6" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 7" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 7" /></span></a></li> <li><a href="#"><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Imagem 8" /><span><img src="http://i423.photobucket.com/albums/pp320/Storm_Matrix/Surfista001.jpg" alt="Texto 8" /></span></a></li> </ul></div></center><br>

2009-03-26, 8:44 pm

Imagem de exemplo

Neste caso devem só trocar as imagens do 2º código.
1ª parte do código

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

2ª Parte do código

Código:: <div id='Storm1'><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>

(código retirado do submundos)

2009-03-30, 7:02 am

Tambem tenho um No meu perfil um pouco melhorado

veja isso

http://maujor.com/tutorial/galeria-fotos.php

http://maujor.com/tutorial/galeria-fotos/final.html

muitas galerias de imagens sao feitas pelo maujor

2009-03-30, 12:33 pm

Então podes meter aqui o código para partilhar e assim eu tirava o que tenho no meu Hi5 e metia esse.

2009-03-30, 1:17 pm Reputação da mensagem: 100% (1 votos)

parte Html

Código:: </div> <div class="galeria"> <div class="img-aqui"> </div> <ul class="fotos"> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto01.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto01.jpg" alt="" /><span class="legenda">Tiago Baeta, do iMasters, na abertura do evento, no Auditório "Criação e Desenvolvimento".</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto02.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto02.jpg" alt="" /><span class="legenda">Tiago Baeta, do iMasters, faz a abertura do evento no Auditório "Programação e Tecnologia", sendo observado por Alex Falcão, apresentador deste auditório.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto03.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto03.jpg" alt="" /><span class="legenda">Participantes almoçam no Restaurante Côté Jardin, no hotel.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto04.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto04.jpg" alt="" /><span class="legenda">Pedro Cabral e sua palestra sobre interatividade.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto05.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto05.jpg" alt="" /><span class="legenda">Vivan Menezes, da Vivo, em sua palestra sobre Qualidade de Software.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto06.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto06.jpg" alt="" /><span class="legenda">Auditório de Criação também com lotação máxima. Inscrições foram esgotadas com 1 mês e meio de antecedência.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto07.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto07.jpg" alt="" /><span class="legenda">Salvio Padlipskas fala sobre melhores práticas de banco de dados.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto08.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto08.jpg" alt="" /><span class="legenda">Juliana Constantino, da Agência Click, fala sobre Usabilidade.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto09.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto09.jpg" alt="" /><span class="legenda">A DevMedia novamente apoia o iMasters InterCon.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto10.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto10.jpg" alt="" /><span class="legenda">Recepcionista orienta os participantes do evento, na entreda principal do hotel, a respeito do centro de eventos.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto11.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto11.jpg" alt="" /><span class="legenda">A DialHost e seu apoio ao iMasters InterCon</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto12.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto12.jpg" alt="" /><span class="legenda">Agencia 5Clicks com suas criações geniais e sua parceria com o iMasters</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto13.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto13.jpg" alt="" /><span class="legenda">Fabiana Go recebe presente da organização do evento.</span></span></a> </li> <li><a href="#"><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto14.jpg" alt="" /><span><img src="http://i79.photobucket.com/albums/j152/maujor/site/foto14.jpg" alt="" /><span class="legenda">Criadores do Mundo Canibal e equipe de organização do evento, ao final do InterCon 2006.</span></span></a> </li> </ul> </div>

parte CSS

Código:: <style type="text/css"> .galeria { width:680px; margin:0 auto; text-align:left; } .img-aqui { background: #fff url('http://i79.photobucket.com/albums/j152/maujor/site/foto00.jpg') center no-repeat; width:500px; height:375px; position:relative; top:8px; float:right; border:1px solid #fff; } ul.fotos { position:relative; list-style:none; width:162px; padding:1px; background:#999; margin:0; padding:0; } .fotos:after { display: block; content: "."; height: 0; font-size:0; visibility: hidden; clear: both; } ul.fotos li { width:75px; height:50px; float:left; border:2px solid #444; margin:1px; } ul.fotos li img { border:none; width:75px; height:50px; } ul.fotos li span img { border:none; width:500px; height:375px; height:auto; } ul.fotos a { display: block; } ul.fotos a span { display: none; } ul.fotos a:hover span.legenda { display: block; text-align:center; width:500px; position:absolute; top:375px; left:-2px; } ul.fotos a:hover span { display: block; position: absolute; top:-5px; left: 177px; background:#fff; border:2px solid #666; } ul.fotos a:hover span.legenda { padding:5px 0; color:#333; } </style>

exemplo
http://maujor.com/tutorial/galeria-fotos/final.html

2009-03-30, 2:14 pm Reputação da mensagem: 100% (1 votos)

HTML

Código:: <ul class="ppr"> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/1077981982.jpg" alt="1"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/1065638719.jpg" alt="2"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/capo.jpg" alt="3"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/08.jpg" alt="4"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/Arrancada20Clube10.jpg" alt="5"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/1074095024.jpg" alt="6"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/golffjajaroxo.JPG" alt="7"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/evento0099.jpg" alt="8"></a></li> <li><a href="#"><img src="http://www.cle_cars.blogger.com.br/vermeiajaja.JPG" alt="9"></a></li> </ul>

CSS

Código:: <style type="text/css"> .ppr {margin-left: 40; border: 0 solid black; padding: 0; list-style: none; } .ppr { width: 400px; margin: 0 auto; position: relative; } .ppr li { float: left; width: 100px; height: 75px; padding: 10px; } .ppr li img { position: relative; width: 100px; height: 75px; border: 1px outset #CCC; padding: 5px; background: #ccc; filter: alpha(opacity=80); opacity: 0.8;} .ppr li:hover img { cursor: default; width: 200px; height: 150px; top: -37px; left: -50px; border: 1px outset #CCC; padding: 5px; z-index: 100; background: #EEE; filter: alpha(opacity=100); opacity: 1.0;} .ppr li:active img, .pr:active li:hover img { width: 400px; height: 300px; position: absolute; left: 0; top: auto; } </style>

Exemplo:

Outro Exemplo clica para ver

2009-04-02, 3:45 pm Reputação da mensagem: 0% (1 votos)

e um muito nice emsmo a frente kurti bue mesmo affraid

2009-04-03, 11:34 am

adorei este post
continua a postar coisas tribais Paulo Rosa
vc é o melhor

2009-04-06, 6:00 pm

Eu já estou a utilizar este ultimo código e já com a Imagem do Forum antiga preciso da nova para meter lá. muito fixe

2009-04-08, 1:05 pm

strom deslkpa la mas é SaDunY Surprised

2009-04-08, 5:31 pm

O meu nome tb é Storm e não strom he he he, SaDunY estás desculpado, lol!

Galeria de imagem com CSS