Jcarousel + jqzoom

[Rafael Antonio da Silva 0]

BOM DIA

ALGUEM PODERIA ME AJUDAR ESTOU TENTANDO APLICAR O JQZOM EM UM CAROUSEL MAS O QUE USO ESTA EM LISTA COM AS <LI> CADA IMAGEM :::

no meu codigo tem uma imagem a baixo sozinha sem esta dentro da ul e da div carousel esta imagem funciona erfeitamente o efeito mas a que esta dentro das <li> nao funcionao alguem conseguiria resolver?

agradeço des de já....

 

 

 

 

 

<div id="content-2">
<div id="titulos">LOOKBOOK</div>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jcarousellite.js"></script>
<script type="text/javascript" src="jqzoom/js/jquery.jqzoom.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("img.jqzoom").jqueryzoom({
	xzoom: 200, //zooming div default width(default width value is 200)
	yzoom: 200, //zooming div default width(default height value is 200)
	offset: 10 //zooming div default offset(default offset value is 10)
});
});
</script>
<link rel="stylesheet" href="jqzoom/style/jqzoom.css" type="text/css" media="screen" />
<script type="text/javascript">
$(function(){
  $(".carosel").jCarouselLite({
    btnNext: ".next",
    btnPrev: ".prev",
    visible: 3,
     speed: 1000
  })
})
</script>
  <style>
#carosel{width:840px; margin:10px; background:;}
#carosel img{width:290px; height:400px; padding:5px; border:1px solid #ccc; margin:0 8px;float:left; border:0;}
.carosel{ background:;height:400px; }
.prev{  width:95px; height:28px; border:0; margin-top:30px; margin-bottom:20px; background:#069 url(imagens/bt2.png)no-repeat;}
.next{  width:95px; height:28px; border:0; margin-left:350px; background:#069 url(imagens/bt1.png)no-repeat;}
</style>
  <div id="carosel">
  <div class="carosel">
  <ul>
   ========================================= AQUI NESTA LI QUE MOSTRA AS IMAGEMS NO CARROSEL O ZOM FICA PARADO NAO TEM COMO MOVER ESTAS DUAS TA COM O JQ ZOM AS OUTRAS NAO =======================
   <li><a href=""><img src="uploads/lookbook/8.jpg" class="jqzoom"  alt="uploads/lookbook/8.jpg"></a></li>
   <li><a href=""><img src="uploads/lookbook/8.jpg" class="jqzoom"  alt="uploads/lookbook/8.jpg"></a></li>
   =================================================================

 	<li><a href=""><img src="uploads/lookbook/lookbook-site_inv12_5.jpg" alt="" /></a></li>
<li><a href=""><img src="uploads/lookbook/03.jpg" alt="" /></a></li>
	<li><a href=""><img src="uploads/lookbook/02.jpg" alt="" /></a></li>
<li><a href=""><img src="uploads/lookbook/03.jpg" alt="" /></a></li>
<li><a href=""><img src="uploads/lookbook/4.jpg" alt="" /></a></li>
<li><a href=""><img src="uploads/lookbook/5.jpg" alt="" /></a></li>
<li><a href=""><img src="uploads/lookbook/6.jpg" alt="" /></a></li>
   </ul>
</div><!--carosel calsse-->
</div><!-- carosel div-->
      <button class="next"> </button>
    <button class="prev"> </button>

========================================= AQUI ESTA IMAGEM ESTA FUNCIONANDO NORMAL COM LINK E ZOMM =======================

 <a href="link galeria">
<img src="uploads/lookbook/6.jpg" class="jqzoom"  alt="<?php echo $urlbase_config;?>/uploads/lookbook/6.jpg" width="200" height="200">
</a>
  ========================================= AQUI ESTA IMAGEM ESTA FUNCIONANDO NORMAL COM LINK E ZOMM =======================
 </div><!-- content 2 -->

[Luis Carlos Steffens 0]

já fiz essa aventura em um site de um cliente meu, demorei cerca de 2 horas pensando e tentando fazer, mas deu certo.

 

Assim

1° coloca uma id na imagem com a class="jqzoom",

 

2° crie uma função que servira para alterar o src da imagem class="jqzoom" utilizando o $("id escolhido para a imagem jqzoom").attr("src","nova imagem"). Essa função deve ter pelo menos 1 parâmetro, ou seja, o src da nova imagem que vai ter o efeito de zoom aplicado;

 

3° em cada imagem da li do carrocel adicione o atributo onClick="funcao que você criou anteriormente( src da imagem que deve ter o efeito zoom )"

 

Acho que isso resolve seu problema, precisando estamos ai.