Galeria de imagem com CSS

UrbanZone :: Informática ::  :: Web :: html | Css

Ver o tópico anterior Ver o tópico seguinte Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Storm em 2009-03-20, 8:06 pm

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://illiweb.com/fa/pbucket.gif" alt="Imagem  1" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 1"  /></span></a></li>

<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  2" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 2"  /></span></a></li>
   
<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  3" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 3"  /></span></a></li>
   
<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  4" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 4"  /></span></a></li>
   
<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  5" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 5"  /></span></a></li>
   
<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  6" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 6"  /></span></a></li>
 
<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  7" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 7"  /></span></a></li>

<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="Imagem  8" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt="Texto 8"  /></span></a></li>
</ul></div></center><br>
avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Imagens

Mensagem por Storm em 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)
avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Lyrical em 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



Paulo Rosa aka lyrical / lirycal_s, from Beira Moçambique, Mtc, é um graffiteiro um dos melhores que ja vi, free vector wallpaper graffiti
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

Imagens

Mensagem por Storm em 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.
avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Lyrical em 2009-03-30, 1:17 pm

parte Html
Código:
</div>
<div class="galeria">
<div class="img-aqui">
</div>

<ul class="fotos">
   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">Participantes almoçam no Restaurante Côté Jardin, no hotel.</span></span></a>

   </li>
   
   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">Pedro Cabral e sua palestra sobre interatividade.</span></span></a>
   </li>

   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">Juliana Constantino, da Agência Click, fala sobre Usabilidade.</span></span></a>
   </li>
   
   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">A DevMedia novamente apoia o iMasters InterCon.</span></span></a>
   </li>

<li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">A DialHost e seu apoio ao iMasters InterCon</span></span></a>
   </li>

   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" alt=""  /><span class="legenda">Fabiana Go recebe presente da organização do evento.</span></span></a>
   </li>
   
   <li><a href="#"><img src="http://illiweb.com/fa/pbucket.gif" alt="" /><span><img src="http://illiweb.com/fa/pbucket.gif" 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://illiweb.com/fa/pbucket.gif') 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>
<!--[if lte IE 6]>
<style type="text/css">
ul.fotos {
   width:164px;
   padding:  2px 0 1px 0;
   }
ul.fotos li {
   margin-top:0;
}
/* Fixes for IE */
/* Fix IE. Hide from IE Mac \*/
ul.fotos li { float: left; height: 1%; }
ul.fotos li a { height: 1%; }
/* End */
ul.fotos a:hover {
   text-decoration:none;
   background: none;
   }
ul.fotos li {width:75px;}
ul.fotos a:hover span.legenda {width:500px;}
</style>
<![endif]-->

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

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Lyrical em 2009-03-30, 2:14 pm

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>

<!--[if lt IE 7]>
<style type="text/css">
    body {
    behavior:url("csshover.htc");
}
.ppr li:hover img {
    margin-bottom: -95px; margin-right: -100px;
}
.ppr li:active img {
    margin-bottom: -150px; margin-right: -200px;
}
</style>
<![endif]-->


Exemplo:



Outro Exemplo clica para ver
avatar
Lyrical
Administrador

Masculino
Posts : 1146 País de Origem :

Ver perfil do usuário http://urbanzone.withme.us

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Saduny em 2009-04-02, 3:45 pm

e um muito nice emsmo a frente kurti bue mesmo affraid
avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por MR.Eriv em 2009-04-03, 11:34 am

adorei este post
continua a postar coisas tribais Paulo Rosa
vc é o melhor
avatar
MR.Eriv
Moderador

Masculino
Posts : 254 País de Origem :

Ver perfil do usuário

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Storm em 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
avatar
Storm
Sub Admin

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Saduny em 2009-04-08, 1:05 pm

strom deslkpa la mas é SaDunY Surprised
avatar
Saduny
Moderador

Masculino
Posts : 422 País de Origem :

Ver perfil do usuário http://correiacv.hi5.com/friend/p418283374--+%C2%A2%CF%83%D1%8F%

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Storm em 2009-04-08, 5:31 pm

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

Masculino
Posts : 852 País de Origem :

Ver perfil do usuário http://pwp.netcabo.pt/fernando.martim/

Voltar ao Topo Ir em baixo

Re: Galeria de imagem com CSS

Mensagem por Conteúdo patrocinado


Conteúdo patrocinado


Voltar ao Topo Ir em baixo

Ver o tópico anterior Ver o tópico seguinte Voltar ao Topo

- Tópicos similares

UrbanZone :: Informática ::  :: Web :: html | Css

 
Permissão deste fórum:
Você não pode responder aos tópicos neste fórum