Ir para conteúdo

POWERED BY:

Arquivado

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

luisfernando6

[Resolvido] Efeito Jquery de Zoom em imagens não funciona

Por , em Javascript

Recommended Posts

luisfernando6    0

luisfernando6
Postado

Olá a todos.

Estou com dificuldades para fazer rodar um efeito jquery que dá zoom nas imagens.

 

No meu index, eu tenho um require de um arquivo que chama uma página onde tenho uma foto para fazer o zoom.

Quando eu acesso o arquivo diretamente do navegador, sem passar pelo index, o efeito de zoom funciona perfeito.

O problema é que se entro no index e aí click no link para abrir a página para ver o zoom, ele não funciona.

Como eu poderia arrumar isso aí ?

 

Segue abaixo meu código do meu index

<?php

  session_start(); 
 include_once('util/conecta.php');
 include_once('carrinho/carrinho_manutencao.php');
 $oquefazer = new carrinho_manutencao();




?>

<!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>Untitled Document</title>
<link href="carrinho/estilo.css" type="text/css" rel="stylesheet" />
<link href='http://fonts.googleapis.com/css?family=Cuprum' rel='stylesheet' type='text/css' />

<script type="text/javascript" src="jqplugin/menubolado/jquery-1.8.0.min.js"></script>
<script type="text/javascript">

$(document).ready(function()
{
   $('#menu ul li').prepend('<span></span>');
$('#menu ul li').each(function()
	 {
		var texto = $(this).find('a').text();
		$(this).find('span').text(texto);
	 });
$('#menu ul li').hover(function()
	 {			
		$(this).find('span').stop().animate({
			marginTop:"-40px"
		},600);
	 }, function(){
	 	$(this).find('span').stop().animate({
			marginTop:"0px"
	 	},300);
	 });
});

</script>


<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
<script type="text/javascript" src="jqplugin/carousel/js/infinitecarousel/jquery.infinitecarousel2.js"></script>
<script type="text/javascript">

$(function(){

$('#carousel').infiniteCarousel();

});

</script>


</head>		      	        
<body>
<div id="blocogeral">	

<div id="topo">

</div>

 <div id="menu"> <!--começo div menu-->
  <ul>
  	<li><a href="#"> Home </a> </li>
<li><a href="#"> A Empresa </a> </li>
<li><a href="#"> Expediente </a> </li>	
<li><a href="#"> Cadastro </a> </li>
<li><a href="#"> Contato </a> </li>
<li><a href="#"> Cadastro </a> </li>

  </ul>
 </div><!--fim div menu-->


  <div id="wrapcar"> 
<div id="carousel">
 <ul>

 <li>
   <img width="960" src="imagens/1.jpg"  height="300px"/>
   <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>

 <li>
 <img width="960" height="300" src="imagens/2.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>

 <li>
 <img width="960" height="300" src="imagens/3.jpg"/>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>

 <li>
 <img width="960" height="300" src="imagens/4.jpg"/>
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>

 <li>
 <img width="960" height="300" src="imagens/5.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>

 <li>
 <img width="960" height="300" src="imagens/6.jpg" />
 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis fringilla aliquam ligula sagittis pellentesque. Sed pretium volutpat cursus. </p>
 </li>
 </ul>	 
</div>
<div class="linha">
<div class="coluna0"></div>
   <div class="coluna1"> Produtos do Carrinho</div>
   <div class="coluna2"> <img src="imagens/prodcart.png"  align="right"/></div>
   <div class="coluna3"> <form action="" method="get"><input type="text" size="40" maxlength="40" />
   </form> </div>
   <div class="coluna4"> <img src="imagens/procurar.png" align="right" /></div>
</div>
  </div>   

<div id="clear"></div>
<div id="tamanho5px"> </div>
  <div id="coluna-esquerda">
<?php   
require('carrinho/listar_categoria.php');	
?>
</div>

<div id="centro">
<?php 

   require('carrinho/carrinho_acao.php');

?>		
</div>

<div id="clear"></div>

<div id="rodape">
rodape
</div>	

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

 

E aqui é o código da página que abre a foto com o zoom

<script src="../jqplugin/jqzoom_ev-2.3/js/jquery-1.6.js" type="text/javascript"></script>
<script src="../jqplugin/jqzoom_ev-2.3/js/jquery.jqzoom-core.js" type="text/javascript"></script>
<LINK rel=stylesheet type=text/css href="../jqplugin/jqzoom_ev-2.3/css/jquery.jqzoom.css">

<A class=MYCLASS title=MYTITLE href="jqplugin/jqzoom_ev-2.3/demos/imgProd/triumph_big1.jpg">  
   <IMG title="IMAGE TITLE" src="jqplugin/jqzoom_ev-2.3/demos/imgProd/triumph_small1.jpg">  
</A>

<script type="text/javascript">


$(document).ready(function(){  
   $('.MYCLASS').jqzoom();  
});  

</script>

 

Obrigado pela atenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

você está chamando a lib jQuery várias vezes. Não faça isso.

 

isso:

<script type="text/javascript" src="jqplugin/menubolado/jquery-1.8.0.min.js"></script>

isso:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

e isso:

<script src="../jqplugin/jqzoom_ev-2.3/js/jquery-1.6.js" type="text/javascript"></script>

são todos a mesma coisa.

 

chame apenas uma única vez, em cima de tudo.

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