• Revista PROGRAMAR: Já está disponível a edição #53 da revista programar. Faz já o download aqui!

GONCALOPES

galeria imagens

28 mensagens neste tópico

estou a fazer uma pagina de internet, em dreamweaver, em html+css

agora queria fazer uma galeria de imagens bonita e moderna.

só que não sei como fazer, e programação percebo pouco, gostava de algum que fosse open source...

se alguem me puder ajudar agradecia.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

queres fazer ou queres algo ja feito se quiseres algo ja feito tens varios sites que teem scripts ja feitos é so procuralos no google

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois prefiro ja feito, mas quando vou  a por na minha pagina...

os meus css ficam alterados, era isso que eu nao queria que acontecesse...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

isso sei eu, tou farto de tentar, e isto, estraga-me o layout todo,

não me podes ajudar se faz favor?

tipo ja tenho o source da galeria, mas mesmo assim, quando meto para lá, estraga-me tudo.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Ninguém te vai puder ajudar se não fores mais especifico...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

especifico como?

o genero de galeria que quero?

é isso?

faça-me as perguntas para qual eu irei responder e ser mais esclaredor possivel.

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

faça-me as perguntas para qual eu irei responder e ser mais esclaredor possivel.

Errado, não temos de ser nós a tentar adivinhar o que tu queres.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

A não ser que saibas exactamente o que estás a fazer (o que me parece que não sabes) não podes simplesmente chegar ao site, copiar o código, colocar no teu e rezar para que funcione sem qualquer problema...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Epah é assim, se tu fizeste um site com css, e olhas para esse "código" e não o consegues aplicar sem estragar o teu, aconselho-te a tirares umas aulinhas de css antes de tentares fazer isso..

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

pois começei o estudo de css a pouco tempo, mas esta pagina web, e para entregar dentro de  dias, e queria uma galeria dessas a funcionar, eu nao percebo muito so lhe dou uns toquezinhos...por isso e que pedi  a vossa ajuda...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

mas olha la tu queres entrgar isso com cenas que o teu stor nao te ensinou ?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ele ensinou...o problema e que eu ando sempre no mundo da lua...

xD, e agora vejo o erro que fiz...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

<style type="text/css">
/* CSS para a galeria */

.photopreview { 
    width: 400px;
    margin: 0 auto;
    position: relative;
}

.photopreview li {
    float: left;
    width: 100px; height: 75px;
    padding: 10px;
}
.photopreview li img {
    position: relative;
    width: 100px; height: 75px;
    border: 1px outset #CCC;
    padding: 5px; background: #FFF;
}
.photopreview li:hover img {
    cursor: default;
    width: 200px; height: 150px;
    top: -37px; left: -50px;
    border: 1px outset #CCC; padding: 5px;
    z-index: 100; background: #EEE;
}
.photopreview li:active img, .photopreview:active li:hover img {
    width: 400px; height: 300px;
    position: absolute;
    left: 0; top: auto;
}
</style>

<!-- Aqui começa o workaround para IE -->

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

<!-- Aqui termina o workaround para IE -->

tenta por isto como ta aqui ... se ficar mal ...algo esta mal com o teu css...

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

ok brigadao.... vou ja experimentar...e ja te digo qq coisa....

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Fiz como disseste, e mesmo assim nao resulta :wallbash: quando fui a experimentar as fotos nao amplia, apesar de aparecer la a maozinha, a clicar, e quando se clica nao faz nada....

vou te mostrar o meu código da folha da galeria.

<html>
<head>
<title>ACESA</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" href="css/site.css">
<style>
<!--
p.MsoNormal
{mso-style-parent:"";
margin-top:0cm;
margin-right:0cm;
margin-bottom:10.0pt;
margin-left:0cm;
line-height:115%;
font-size:11.0pt;
font-family:"Calibri","sans-serif";
}
.style2 {
border-width: 0px;
}
.style3 {
font-size: 14px;
color: #FFFFFF;
font-family: Arial, Helvetica, sans-serif;
text-decoration: underline;
}
-->
</style>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div>
</div>
<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" style="text-align: justify">
<tr>
<td align="center" valign="top"><table width="800" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td height="10" align="center" valign="top" bgcolor="#44444E"></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="15" bgcolor="#44444E"> </td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="5"><img src="images/temp_top_left_im.jpg" width="5" height="5" alt=""></td>
<td></td>
<td width="3"><img src="images/temp_top_right_im.jpg" width="5" height="5" alt=""></td>
</tr>
<tr>
<td> </td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="5"> </td>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center" valign="top"><table width="98%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="80"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>     <a href="http://www.itap-net.org"><img src="images/image001.jpg" width="670" height="65" alt="" align="middle" class="style2"></a></td>
</tr>
<tr>
<td><span class="black-slogan-txt"></span></td>
</tr>
</table></td>
<td align="right" valign="top"><table border="0" cellspacing="0" cellpadding="2">
</table></td>
</tr>
</table></td>
</tr>
<tr>
<td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td align="center"><table width="100%" border="0" cellpadding="0" cellspacing="0" background="images/bg-top-nav.jpg">
<tr>
                                          <td width="4"><img src="images/left-top-nav.jpg" width="4" height="35"></td>
                                          <td align="center" class="style3">
										<strong>Acesa</strong></td>
                                          <td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
                                          <td align="center" class="navigation_text">
										<a href="noticias.html">Noticias</a></td>
                                          <td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
                                          <td align="center" class="navigation_text">
										<a href="eventos.html">Eventos</a></td>
                                          <td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
                                          <td align="center" class="navigation_text">
										<a href="Galeria.html">Galeria</a></td>
                                          <td width="10"><img src="images/joint-top-nav.jpg" width="10" height="35"></td>
                                          <td align="center" class="navigation_text">
										<a href="Contactos.html">Contactos</a></td>
                                          
                                        </tr>
                                      </table></td>
                                    </tr>
                                    <tr>
                                      <td height="2"></td>
                                    </tr>
                                    <tr>
                                      <td height="8" bgcolor="#DB3C02"></td>
                                    </tr>
                                  </table></td>
                                </tr>
                              </table></td>
                            </tr>
                            <tr>
                              <td height="10" align="center" valign="top"></td>
                            </tr>
                            <tr>
                              <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                <tr>
                                  <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td width="250" height="158">
									<img src="images/logo_acesa_imgem.PNG" width="246" height="155" alt="" align="middle"></td>
                                      <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">
                                        <tr>
                                          <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td height="22" valign="top"><span class="orange_bold_text">História do Projecto </span><span class="gray_bold_text"></span></td>
                                            </tr>
                                            <tr>
                                              <td height="10" align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                  <td height="1" bgcolor="#999999"></td>
                                                </tr>
                                              </table></td>
                                            </tr>
                                            <tr>
                                              <td height="5" valign="top"></td>
                                            </tr>
                                          </table></td>
                                        </tr>
                                      </table></td>
                                    </tr>
                                  </table></td>
                                </tr>
                                <tr>
                                  <td height="5" align="center" valign="top"></td>
                                </tr>
                                <tr>
                                  <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                    <tr>
                                      <td width="250" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                        <tr>
                                          <td align="center" valign="top"><table width="93%" border="0" cellspacing="3" cellpadding="0">
                                              <tr>
                                                <td height="25" valign="bottom"><div align="center"><span class="orange_bold_text">Links</span></div></td>
                                              </tr>
                                              <tr>
                                                <td height="1" bgcolor="#999999"></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15" valign="top"></td>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                      <td height="15"><div align="center"><span class="bold_sky_text">Europen</span></div></td>
                                                      <td width="15" rowspan="5"> </td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td valign="top" class="light_gray_text">A Europen é uma grande loucura. Trata-se de uma mostra que integra uma 'instalação'   														artística e uma 'performance' com referências ao campo virtual.</td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                          <tr>
                                                            <td align="right"></td>
                                                       
                                                          </tr>
                                                      </table></td>
                                                    </tr>
                                                </table></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td height="25" align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15"></td>
                                                <td width="90%" height="1" bgcolor="#999999"></td>
                                                <td width="15"></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15" valign="top"> </td>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                      <td style="height: 15px">
													<div align="center"><span class="bold_sky_text">Projecto Ergon</span></div></td>
                                                      <td width="15" rowspan="5"> 
													</td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td valign="top" class="light_gray_text">A plataforma Ergon é criada para permitir a professores, curriculum  desenvolvedores e técnicos, que trabalham com a prática ou na empresa  para aprender uns com os outros.</td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                          <tr>
                                                            <td align="right"> </td>
                                                            </tr>
                                                      </table></td>
                                                    </tr>
                                                </table></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td height="25" align="center" valign="middle"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15"></td>
                                                <td width="90%" height="1" bgcolor="#999999"></td>
                                                <td width="15"></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                              <tr>
                                                <td width="15" valign="top"> </td>
                                                <td><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                      <td height="15"><div align="center"><span class="bold_sky_text">Inform</span></div></td>
                                                      <td width="15" rowspan="5"> </td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td valign="top" class="light_gray_text" style="height: 28px">Infor empresa espanhola, pretende  continuar com a sua tarefa colectiva, de serviço e de contribuição no  campo da formação profissional em todo o país de Espanha. </td>
                                                    </tr>
                                                    <tr>
                                                      <td height="3"></td>
                                                    </tr>
                                                    <tr>
                                                      <td align="right"><table width="100%" border="0" cellpadding="0" cellspacing="0">
                                                          <tr>
                                                            <td align="right"> </td>
                                                            
                                                          </tr>
                                                      </table></td>
                                                    </tr>
                                                </table></td>
                                              </tr>
                                          </table></td>
                                        </tr>
                                        <tr>
                                          <td align="center" valign="top"> </td>
                                        </tr>
                                      </table></td>
                                      <td align="center" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="10">
                                        <tr>
                                          <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                            <tr>
                                              <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                  <td height="22" valign="top" class="orange_bold_text">Galeria de Imagens </td>
                                                </tr>
                                                <tr>
                                                  <td height="10" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                      <td height="1" bgcolor="#999999"></td>
                                                    </tr>
                                                  </table></td>
                                                </tr>
                                                <tr>
                                                  <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                     
                                                      <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                        <tr>
                                                          <td height="5" valign="top"></td>
                                                        </tr>
                                                        <tr>
                                                          <td valign="top" class="light_gray_text"><p> </p>														  </td>
													   <tr>
                                                          <td valign="top" class="light_gray_text"><p>
                                                            <style type="text/css">
                                                            /* CSS para a galeria */ .photopreview {     width: 400px;    margin: 0 auto;    position: relative;} .photopreview li {    float: left;    width: 100px; height: 75px;    padding: 10px;}.photopreview li img {    position: relative;    width: 100px; height: 75px;    border: 1px outset #CCC;    padding: 5px; background: #FFF;}.photopreview li:hover img {    cursor: default;    width: 200px; height: 150px;    top: -37px; left: -50px;    border: 1px outset #CCC; padding: 5px;    z-index: 100; background: #EEE;}.photopreview li:active img, .photopreview: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");}.photopreview li:hover img {    margin-bottom: -75px; margin-right: -100px;}.photopreview li:active img {    margin-bottom: -150px; margin-right: -200px;}</style><![endif]-->
                                                          </p>														  </td>
                                                        </tr>
													 <tr>
                                                          <td valign="top" class="light_gray_text">													  </td>
													   <tr>
                                                        <tr>
                                                          <td height="5" valign="top"></td>
                                                        </tr>
                                                      </table></td>
                                                    </tr>
                                                  </table></td>
                                                </tr>
                                              </table></td>
                                            </tr>
                                            <tr>
                                              <td height="10" valign="top"><p> </p>
                                                <ul class="photopreview">
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020008.JPG" alt="Acesa1" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020009.JPG" alt="Acesa 2" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020010.JPG" alt="Acesa 3" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020011.JPG" alt="Acesa 4" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020012.JPG" alt="Acesa 5" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020013.JPG" alt="Acesa 6" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020014.JPG" alt="Acesa 7" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020015.JPG" alt="Acesa 8" width="100" height="75"></a></li>
   <li><a href="#"><img src="../../../Os meus documentos/As minhas imagens/Galeria/09020016.JPG" alt="Acesa 9" width="100" height="75"></a></li>
</ul>
                                            </tr>
                                            <tr>
                                              <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                  <td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                    <tr>
                                                      <td height="1" bgcolor="#999999"></td>
                                                    </tr>
                                                  </table></td>
                                                </tr>
                                              </table></td>
                                            </tr>
                                          </table></td>
                                        </tr>
                                      </table></td>
                                    </tr>
                                  </table></td>
                                </tr>
                              </table></td>
                            </tr>
                            <tr>
                              <td height="10" align="center" valign="top"></td>
                            </tr>
                          </table></td>
                          <td width="5"> </td>
                        </tr>
                      </table></td>
                      <td> </td>
                    </tr>
                    <tr>
                      <td><img src="images/temp_foot_left_im.jpg" width="5" height="5" alt=""></td>
                      <td></td>
                      <td width="5"><img src="images/temp_foot_right_im.jpg" width="5" height="5" alt=""></td>
                    </tr>
                  </table></td>
                  <td width="15" bgcolor="#44444E"> </td>
                </tr>
              </table></td>
            </tr>
            <tr>
              <td align="center" valign="top"><table width="100%" border="0" cellpadding="10" cellspacing="0" bgcolor="#44444E">
                <tr>
                  <td align="center">
				<p class="MsoNormal"><font color="#FFFFFF">
				<span style="font-family: Garamond,serif">© Todos direitos 
				reservados ACESA</span></font></p>
 </td>
                </tr>

   

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

obrigadao pela ajuda, ja consegui....

brigadao serio....

abraço

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

GONCALOPES, passa esse código para o paste.

O Paste não serve para isso. O Paste serve para partilhas rápidas de código no IRC p.e., não para este tipo de posts.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

O Paste não serve para isso. O Paste serve para partilhas rápidas de código no IRC p.e., não para este tipo de posts.

Respondo-te por pm....

Já agora, para que serve a opção "Permanente"?

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Já agora, para que serve a opção "Permanente"?

No paste? Para nunca ser apagado.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

No paste? Para nunca ser apagado.

Lol, estava a ser irónico :P

GONCALOPES, de qualquer maneira, mete o código nas tags do geshi.

(desculpem o offtopic :P)

0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Falta aí qualquer coisa a fechar a página.

Se calhar o código não coube todo no post.
0

Partilhar esta mensagem


Link para a mensagem
Partilhar noutros sites

Crie uma conta ou ligue-se para comentar

Só membros podem comentar

Criar nova conta

Registe para ter uma conta na nossa comunidade. É fácil!


Registar nova conta

Entra

Já tem conta? Inicie sessão aqui.


Entrar Agora