none
Problemas con dos jquery que se pisan entre ellos. RRS feed

  • Pregunta

  • Buenas me descargé una plantilla con una galería ya hecha en jquery

    <!-- JAVASCRIPT DE LA GALERÍA --> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/jquery.galleriffic.js"></script> <script type="text/javascript" src="js/jquery.opacityrollover.js"></script>

    <script type="text/javascript" src="js/noscript.js"></script>

    <!--FUNCIONES DE LA CALERÍA-->					
    <script type="text/javascript">
    jQuery(document).ready(function($) {
    	// We only want these styles applied when javascript is enabled
    	$('div.navigation').css({'width' : '300px', 'float' : 'left'});
    	$('div.content').css('display', 'block');
    
    	// Initially set opacity on thumbs and add
    	// additional styling for hover effect on thumbs
    	var onMouseOutOpacity = 0.67;
    	$('#thumbs ul.thumbs li').opacityrollover({
    		mouseOutOpacity:   onMouseOutOpacity,
    		mouseOverOpacity:  1.0,
    		fadeSpeed:         'fast',
    		exemptionSelector: '.selected'
    	});
    	
    	// Initialize Advanced Galleriffic Gallery
    	var gallery = $('#thumbs').galleriffic({
    		delay:                     2500,
    		numThumbs:                 15,
    		preloadAhead:              10,
    		enableTopPager:            true,
    		enableBottomPager:         true,
    		maxPagesToShow:            7,
    		imageContainerSel:         '#slideshow',
    		controlsContainerSel:      '#controls',
    		captionContainerSel:       '#caption',
    		loadingContainerSel:       '#loading',
    		renderSSControls:          true,
    		renderNavControls:         true,
    		playLinkText:              'Play Slideshow',
    		pauseLinkText:             'Pause Slideshow',
    		prevLinkText:              '&lsaquo; Previous Photo',
    		nextLinkText:              'Next Photo &rsaquo;',
    		nextPageLinkText:          'Next &rsaquo;',
    		prevPageLinkText:          '&lsaquo; Prev',
    		enableHistory:             false,
    		autoStart:                 false,
    		syncTransitions:           true,
    		enableKeyboardNavigation:  false,
    		defaultTransitionDuration: 900,
    		onSlideChange:             function(prevIndex, nextIndex) {
    			// 'this' refers to the gallery, which is an extension of $('#thumbs')
    			this.find('ul.thumbs').children()
    				.eq(prevIndex).fadeTo('fast', onMouseOutOpacity).end()
    				.eq(nextIndex).fadeTo('fast', 1.0);
    		},
    		onPageTransitionOut:       function(callback) {
    			this.fadeTo('fast', 0.0, callback);
    		},
    		onPageTransitionIn:        function() {
    			this.fadeTo('fast', 1.0);
    		}
    	});
    });
    </script>

    Pero cuando le meto un SLIDER, estos se pisan, cuando aparece el SLIDER desaparece la galería, me he fijado que cuando quito esta línea del SLIDER

    <script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>

    vuelve aparecer la galería y el SLIDER a la vez, aunque el SLIDER falla un poco porque se desplazan las imagenes que muestra.

    Os dejo el código del SLIDER

    <!--JAVASCRIPT DEL SLIDER-->
    	
    	<script type="text/javascript" src="demo/scripts/jquery-1.7.1.min.js"></script>
        <script type="text/javascript" src="jquery.nivo.slider.js"></script>
    
    <!--SLIDER FUNCIONES-->
     <script type="text/javascript">
        $(window).load(function() {
            $('#slider').nivoSlider();
        });
        </script>
    

    Tras intentar buscar una solución, he usado el debugger del Chrome y me da error en una de las funciones de la galería cuando tengo puestos tanto el SLIDER como la galería a la vez en el código,cuando quito el SLIDER este error no se produce, no me dice nada el depurador.

    Aquí les dejo la captura para explicarme mejor:

    http://oi50.tinypic.com/r8uhsn.jpg

    Como ven no entiendo de javascript, cual sería la solución a este problema?, editar el primer jquery del slider?

    Muchas gracias.

    martes, 27 de noviembre de 2012 18:11

Todas las respuestas

  • Perdonad que no ponga la captura en un link, hasta que no me verifiquen la cuenta no puedo poner enlaces.

    martes, 27 de noviembre de 2012 18:19
  • Hola que tal,

    Obviamente ya pasó mucho tiempo de tu pregunta, pero yo acabo de pasar por el mismo problema, y considero que sería bueno dejar la respuesta para futuros usuarios con este problema:

    La solución es utilizar un jQuery.noConflict();

    esto me sucedía a mi:

    yo tenía un Slider con referencia a jquery-1.8.1.min.js pero la pagina tenía un menú con jquery-1.2.6.min.js al cual no tenía acceso por lo que me daban conflictos así que tuve que hacer lo siguiente:

    <link href="css/skitter.styles.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" language="javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.skitter.min.js"></script>
    <script type="text/javascript" language="javascript">
    $(document).ready(function () {
            $('.box_skitter_large').skitter({
                theme: 'default',
                numbers_align: 'center',
                progressbar: true,
                dots: true,
                preview: false
            });
        });
    </script>

    Reemplace y agregue por esto:

    <link href="css/skitter.styles.css" type="text/css" rel="stylesheet" />
    <script type="text/javascript" language="javascript" src="js/jquery-1.8.1.min.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.easing.1.3.js"></script>
    <script type="text/javascript" language="javascript" src="js/jquery.skitter.min.js"></script>
        <script type="text/javascript">
    jQuery.noConflict();
    </script>
    <script type="text/javascript" language="javascript">
    jQuery(document).ready(function () {
           jQuery('.box_skitter_large').skitter({
               theme: 'default',
               numbers_align: 'center',
               progressbar: true,
               dots: true,
               preview: false
           });
       });
    </script>

    y ya con eso funcionan los dos jQuerys al mismo tiempo...

    ojalá les sirva esto a futuros desarrolladores

    Gacias

    lunes, 9 de septiembre de 2013 17:11