galeria de fotos em css? [RESOLVIDO]

1. galeria de fotos em css? [RESOLVIDO]

jhonyjhous
(usa Debian)

Enviado em 04/11/2012 - 21:36h

pessoal to desenvolvendo um site e quero fazer uma galeria de fotos, sendo que teria a miniatura que al clicada entra entra nas fotos... mais vi varios codigos em css de galeria de fotos e percebi que se eu for colocar 20 fotos eu terei que criar 20 miniaturas para casa foto que ao clicar ela se redimensiona ao tamanho normal .. terei mesmo que criar uma miniatura para cada foto ?? é isso mesmo .. olhem o codigo abaixo >>>

css >>>>

#principal {
margin:0 auto;
}

.conteinerfoto {
float:left;
width:210px;
height:180px;
margin: 10px;
padding:5px;
background-color:#f5f7f9;
border-right: #a5a7aa solid 1px;
border-bottom: #a5a7aa solid 1px;
text-align:center;
}

html >>>>

<body>
<div id="principal">
<h3>GALERÍA CSS</h3>
<div class="conteinerfoto"><a href="#"><img src="img/1.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
<div class="conteinerfoto"><a href="#"><img src="img/2.jpg" border="0" alt=""/></a><br /><span>Descriçaõ da imagem</span></div>
<div class="conteinerfoto"><a href="#"><img src="img/3.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
<div class="conteinerfoto"><a href="#"><img src="img/4.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem</span></div>
<div class="conteinerfoto"><a href="#"><img src="img/5.jpg" border="0" alt=""/></a><br /><span>Descrição da imagem extranhamente longa</span></div>
</div>
</body>

sendo que ao clicar a foto nao se redimenciona ao tamanho normal

me ajudemm !

0 0

Quote

2. MELHOR RESPOSTA

saitam
(usa Slackware)

Enviado em 19/11/2012 - 10:19h

jhonyjhous escreveu:

agora outra duvida, ja fiz as miniauras criei a galeria, mais aparece a galeria com as fotos e nao aparece o menu principal la em cima que tem os links fotos,video,dowloads entra em uma outra pagina so com a galeria de fotos sem o menu que fiz , o menu é uma imagen que fiz no photoshop e depois linkei cada parte, fotos,videos etc.
ai terei que copiar os codigos e colar em todas as paginas ? ou tem como automatizar isso pelo css? tipo quero que toda navegação mais que continue o menu que criei so muda o conteudo entendeu, igual nos sites normais por enquanto so linkei fotos. olhem como esta meu codigo --->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SKATE</title>
<style>
body{
background-color:black;
color:#FFF;
text-align:center;
}
#principal{
border:2px solid;
margin:auto;
width:900px;
}

</style>
</head>
<body>
<div id="principal">
<img src="imagens/menu.jpg" alt="menu" width="900px" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="28,298,159,342" href="galeriafotos.html" />
</map>
<br />
<br />
<br />
<p>
aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site
</p>
</div>
</body>
</html>

Se for utilizar apenas HTML e CSS,então crie uma div conteúdo para deixar mais organizado e em todas páginas deve copiar a mesma estrutura, apenas alterando o conteúdo da página correspondente.
Para simplificar poderia fazer em PHP com uso de includes, mas o resultado seria o mesmo.

0 0

Quote

3. Sim e Não

julianjedi
(usa Arch Linux)

Enviado em 05/11/2012 - 07:05h

Na verdade se for pensar em webstandards e Usuabilidade vc teria sim, pois se não criar as miniaturas o carregamento da página ficaria muito pesado pois fotos redimensionadas no html ainda continuam com o mesmo peso, porém é possivel sim como ja citei, pode redimensionar direto no html mas a página vai ficar pesada.

pode fazer dessa maneira

<a href="imagem.jpg><img src="imagem.jpg" width="100" /></a>

ou pode redimensionar direto no css ou com um estilo embutino na tag img

<a href="imagem.jpg"><img src="imagem.jpg" style="height:120px; width:12px" /></a>

mas como te falei .. pode ficar pesado"!!!

Use o Gimp ou Photoshop ou ateh mesmo o fireworks para gerar miniaturas .. existem bath process ou processamento em lote que te permite fazer isso, ou vc pode redimensionar diretamente no upload fazendo um script php .

0 0

Quote

4. Re: galeria de fotos em css? [RESOLVIDO]

jhonyjhous
(usa Debian)

Enviado em 05/11/2012 - 21:33h

entao nao tem geito sempre que for postar fotos em meu site terei que fazer as miniaturas de casa foto e depois linkar elas para aparecer grander né? para fazer uma galeria de fotos igual a do facebook ou orkut que vai passando atraves de cliques so com javascript ou php né?

0 0

Quote

5. Jquery

julianjedi
(usa Arch Linux)

Enviado em 09/11/2012 - 04:05h

Sim, procure no google por Jquery Lightbox

0 0

Quote

6. Re: galeria de fotos em css? [RESOLVIDO]

removido
(usa Nenhuma)

Enviado em 09/11/2012 - 10:23h

jhonyjhous escreveu:

entao nao tem geito sempre que for postar fotos em meu site terei que fazer as miniaturas de casa foto e depois linkar elas para aparecer grander né? para fazer uma galeria de fotos igual a do facebook ou orkut que vai passando atraves de cliques so com javascript ou php né?

Não, vc pode fazer sem ter que criar a miniatura.

http://www.marcelotorresweb.com/galeria-de-imagem-com-css-puro/

OBS: Mas nesse link que te mandei vc tem que criar a miniatura sim.

0 0

Quote

7. Re: galeria de fotos em css? [RESOLVIDO]

danielRS
(usa Ubuntu)

Enviado em 09/11/2012 - 10:37h

Bom dia,

Tem como vc redimensionar todas fotos de uma vez por meio de um id vc pode atribuir a propriedade background-size a porcentagem da foto que vc quer por exemplo: background-size: 10%;
Mas no caso vc teria que utilizar essa nova propriedade de css3, porém não é compatível com navegadores mais antigos.
Mas pode tentar, dê uma olhada nessa propriedade e veja se ajuda.

t+

0 0

Quote

8. Re: galeria de fotos em css? [RESOLVIDO]

jhonyjhous
(usa Debian)

Enviado em 19/11/2012 - 00:53h

agora outra duvida, ja fiz as miniauras criei a galeria, mais aparece a galeria com as fotos e nao aparece o menu principal la em cima que tem os links fotos,video,dowloads entra em uma outra pagina so com a galeria de fotos sem o menu que fiz , o menu é uma imagen que fiz no photoshop e depois linkei cada parte, fotos,videos etc.
ai terei que copiar os codigos e colar em todas as paginas ? ou tem como automatizar isso pelo css? tipo quero que toda navegação mais que continue o menu que criei so muda o conteudo entendeu, igual nos sites normais por enquanto so linkei fotos. olhem como esta meu codigo --->

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SKATE</title>
<style>
body{
background-color:black;
color:#FFF;
text-align:center;
}
#principal{
border:2px solid;
margin:auto;
width:900px;
}

</style>
</head>
<body>
<div id="principal">
<img src="imagens/menu.jpg" alt="menu" width="900px" border="0" usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="28,298,159,342" href="galeriafotos.html" />
</map>
<br />
<br />
<br />
<p>
aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site aqui vai ficar o conteudo do site
</p>
</div>
</body>
</html>

0 0

Quote

9. Re: galeria de fotos em css? [RESOLVIDO]

jhonyjhous
(usa Debian)

Enviado em 23/11/2012 - 16:51h

pow blz vo fazer assim entao ...vou fazer uma folha de estilo css com as divs vo colocar em todas as paginas,sendo que so irei modificar a div conteudo .. vo testar aqui pra ver se vai funcionar ... vlw kra

0 0

Quote