Clicar em miniatura e trocar imagem

[Dian Carlos 29]

Olá amigos do iMasters o/ :thumbsup:

 

Estou em um projeto que está quase concluido..

Mas só falta uma coisinha..

 

Vejam nesse link: http://tozzimoveis.com.br/view2.php?categoria=kyVu2b&codigo=1-000

 

A parte das fotos.. eu quero que quando eu clique nas miniaturas as fotos correspondentes a elas mudem em cima.. E que tenha o suporte ao zoom em jquery.

 

Coloquei ali umas fotos de teste

 

Código da parte onde a foto está:

<div class="produto-view">
<!--Quero que quando a miniatura for clicada esse bloco todo seja trocado-->
<a class="zoom" href="catalogo/kyVu2b/big/1334858478BIG.jpg" rel="gal1"> 
<img src="catalogo/kyVu2b/big/1334858478BIG.jpg" width="300">
</a>
<!--Quero que quando a miniatura for clicada esse bloco todo seja trocado-->     

             <div id="galery">
<!--Miniaturas-->
             <img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334858478.jpg">
             <img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334859053.jpg">
             <img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334858478.jpg">
             <img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334859053.jpg">
<!--Miniaturas-->
             </div>

             </div>

 

Tem como fazer isso?

 

Desde já agradeço..

[William Bruno 1501]

Exemplo com javascript puro:

http://wbruno.com.br/2012/02/02/album-de-fotos-javascript-simples-aplicacao-de-esconde-mostra/

 

 

Demo com o zoom:

http://wbruno.com.br/scripts/album-disney-zoom.html

[Dian Carlos 29]

Olha.. eu achei uma coisa aki no forum que faz o que eu quero. mas o zoom da foto não funciona.

 

eis o código como ficou.

<!--Bloco onde as fotos e o link do zoom mudam-->
<div id="pic">
             <a class="zoom" href="catalogo/<?php echo $categoriaa ?>/big/<?php echo $imagemzoom ?>" rel="gal1">
             <img src="catalogo/<?php echo $categoriaa ?>/big/<?php echo $imagemzoom ?>" width="300">
             </a>
</div>
<!--Bloco onde as fotos e o link do zoom mudam-->

             <div id="galery">
             <a class="foto1" href="#"><img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334858478.jpg"></a>
             <a class="foto2" href="#"><img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334859053.jpg"></a>
             <a class="foto3" href="#"><img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334858478.jpg"></a>
             <a class="foto4" href="#"><img src="http://tozzimoveis.com.br/catalogo/kyVu2b/mini/1334859053.jpg"></a>
             </div>

 

O script ficou da seguinte maneira:

$(document).ready(function(){  
   var options = {  
           preloadImages: true,
		preloadText: 'Carregando Detalhes',
		title: false,  
           alwaysOn:false,  
           zoomWidth: 378, 
		zoomHeight: 250,           
           xOffset:30,  
           yOffset:30,   
           //...MORE OPTIONS  
   }; 
$('.zoom').jqzoom(options);  
});
$(document).ready(function(){
       $('.foto1').click(function(){$('#pic').html('<a class="zoom" href="catalogo/aKXu2b/big/1334866483BIG.jpg" rel="gal1"><img src="catalogo/aKXu2b/big/1334866483BIG.jpg" width="300"></a>');});
       $('.foto2').click(function(){$('#pic').html('<a class="zoom" href="catalogo/aKXu2b/big/1334866691BIG.jpg" rel="gal1"><img src="catalogo/aKXu2b/big/1334866691BIG.jpg" width="300"></a>');});
}); 

 

Lembrando que é so de teste. mas tipo.. quando eu clico na miniatura a foto muda, mas o zoom não aparece, so fico um link normal para a foto maior. Tem como tipo, sempre que eu clicar na miniatura, dar tipo um reload no script do zoom? não sei se é isso que tem que fazer. se alguem souber como se faz isso eu agradeço..

 

Valew..

[William Bruno 1501]

@Dian, veja o meu post, acima desse ultimo seu.

[Dian Carlos 29]

@Dian, veja o meu post, acima desse ultimo seu.

 

William, obrigado pela ajuda, mas eu não consegui.

 

Coloquei a página na internet.. Eis o link : http://tozzimoveis.com.br/view2.php?categoria=kyVu2b&codigo=1-000.

 

O que eu estou fazendo errado, da uma olhada no código fonte dela..

 

Obrigado ai pela ajuda..

[Rafael Impacto 15]

Conhece o cloud zoom?

 

Esse script faz exatamente o que você precisa.

 

http://www.professorcloud.com/mainsite/cloud-zoom.htm