Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

jschilling

[Resolvido] Imagens Utilizando jQuery

Por , em Javascript

Recommended Posts

jschilling    0

jschilling
Postado

Seguinte galera eu to procurando fazer uma galeria de imagens tipo a do mercadolivre que tem as imagens pequenas em baixo ai quando clica ela fica grande no quadro de cima ai quando clica na imagem grande de cima ai parece que utiliza um efeito de shadowbox (esse nome se não to enganado) que deixa a imagem maior ainda carregada no centro da tela

Se alguem puder me ajudar fico muito agradecido

Compartilhar este post

Link para o post
Compartilhar em outros sites

0cool    0

0cool
Postado

Veja estes exemplos...

 

Tutorial / Demos: http://orangoo.com/labs/GreyBox/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial: http://colorpowered.com/colorbox/

Demo: http://colorpowered.com/colorbox/core/example1/index.html

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Tutorial / Demo: http://www.huddletogether.com/projects/lightbox2/

 

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

 

Boa sorte.

Compartilhar este post

Link para o post
Compartilhar em outros sites

jschilling    0

jschilling
Postado

Eu consegui de um jeito mais não sei se eh o mais apropriado, se alguem tiver um jeito mais facil manda ai


<!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>Efeitos Em JQuery</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="shadowbox/shadowbox.js"></script>
<link href="shadowbox/shadowbox.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
Shadowbox.init({
	language: 'pt',
	player:['img','html','swf'],
});

function IMG(img){
	if(img=="fake.jpg"){
		document.getElementById('fake').style.display = 'inline';
		document.getElementById('fake2').style.display = 'none';
		document.getElementById('fake3').style.display = 'none';
	}
	else if(img=="fake2.jpg"){
		document.getElementById('fake').style.display = 'none';
		document.getElementById('fake2').style.display = 'inline';
		document.getElementById('fake3').style.display = 'none';
	}
	else if(img=="fake3.jpg"){			
		document.getElementById('fake').style.display = 'none';
		document.getElementById('fake2').style.display = 'none';
		document.getElementById('fake3').style.display = 'inline';
	}
}	
</script>

</head>

<div style="background-color:#9FF;">
<div id="escondido" style="position:inherit; height:237px; width:200px; background-color:#000">
	<a href="fake.jpg" rel="shadowbox[galeria2]"><center><img src="fake.jpg" id="fake" style="display:none; " alt="298" width="" height="237" /></center></a>
	<a href="fake2.jpg" rel="shadowbox[galeria2]"><center><img src="fake2.jpg" id="fake2" style="display:none;" alt="298" width="" height="237"/></center></a>
   	<a href="fake3.jpg" rel="shadowbox[galeria2]"><center><img src="fake3.jpg" id="fake3" style="display:none;" alt="298" width="" height="237" /></center></a>
</div>

<div>
<img src="fake.jpg" alt="" width="125" height="75" onclick="IMG('fake.jpg');"/>
<img src="fake2.jpg" alt="" width="125" height="75" onclick="IMG('fake2.jpg');"  />
<img src="fake3.jpg" alt="" width="125" height="75" onclick="IMG('fake3.jpg');"  />
</div>
</div>
</body>
</html>

 

VALE RESSALTAR SE ALGUEM SABER UM JEITO MAIS FACIL PRA FAZER ISSO POR FAVOR POSTA AI !!!!!!!!!!!!!!!!!!!!!!!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito