Ir para conteúdo

POWERED BY:

Arquivado

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

wagsoler

Conflito entre bibliotecas javascript

Por , em Javascript

Recommended Posts

wagsoler    0

wagsoler
Postado

Olá amigos, estou com um problema aqui que me persegue a dias, acontece o seguinte, estou desenvolvendo um aplicativo web de visualização de imagens. Nele a maioria das funções são em Javascript.

 

Bom, o que acontece é o seguinte, quando nao insito o javascript de image Rotate ele funciona normalmente.

porem assim que eu o incluo o rotacionador de imagens acaba parando de funcionar.

 

mas se eu desativar duas bibliotecas Jquery que estão no topo ( no caso as bibliotecas externas ) ele volta a funcionar, porem o scroller nao faz mais o efeito de rolagem.

 

irei postar o codigo abaixo e espero que possam me ajudar, o codigo esta todo comentado, nao há erro =P

 

<HTML>
<HEAD>
<TITLE>img_3_ferramentas_sup</TITLE>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<link href="css/style.css" rel="stylesheet" type="text/css" media="screen" />
<link rel="stylesheet" href="css/style_nome.css" type="text/css" />
<!--<script type="text/javascript" src="http://code.jquery.com/jquery-latest.pack.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>-->
<script type="text/javascript" src="js/nome_img.js"></script>
<script type="text/javascript" src="js/script.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.8.13.custom.min.js"></script>
<script type="text/javascript" src="js/jquery.thumbnailScroller.js"></script>
<!-- FIM J.S -->


<!-- DIV ABRIR-FECHAR ========================================================================-->
   <script type="text/javascript">
       function divDinamica() {

           var divfechada = document.getElementById("divDireita").style.width.replace("%", "")

           if (divfechada != 0) {
               document.getElementById("divEsquerda").style.width = 97 + "%"
               document.getElementById("divDireita").style.width = 0 + "%"
           }
           else {
               document.getElementById("divEsquerda").style.width = 50 + "%"
               document.getElementById("divDireita").style.width = 49 + "%"
           }


       }
   </script>

<!--===== Rotate image ================================================================== -->

<script type="text/javascript">

function rotate(p_deg) {
if(document.getElementById('canvas')) {
	/*
	Ok!: Firefox 2, Safari 3, Opera 9.5b2
	No: Opera 9.27
	*/
	var image = document.getElementById('image');
	var canvas = document.getElementById('canvas');
	var canvasContext = canvas.getContext('2d');

	switch(p_deg) {
		default :
		case 0 :
			canvas.setAttribute('width', image.width);
			canvas.setAttribute('height', image.height);
			canvasContext.rotate(p_deg * Math.PI / 180);
			canvasContext.drawImage(image, 0, 0);
			break;
		case 90 :
			canvas.setAttribute('width', image.height);
			canvas.setAttribute('height', image.width);
			canvasContext.rotate(p_deg * Math.PI / 180);
			canvasContext.drawImage(image, 0, -image.height);
			break;
		case 180 :
			canvas.setAttribute('width', image.width);
			canvas.setAttribute('height', image.height);
			canvasContext.rotate(p_deg * Math.PI / 180);
			canvasContext.drawImage(image, -image.width, -image.height);
			break;
		case 270 :
		case -90 :
			canvas.setAttribute('width', image.height);
			canvas.setAttribute('height', image.width);
			canvasContext.rotate(p_deg * Math.PI / 180);
			canvasContext.drawImage(image, -image.width, 0);
			break;
	};

} else {
	/*
	Ok!: MSIE 6 et 7
	*/
	var image = document.getElementById('image');
	switch(p_deg) {
		default :
		case 0 :
			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0)';
			break;
		case 90 :
			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)';
			break;
		case 180 :
			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)';
			break;
		case 270 :
		case -90 :
			image.style.filter = 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)';
			break;
	};

};
};


window.onload = function() {
var image = document.getElementById('image');
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
	image.style.visibility = 'hidden';
	image.style.position = 'absolute';
} else {
	canvas.parentNode.removeChild(canvas);
};

rotate(0);
};

</script>     
<!-- DRAG DE IMAGEM ===========================================================================-->
<script language="JavaScript1.2">


var ie=document.all;
var nn6=document.getElementById&&!document.all;

var isdrag=false;
var x,y;
var dobj;

function movemouse(e)
{
 if (isdrag)
 {
   dobj.style.left = nn6 ? tx + e.clientX - x : tx + event.clientX - x;
   dobj.style.top  = nn6 ? ty + e.clientY - y : ty + event.clientY - y;
   return false;
 }
}

function selectmouse(e) 
{
 var fobj       = nn6 ? e.target : event.srcElement;
 var topelement = nn6 ? "HTML" : "BODY";

 while (fobj.tagName != topelement && fobj.className != "dragme")
 {
   fobj = nn6 ? fobj.parentNode : fobj.parentElement;
 }

 if (fobj.className=="dragme")
 {
   isdrag = true;
   dobj = fobj;
   tx = parseInt(dobj.style.left+0);
   ty = parseInt(dobj.style.top+0);
   x = nn6 ? e.clientX : event.clientX;
   y = nn6 ? e.clientY : event.clientY;
   document.onmousemove=movemouse;
   return false;
 }
}

document.onmousedown=selectmouse;
document.onmouseup=new Function("isdrag=false");

//-->
</script>



</HEAD>
<BODY>
<div class="Table_01">

   <!--======================================================================= LOGOTIPO -->

   <div class="img-3-ferramentas-sup-01">
   <!-- Esquerda -->
   <div id="topo_l"></div>
   <!--centro--> 	 
   <div id="topo_c">
   <div id="logo_topo">
     <img src="images/nome_logo.png" width="250" height="33" alt="" border="0"></div>

<!--========================================================================= Barra de ferramentas -->      
   <div id="bg_ferramentas">
   <div id="amarra_ferramentas"> 
   <div id="ferramentas"><a href="#"><img src="images/refresh.gif"  alt="atualizar" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/back_a_little.gif"  alt="anterior" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/go_a_little.gif"  alt="próxima" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/print.gif"  alt="imprimir" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/back_a_lot.gif"  alt="voltar ao início" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/go_a_lot.gif"  alt="voltar ao fim" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/zoom_mais.gif"  alt="mais Zoom" border="0" ></a></div>
   <div id="ferramentas"><a href="#"><img src="images/zoom_menos.gif"  alt="Menos Zoom" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/turn_to_left.gif"  alt="rotacionar a esquerda" border="0"></a></div>
   <div id="ferramentas"><a href="#"><img src="images/turn_to_right.gif"  alt="rotacionar a direita" border="0"></a></div>
   </div>
   </div>
<div id="nome_imgs">
<a href="nome_da_image.jpg" rel="shareit">Dados do Arquivo</a>
<div id="shareit-box">
<div id="shareit-header"></div>
<div id="shareit-body">
	<div id="shareit-blank"></div>
	<div id="shareit-url"><input type="text" value="" name="shareit-field" id="shareit-field" class="field"/></div>
       <div id="shareit-tamanho">Tamanho: 500x485 px</div>
       <div id="shareit-data">Data: 10/04/2012</div>
	</div>
</div>
</div>
<!--========================================================================= Botao SAIR -->

<div id="sair">
<a href="#">Sair <img src="images/btn_excluir.gif" alt="" border="0" height="22" width="22"></a>
</div>    

</div> 

   <!--direita-->
   <div id="topo_r"></div> 

 </div>

  <!--========================================================================= FIMD O TOPO -->

    <!--========================================================================= barra Lateral -->
   <div class="img-3-ferramentas-sup-02">
     <div id="barra_lateral_bg">
       <div id="contador">
       <img src="images/bg_contador.png" width="82" height="40">
       </div>
       <div id="contador_numero">
       1/30
       </div>
     			<div class="acc-section">
		<div class="acc-content" style="position:absolute">

<!-- Inicio do Scroller -->
<div id="tS3" class="jThumbnailScroller" style="height:520px;">
<div class="jTscrollerContainer">
	<div class="jTscroller">
		<a href="#"><img src="images/img-1.gif"/><br />imagem01.jpg</a>
		<a href="#"><img src="images/img-2.gif"/><br />imagem02.jpg</a>
		<a href="#"><img src="images/img-3.gif"/><br />imagem03.jpg</a>
		<a href="#"><img src="images/img-4.gif"/><br />imagem04.jpg</a>
		<a href="#"><img src="images/img-5.gif"/><br />imagem05.jpg</a>
		<a href="#"><img src="images/img-6.gif"/><br />imagem06.jpg</a>
		<a href="#"><img src="images/img-7.gif"/><br />imagem07.jpg</a>
           <a href="#"><img src="images/img-1.gif"/><br />imagem08.jpg</a>
		<a href="#"><img src="images/img-2.gif"/><br />imagem09.jpg</a>
		<a href="#"><img src="images/img-3.gif"/><br />imagem10.jpg</a>
		<a href="#"><img src="images/img-4.gif"/><br />imagem11.jpg</a>
		<a href="#"><img src="images/img-5.gif"/><br />imagem12.jpg</a>
		<a href="#"><img src="images/img-6.gif"/><br />imagem13.jpg</a>
		<a href="#"><img src="images/img-7.gif"/><br />imagem14.jpg</a>
           <a href="#"><img src="images/img-1.gif"/><br />imagem15.jpg</a>
		<a href="#"><img src="images/img-2.gif"/><br />imagem16.jpg</a>
		<a href="#"><img src="images/img-3.gif"/><br />imagem17.jpg</a>
		<a href="#"><img src="images/img-4.gif"/><br />imagem18.jpg</a>
		<a href="#"><img src="images/img-5.gif"/><br />imagem19.jpg</a>
		<a href="#"><img src="images/img-6.gif"/><br />imagem20.jpg</a>
		<a href="#"><img src="images/img-7.gif"/><br />imagem21.jpg</a>
	</div>
</div>
<a href="#" class="jTscrollerPrevButton"></a>
<a href="#" class="jTscrollerNextButton"></a>
</div>

<!-- Fim do Scroller -->


         </div>
	</div>

     </div>

</div>
<div class="img-3-ferramentas-sup-03">

<!-- O ARQUIVO DE IMAGEM OBRIGATÓRIAMENTE TERÁ QUE TER A CLASSE "DRAGME" PARA QUE DÊ PARA ARRASTA-LA DENTRO DA DIV -->

       <form id="form1" runat="server"> 
       <div id="divEsquerda" style="width:97%;">
   <div id="img_grande">
  <!-- nao retirar --> <img src="images/transp.png" width="17" height="17" alt="" border="0" id=""><br><!-- nao retirar -->

<!-- rotacionador de imagens -->

  <p>
rotate:
<input type="button" value="0°" onclick="rotate(0);" />
<input type="button" value="90°" onclick="rotate(90);" />
<input type="button" value="180°" onclick="rotate(180);" />
<input type="button" value="-90°" onclick="rotate(-90);" />
</p>
    <p>
<img id="image" src="images/conta_1.jpg" alt="" class="dragme"/>
<canvas id="canvas"></canvas>
</p>

<!-- fim do rotacionador de imagens -->
</div>    
   </div>
   <div id="pontilhada">
   </div>
   <div id="divDireita" style="width:0%;">
       <a href="#" onClick="divDinamica();"><img src="images/but.png" width="17" height="17" alt="Ativar modo de Comparação" border="0"></a>
           <div id="img_grande">
     <img src="images/conta_2.jpg" class="dragme"></div>    
   </div>
   </div>
   </form>


   </div>
</div>
<!-- SCROLLER -->
<script>

jQuery.noConflict(); 
(function($){
window.onload=function(){ 
$("#tS3").thumbnailScroller({ 
	scrollerType:"clickButtons", 
	scrollerOrientation:"vertical", 
	scrollSpeed:2, 
	scrollEasing:"easeOutCirc", 
	scrollEasingAmount:3000, 
	acceleration:4, 
	scrollSpeed:800, 
	noScrollCenterSpace:0, 
	autoScrolling:0, 
	autoScrollingSpeed:3000, 
	autoScrollingEasing:"easeInOutQuad", 
	autoScrollingDelay:3000
});
}
})(jQuery);
</script>
</BODY>
</HTML>

 

acabei descobrindo aqui que se trata de algum erro de noConflict

 

porem nao consigo soluciona-lo !

Compartilhar este post

Link para o post
Compartilhar em outros sites

Ted k'    126

Ted k'
Postado

tente substituir:

 

jQuery.noConflict(); 
jQuery(function(){
     jQuery("#tS3").thumbnailScroller({ 
             scrollerType:"clickButtons", 
               scrollerOrientation:"vertical", 
               scrollSpeed:2, 
               scrollEasing:"easeOutCirc", 
               scrollEasingAmount:3000, 
               acceleration:4, 
               scrollSpeed:800, 
               noScrollCenterSpace:0, 
               autoScrolling:0, 
               autoScrollingSpeed:3000, 
               autoScrollingEasing:"easeInOutQuad", 
               autoScrollingDelay:3000
       });
});

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