[Resolvido] galeria...

[- KbeçãO - 0]

bom dia imasters...

bom, ñ sei nda de js...

pocurando na net, achei um exemplo de "zoom" em foto...

mas o exemplo ja vem com um css pre-definido....

mas na minha pg ja havia um css....

tentei modificar o codigo css e js do exemplo para que ficassa da forma como eu queria,

em relação de tamanho final do zoom, e posicionamento da foto na pagina, mas desconfigurou tudo....

o codigo peguei daqui

http://www.gethifi.com/blog/jphotogrid

o css inicial era este...

 

#ft{

width: 300px;
margin-left: -50px;

}

#ft img{

width: 300px;
height: 221px;
float: left;

}
#ft p{

font-size: 10px;
width: 300px;
float: left;
line-height: 15px;

}

 

com este css o posicionamento fica perfeito...

 

agora este e o css do exemplo...

#pg { 
float: left;
height: 585px; 
}

#pg li { 
position: relative; 
list-style: none; 
width: 300px;
height: 221px;
overflow: hidden; 
float: left; 
}

#pg li.selected { 
opacity: 1; 
z-index: 99; 
-moz-box-shadow: 0px 0px 10px #fff; 
-webkit-box-shadow: 0px 0px 10px #fff; 
}

#pg li img { 
display: block; 
width: 100%; 
}

#pg li p { 
color: white; 
margin: 10px 0; 
font-size: 12px; 
}

 

e agora o js do exemplo...

 

$(document).ready(function(){

$('#pg').jphotogrid({
	baseCSS: {
		width: '300px',
		height: '221px',
		padding: '0px',
	},
	selectedCSS: {
		top: '50px',
		left: '100px',
		width: '824px',
		height: '594px',
		padding: '10px'
	}
});

});

 

claro, no css inicial meu, na div "ft" dentro criei a <ul id="pg"> da forma como o exemplo pede, mas como disse descofigurou tudo...

que modificações devo fazer para o posicionamento ficar o mesmo?

ou se algm souber um exemplo mais facil..

desde ja agradeço.....

[Evandro Oliveira 331]

tão todas as info aí: top, left, margin, padding, é só configurar do jeito que estava.

[- KbeçãO - 0]

consegui cara....

usei um unico css pra todas as imagens..

ta ai o exemplo pra qm quiser:

 

#cont_soc{

width: 365px; 
float: left;
margin-left: 35px;
margin-top: -475px;


}
#cont_soc img{

float: left;
margin: 10px;

}

 

o css é so isso..

^^,

ai nas imagens:

 

<a href="#"><img src="cs_resp/cs01.png" pbshowcaption="true" 
	pbcaption="Entardecer no setor Mira Mar em  Aparecida de Goiânia, começam a chegar os convidados para a solenidade de entrega das chaves casa."
	style="width: 80px; height: 60px;"
	class="PopBoxImageSmall" title="Clique para almentar / diminuir"
	onclick="Pop(this,50,'PopBoxImageLarge');">
</a>

 

onde o "pbcapition" é o texto que vai em baixo da imagem...

"title" é oq vai aparecer escrito se você deixar o mouse parado em cima da foto...

vale ressaltar, que a mesma imagem do zoom, é a imagem da miniatura, entao o que tiver na imagem grande, vai aparecer na miniatura...

só um aviso para questão de layout..

^^,

 

o efeito JS chama-se PopBox...

 

Tópico Resolvido