Ir para conteúdo

POWERED BY:

Arquivado

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

biza

Problemas com jQuery

Por , em Javascript

Recommended Posts

biza    1

biza
Postado

Viva pessoal , tenho um site que esta totalmente concluído , no entanto tenho problemas a nível de jquery , estou usando este para a funcionalidade de umas abas e de um datapiker , mas o problema esta numa galeria de imagens , caso adicione esta a pagina mantenha a jquery para os outros elementos. os elementos funcionam perfeitamente a galeria não , caso duplique a chamada de jquery , a galeria funciona o jquery deixa de funcionar , alguém me ajuda a resolver esse problema

Compartilhar este post

Link para o post
Compartilhar em outros sites

biza    1

biza
Postado

ai leandri tentei o que você me disse mas ficou igual vou postar o cdigo para você poder dar uma olhadela e me dizer se existe algo de errado com ele .

<!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=ISO-8859-1" />
<link href="css/estilos.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" type="text/css" href="css/superfish.css" media="screen">
<link href="css/css.css" rel="stylesheet" type="text/css" />
<link href="css/style.css" rel="stylesheet" type="text/css" />


<!-- calendario -->
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-ui.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<!-- aba -->
<script src="js/aba.js" type="text/javascript"></script>
<!-- chama da galeria-->
<script type="text/javascript">
$.noConflict();
var currentImage;
   var currentIndex = -1;
   var interval;
   function showImage(index){
       if(index < $('#galery img').length){
       	var indexImage = $('#galery img')[index]
           if(currentImage){   
           	if(currentImage != indexImage ){
                   $(currentImage).css('z-index',2);
                   clearTimeout(myTimer);
                   $(currentImage).fadeOut(250, function() {
				    myTimer = setTimeout("showNext()", 3000);
				    $(this).css({'display':'none','z-index':1})
				});
               }
           }
           $(indexImage).css({'display':'block', 'opacity':1});
           currentImage = indexImage;
           currentIndex = index;
           $('#thumbs li').removeClass('active');
           $($('#thumbs li')[index]).addClass('active');
       }
   }

   function showNext(){
       var len = $('#galery img').length;
       var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
       showImage(next);
   }

   var myTimer;

   $(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
	showNext(); //loads first image
       $('#thumbs li').bind('click',function(e){
       	var count = $(this).attr('rel');
       	showImage(parseInt(count)-1);
       });
});


</script>	
</head>
<?php 
$dir="universo/actividades/";
$sql = "SELECT tbl_universos.id_universo, tbl_universos.universo, tbl_sub_universo.id_subuniverso, tbl_sub_universo.subuniverso, tbl_sub_universo.universo_id, tbl_actividade.id_actividade, tbl_actividade.subuniverso_id, tbl_actividade.entidade, tbl_actividade.legenda, tbl_actividade.preco, tbl_actividade.pessoa, tbl_actividade.referencia, tbl_detalhe_actividade.actividade_id, tbl_detalhe_actividade.periodo, tbl_detalhe_actividade.descricao, tbl_detalhe_actividade.programa, tbl_detalhe_actividade.informacoes, tbl_detalhe_actividade.actividades, tbl_detalhe_actividade.localizacao, tbl_detalhe_actividade.locais, tbl_detalhe_actividade.servicos, tbl_imagem_produto.imagem1, tbl_imagem_produto.imagem2, tbl_imagem_produto.imagem3, tbl_imagem_produto.imagem4, tbl_imagem_produto.imagem5, tbl_imagem_produto.imagem6, tbl_imagem_produto.actividade_id FROM tbl_universos, tbl_sub_universo, tbl_actividade, tbl_detalhe_actividade, tbl_imagem_produto
WHERE tbl_sub_universo.id_subuniverso = tbl_actividade.subuniverso_id AND tbl_actividade.id_actividade = tbl_detalhe_actividade.actividade_id
AND tbl_actividade.id_actividade = tbl_imagem_produto.actividade_id AND tbl_actividade.id_actividade=" .$_GET['id'];
$resultado = mysql_query($sql) or die ("Não foi possível realizar a consulta.");
$row = mysql_fetch_array($resultado);
$valor = $row["preco"];
$ida = date("d-m-Y");
$volta = strtotime(date("d-m-Y", strtotime($ida)) . " +1 day");

?>
<body onload="calcular();">
<div id="container">
<div id="sub_menu">
<div id="campo_link" class="verde"><?php  echo $row["universo"];?> <span class="setas">»</span><a href="index.php?pag=univ&id=<?php  echo $row['id_subuniverso']; ?>"> <?php  echo $row["subuniverso"];?></a> <span class="setas">»</span> <?php  echo $row["entidade"];?></div>
<div style="clear: both;"></div>
</div>
<!-- caracteristicas gerais -->
<div id="geral2">
<div id="titulos">Especificações Gerais</div>

<div id="item1_actividade"></div><div id="item2_actividade"></div>
  <div style="clear: both;"></div>
 <div id="item_actividade">Funcionamento:</div><div id="item_actividade1"><?php  echo $row["periodo"];?></div>
 <div style="clear: both;"></div>
 <div id="item1_actividade"></div><div id="item2_actividade"></div> 
 <div style="clear: both;"></div>
 <div id="item_actividade">Programa:</div><div id="item_actividade1"><?php  echo $row["entidade"];?></div>
 <div style="clear: both;"></div>
   <div id="item1_actividade"></div><div id="item2_actividade"></div> 
 <div style="clear: both;"></div>
 <div id="item_actividade">Serviços:</div>
 <div id="item_actividade1"><?php  echo $row["servicos"];?></div>
 <div style="clear: both;"></div>
   <div id="item1_actividade"></div><div id="item2_actividade"></div> 
 <div style="clear: both;"></div>
 <div id="item_actividade">Localização:</div>
 <div id="item_actividade1"><?php  echo $row["localizacao"];?></div>
 <div style="clear: both;"></div>
     <div id="item1_actividade"></div><div id="item2_actividade"></div> 
 <div style="clear: both;"></div>
 <div id="item_actividade">Preço:</div>
 <div id="item_actividade1" ><span class="euro"><?php  echo $row["preco"];?> €</span></div>
  <div style="clear: both;"></div>
  <span style="width:auto; font-size:9px; font-family:Arial, Helvetica, sans-serif;padding:10px 10px; text-align:right; float:right; margin-right:20px;">Iva incluido a taxa em vigor.</span>
    <div style="clear: both;"></div>
   <div id="item_actividade"><img src="img/activity_person.gif"/></div>
 <div id="item_actividade1" class="pessoa"><?php  echo $row["pessoa"];?> Pessoa(s)</div>
 <div style="clear: both;"></div>
    <script type="text/javascript">  
function id( el ){  
       return document.getElementById( el );  
}  
window.onload = function(){ 

var valor="<?php echo $valor; ?>";
preco = valor.replace(",",".");
id('total').value = preco * id('quantidade').value; 
       id('mais').onclick = function(){  
               id('quantidade').value = parseInt( id('quantidade').value )+1;  

               id('total').value = preco * id('quantidade').value;  
       }  
       id('menos').onclick = function(){  
               if( id('quantidade').value> 1 )  
                       id('quantidade').value = parseInt( id('quantidade').value )-1;  

               id('total').value = preco * id('quantidade').value;  
       }  
}  
</script> 
 <!-- carrinho de compra -->
 <div id="rural1">
  <form action="index.php?pag=sumary"  method="post">

 <div id="verde"><?php  echo $row["legenda"];?></div>
<div id="carro1">Quantidade:</div><div id="carro2"><input type="text" name="quantidade_a" value="1"  id="quantidade" size="5" class="quant" /></div> 
<input type="hidden" name="id_a" id="id_a" value="<?php echo $row['id_actividade'];?>" />
<input type="hidden" name="referencia"  value="<?php echo $row['referencia'];?>" />
<div id="carro3"><input type="button" name="mais" id="mais" value="[+]" class="up"/>  <input type="button" name="menos" id="menos" value="[-]"  class="down"/></div>
  <div style="clear: both;"></div>
  <div id="carro_compra_but">
 <?php if ($row["referencia"] =="EVE"){


echo'  <div id="data_item">Data Entrada:</div>
  <div id="data_campo">
    <input name="entrada" type="text" class="datepicker" id="entrada" value="'.$ida.'"/>
  </div><div id="data_img"><label for="entrada"><img src="img/datapicker.png"/></label></div>
  <div style="clear: both;"></div>';
    echo' <div id="data_item">Data Saida:</div>
  <div id="data_campo">
    <input name="saida" type="text" class="datepicker" id="saida" value="'.date('d-m-Y', $volta).'"/>
  </div><div id="data_img"><label for="saida"><img src="img/datapicker.png"/></label></div>
  <div style="clear: both;"></div>';
  }else if($row["referencia"] =="ACT"){
   echo' <div id="data_item">Data Actividade:</div>
  <div id="data_campo">
    <input name="entrada" type="text" class="datepicker" id="entrada" value="'.$ida.'"/>
  </div><div id="data_img"><label for="entrada"><img src="img/datapicker.png"/></label></div>
  <div style="clear: both;"></div>';}?>
  </div>
  <div id="carro_compra_but"><!-- buttoes  carrinho-->
<div id="item_butt_car"><input name="add" type="submit" class="add1" onmouseover="this.className='add1 add2'" onmouseout="this.className='add1'" value="add" /></div>
   <div id="item_butt_car"><a class="add2cart" rel="ajax_id_product_1" href="index.php?pag=fin" title="ver produto">finalizar</a></div>
  </div>
  <div style="clear: both;"></div>

   <div id="mostra">
    <div id="carro1a">Total:</div> <div id="carroa2"></div> <div id="carro3a"><input name="total" id="total" class="total" value="0" size="10" /></div><div id="carr2">€</div>
    </div>
    <div id="verde"><?php  if(!isset($_SESSION['final']['quantidade'])){ echo'Não existe qualquer produto adicionado'; }else { echo 'Existe(m) ' .$_SESSION['final']['quantidade'].' produtos em carrinho' ; }?></div>
   </form>
 </div>
 <div style="clear: both;"></div>
</div>


<!-- fim das caracteristicas gerais -->
<div class="titu_produt" style="width:575px;"><?php  echo $row["entidade"];?></div>

<div id="pslider" style="width:599px;">
     <!-- start slideshow -->

     <div id="galery">
     <?php  echo'
  <img src="'.$dir.''.$row['imagem1'].'" alt="icon" width="580" height="410" />
  <img src="'.$dir.''.$row['imagem2'].'" alt="icon" width="580" height="410" />
  <img src="'.$dir.''.$row['imagem3'].'" alt="icon" width="580" height="410" />
  <img src="'.$dir.''.$row['imagem4'].'" alt="icon" width="580" height="410" />
  <img src="'.$dir.''.$row['imagem5'].'" alt="icon" width="580" height="410" />
  <img src="'.$dir.''.$row['imagem6'].'" alt="icon" width="580" height="410" />
  '; ?>
     </div>


<ul id="thumbs">
<?php  if($row['imagem1'] !=""){echo' <li class="active" rel="1"><img src="'.$dir.''.$row['imagem1'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
 <?php  if($row['imagem2'] !=""){echo' <li rel="2"><img src="'.$dir.''.$row['imagem2'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
  <?php  if($row['imagem3'] !=""){echo' <li rel="3"><img src="'.$dir.''.$row['imagem3'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
   <?php  if($row['imagem4'] !=""){echo' <li rel="4"><img src="'.$dir.''.$row['imagem4'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
    <?php  if($row['imagem5'] !=""){echo' <li rel="5"><img src="'.$dir.''.$row['imagem5'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
     <?php  if($row['imagem6'] !=""){echo' <li rel="6"><img src="'.$dir.''.$row['imagem6'].'" alt="icon" width="90" height="65"/></li>';} else{echo'';}?>
       </ul>
<script type="text/javascript">
$.noConflict();
var currentImage;
   var currentIndex = -1;
   var interval;
   function showImage(index){
       if(index < $('#galery img').length){
       	var indexImage = $('#galery img')[index]
           if(currentImage){   
           	if(currentImage != indexImage ){
                   $(currentImage).css('z-index',2);
                   clearTimeout(myTimer);
                   $(currentImage).fadeOut(250, function() {
				    myTimer = setTimeout("showNext()", 3000);
				    $(this).css({'display':'none','z-index':1})
				});
               }
           }
           $(indexImage).css({'display':'block', 'opacity':1});
           currentImage = indexImage;
           currentIndex = index;
           $('#thumbs li').removeClass('active');
           $($('#thumbs li')[index]).addClass('active');
       }
   }

   function showNext(){
       var len = $('#galery img').length;
       var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
       showImage(next);
   }

   var myTimer;

   $(document).ready(function() {
    myTimer = setTimeout("showNext()", 3000);
	showNext(); //loads first image
       $('#thumbs li').bind('click',function(e){
       	var count = $(this).attr('rel');
       	showImage(parseInt(count)-1);
       });
});


</script>	

<div style="width:150px; font-family:Arial, Helvetica, sans-serif;margin:5px 0px 5px 10px; float:left; text-align:justify;">Descrição Programa:</div>
<div style="width:565px; margin:5px 0px 5px 10px; float:left; font-family:Arial, Helvetica, sans-serif; text-align:justify;"><?php  echo $row["programa"];?></div>
<div style="clear: both;"></div>

 </div>




<div id="ficha_tecnica">
 <div class="box">
 <div id="tecnica1" class="tecnica"> 
 <ul> 
   <?php  if($row['descricao'] !=""){echo'<li><a href="#tab1" class="selected">Descrição do Local</a></li> ';}?>
  <?php  if($row['informacoes'] !=""){echo' <li><a href="#tab2">Informações Úteis</a></li>  ';}?>
 <?php  if($row['locais'] !=""){echo'  <li><a href="#tab3">Pontos de Interesse</a></li>  ';}?>
 </ul> 
<?php  if($row['descricao'] !=""){echo'   <div id="tab1" style="display: block; font-family:Tahoma, Geneva, sans-serif; text-align:justify; font-size:11px; color:#666; padding:20px 10px 40px 10px; width: 880px;">'.$row["descricao"].'</div>';}?>
<?php  if($row['informacoes'] !=""){echo'  <div id="tab2" style="display: none; font-family:Tahoma, Geneva, sans-serif; text-align:justify; font-size:11px; color:#666; padding:20px 10px 40px 10px; width: 880px;">'. $row["informacoes"].'</div> ';}?>
 <?php  if($row['locais'] !=""){echo' <div id="tab3" style="display: none; font-family:Tahoma, Geneva, sans-serif; text-align:justify; font-size:11px; color:#666; padding:20px 10px 40px 10px; width: 880px;">'. $row["locais"].'</div> 
</div>';}?>

<script type="text/javascript"> 
 $("#tecnica1 ul").idTabs(); 
</script>
 </div>
</div>
<div style="clear: both;"></div>
</div>

</div>
</body>
</html>

 

caso utilize uma so chamada o resultado é esse:

1.jpg

 

 

caso utilize duas chamadas jquery o resultado é esse:

2.jpg

Obrigado abraço

Compartilhar este post

Link para o post
Compartilhar em outros sites

Leandro Chaves    0

Leandro Chaves
Postado

Tenta trocar o trecho "chama galeria" por isso(eu coloquei o trecho dentro de uma função anônima):

<script type="text/javascript">
$.noConflict();
(function( $ ){
       var currentImage;
   var currentIndex = -1;
   var interval;
   function showImage(index){
       if(index < $('#galery img').length){
               var indexImage = $('#galery img')[index]
           if(currentImage){   
               if(currentImage != indexImage ){
                   $(currentImage).css('z-index',2);
                   clearTimeout(myTimer);
                   $(currentImage).fadeOut(250, function() {
                                           myTimer = setTimeout("showNext()", 3000);
                                           $(this).css({'display':'none','z-index':1})
                                       });
               }
           }
           $(indexImage).css({'display':'block', 'opacity':1});
           currentImage = indexImage;
           currentIndex = index;
           $('#thumbs li').removeClass('active');
           $($('#thumbs li')[index]).addClass('active');
       }
   }

   function showNext(){
       var len = $('#galery img').length;
       var next = currentIndex < (len-1) ? currentIndex + 1 : 0;
       showImage(next);
   }

   var myTimer;

   $(document).ready(function() {
           myTimer = setTimeout("showNext()", 3000);
               showNext(); //loads first image
       $('#thumbs li').bind('click',function(e){
               var count = $(this).attr('rel');
               showImage(parseInt(count)-1);
       });
       });

})(jQuery);
       </script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

aperte Ctrl+Shift+J no Firefox, veja quais erros aparecem. Corrija.

 

Leitura:

http://wbruno.com.br/blog/2011/03/31/como-debugar-javascript-firefox-erros-comuns/

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