Ver Mensaje Individual
  #1 (permalink)  
Antiguo 09/12/2014, 10:32
ruben_077
 
Fecha de Ingreso: mayo-2014
Mensajes: 23
Antigüedad: 10 años
Puntos: 0
Conflicto entre MooTools y jQuery

Hola, tengo un problema al usar MooTools y jQuery a la vez, ya que pierdo la funcionalidad de uno de ellos. En mi caso, estoy haciendo uso de bxSlider con jQuery de la siguiente manera:

Código:
<script type="text/javascript" src = "js/jquery.bxslider.js"></script>
<script type="text/javascript">
$(document).ready(function() {
		$('.slider').bxSlider({
			startAuto: true,
			infiniteLoop:true,
	  		auto: true,
			controls:false,
			autoControls:false,
			pause:6000
		});
	}); 
</script>
El resto del código no lo coloco, pero la finalidad viene a ser 5 imágenes pasando automáticamente.

Al añadir el js de MooTools (moo.rd_1.3.2_mootools_1.2.js), el código jQuery del bxSlider deja de funcionar, de manera que se coloca una imagen debajo de la otra (en altura). Sin embargo, si uso el código jQuery de la siguiente manera:

Código:
<script type="text/javascript" src = "js/jquery.bxslider.js"></script>
<script type="text/javascript">
jQuery.noConflict();
jQuery(document).ready(function() {
		jQuery('.slider').bxSlider({
			startAuto: true,
			infiniteLoop:true,
	  		auto: true,
			controls:false,
			autoControls:false,
			pause:6000
		});
	}); 
</script>
El bxSlider funcionará pero de mala manera, se generan infinitas imágenes, con unos divs dentro de otros, hasta el punto que la página peta.

¿Se os ocurre alguna solución?

En el caso de que no haya forma tendría que pasar todo código que haya de MooTools a jQuery, lo cual es un coñazo... Lo que de momento más me importa es pasar este, que ya he probado algunas cosas pero sin resultado, ya que no entiendo mucho de Javascript en general:

Código:
window.addEvent('domready', function() {
	if($('resumen_cesta')){
		$('resumen_cesta').setStyle('display', 'none');
		$('resumen_cesta').setStyle('opacity', '0');
		if($('cesta_compra')){	
			$('cesta_compra').addEvent('mouseover', function(){
				$('resumen_cesta').setStyle('display', 'block');
				$('resumen_cesta').morph({
				  'opacity':'1'
				});
			});
			$('cesta_compra').addEvent('mouseout', function(){   
				$('resumen_cesta').morph({
				  'opacity':'0'
				});   
			});
		}
	}
});