• User Attivo

    conflitto tra lightbox e jquery

    Non è proprio possibbile usarli tutte due insieme?
    Questa e la parte di codice html:

    <script type="text/javascript" src="lightbox2.04/js/prototype.js"></script>
    <script type="text/javascript" src="lightbox2.04/js/scriptaculous.js"></script>
    <script type="text/javascript" src="lightbox2.04/js/lightbox.js"></script>

    <script src="JS/jquery/jquery.js"type="text/javascript"></script>
    <script src="JS/jquery/jquery.wslide.js" type="text/javascript"></script>
    <script type="text/javascript" charset="utf-8">
            $(document).ready(function(){
                
                $("#parent2").wslide({
                    width: 850,
                    height: 250,
                    autolink:'welcome',
                    fade: true,
                    duration: 2000
                   }); 
                }); 
    
    </script>
    

    Il jquery funziona in ogni caso,
    il lightbox funziona solo al momento che nn ce jquery!

    Come risolvere?


  • Moderatore

    Devi usare il noConflict.
    In questo modo per usare le chiamate JQuery basterà scrivere jQuery al posto del $, mentre quest'ultimo continuerà ad essere riservato per l'altra libreria (nel tuo caso prototype).

    Eccoti un esempio:

    
    jQuery.noConflict();
     
    jQuery(document).ready(function(){
      // fai qualcosa con JQuery
    });
     
    // Questa viene fatta usando prototype
    $('id').hide();
    
    

  • User Attivo

    @Shad said:

    Devi usare il noConflict.
    In questo modo per usare le chiamate JQuery basterà scrivere jQuery al posto del $, mentre quest'ultimo continuerà ad essere riservato per l'altra libreria (nel tuo caso prototype).

    Eccoti un esempio:

    
    jQuery.noConflict();
    
    jQuery(document).ready(function(){
     // fai qualcosa con JQuery
    });
    
    // Questa viene fatta usando prototype
    $('id').hide();
    
    

    Ciao, ho cambiato un menù dal sito che sto realizzando, passando da un menù flash ad uno jquery, il menù funziona bene, il problema è che nelle pagine dove ho i prodotti, che hanno una lightbox va in conflitto.
    Riprendo questo post di un altro utente di quasi un anno fa, perchè sembra lo stesso problema, ho provato ad utilizzare il metodo che hai proposto tu, prima senza quest'ultimo non mi funzionava più il lightbox, ora il lightbox funziona però il problema resta nel menù che non restano inattive le animazioni. potreste aiutarmi? grazie!

    questi sono i codici che ho inserito

    <script type='text/javascript' src='js/jquery-1.3.2.min.js'></script>
    <script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
    <script type='text/javascript' src='js/jquery.spritemenu-0.2.js'></script>
    <script type='text/javascript'>
    jQuery(document).ready(function(){
    jQuery('#menu').spritemenu({
    grid:"images/menu.png",
    buttonwidth: 110,
    buttonheight: 40,
    speed: 'slow',
    easing: 'easeOutBounce', //You need the easing plugin for anything other than 'swing' or 'linear'
    animate: 'height'
    });
    jQuery('#menu2').spritemenu({
    grid:"images/menu.png",
    buttonwidth: 110,
    buttonheight: 40
    });
    });
    var jQuery = jQuery.noConflict();

    // Questa viene fatta usando prototype
    $('pic').hide();
    </script>

    //poi dove ho il lightbox

     	<script src="js/prototype.js" type="text/javascript"></script>
    	<script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

  • User

    ciao a tutti

    io ho il problema far coesistere due java script... inserendo le varianti a $ il tool la riconosce ma cmq non fa l'effetto desiderato ti allego il codice...HELP MEEEEEEEEEE

    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="ScrollNews.jquery.js"></script>
    <script language="javascript" >
    <!--
    jQuery(document).ready(function(){
    jQuery("#generale").ScrollNews({
    inizialize : 'true',
    size : '130px',
    timeout : 2500,
    speed : 'fast',
    direction : 'down',
    onmouseover : 'stop'
    });
    });
    -->
    var jQuery = jQuery.noConflict();
    </script>
    <script type="text/javascript" src="mootools-beta-1.2b2.js"></script>
    <script type="text/javascript" src="MooFlow.js"></script>
    <script type="text/javascript" src="MooFlowViewer.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */

    var myMooFlowPage = {
    
    	start: function(){
    		/* MooFlow instance with the complete UI and Viewer */
    		var mf = new MooFlow($('MooFlow'), {
    			useSlider: true,
    			useAutoPlay: true,
    			useCaption: true,
    			useResize: true,
    			useMouseWheel: true,
    			useKeyInput: true,
    			useViewer: true
    		});
    		
    		mf.attachViewer();
    		
    		$$('.loadremote').addEvent('click', function(){
    			mf.loadHTML(this.get('a href'), this.get('rel'));
    			return false;
    		});
    		
    	}
    	
    };
    
    window.addEvent('domready', myMooFlowPage.start);
    

    /* ]]> /
    function MM_goToURL() { //v3.0
    var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
    for (i=0; i<(args.length-1); i+=2) eval(args
    +".location='"+args[i+1]+"'");
    }
    </script>


  • User

    ragazzi ho un problema
    far coesistere due java script... inserendo le varianti a $ il tool la riconosce ma cmq non fa l'effetto desiderato ti allego il codice...HELP MEEEEEEEEEE

    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="ScrollNews.jquery.js"></script>
    <script language="javascript" >
    <!--
    jQuery(document).ready(function(){
    jQuery("#generale").ScrollNews({
    inizialize : 'true',
    size : '130px',
    timeout : 2500,
    speed : 'fast',
    direction : 'down',
    onmouseover : 'stop'
    });
    });
    -->
    var jQuery = jQuery.noConflict();
    </script>
    <script type="text/javascript" src="mootools-beta-1.2b2.js"></script>
    <script type="text/javascript" src="MooFlow.js"></script>
    <script type="text/javascript" src="MooFlowViewer.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */

    var myMooFlowPage = {
    
    	start: function(){
    		/* MooFlow instance with the complete UI and Viewer */
    		var mf = new MooFlow($('MooFlow'), {
    			useSlider: true,
    			useAutoPlay: true,
    			useCaption: true,
    			useResize: true,
    			useMouseWheel: true,
    			useKeyInput: true,
    			useViewer: true
    		});
    		
    		mf.attachViewer();
    		
    		$$('.loadremote').addEvent('click', function(){
    			mf.loadHTML(this.get('a href'), this.get('rel'));
    			return false;
    		});
    		
    	}
    	
    };
    
    window.addEvent('domready', myMooFlowPage.start);
    

    /* ]]> /
    function MM_goToURL() { //v3.0
    var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
    for (i=0; i<(args.length-1); i+=2) eval(args
    +".location='"+args[i+1]+"'");
    }
    </script>


  • User

    ragazzi ho un problema
    far coesistere due java script... inserendo le varianti a $ il tool la riconosce ma cmq non fa l'effetto desiderato ti allego il codice...HELP MEEEEEEEEEE

    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript" src="ScrollNews.jquery.js"></script>
    <script language="javascript" >
    <!--
    jQuery(document).ready(function(){
    jQuery("#generale").ScrollNews({
    inizialize : 'true',
    size : '130px',
    timeout : 2500,
    speed : 'fast',
    direction : 'down',
    onmouseover : 'stop'
    });
    });
    -->
    var jQuery = jQuery.noConflict();
    </script>
    <script type="text/javascript" src="mootools-beta-1.2b2.js"></script>
    <script type="text/javascript" src="MooFlow.js"></script>
    <script type="text/javascript" src="MooFlowViewer.js"></script>
    <script type="text/javascript">
    /* <![CDATA[ */

    var myMooFlowPage = {
    
    	start: function(){
    		/* MooFlow instance with the complete UI and Viewer */
    		var mf = new MooFlow($('MooFlow'), {
    			useSlider: true,
    			useAutoPlay: true,
    			useCaption: true,
    			useResize: true,
    			useMouseWheel: true,
    			useKeyInput: true,
    			useViewer: true
    		});
    		
    		mf.attachViewer();
    		
    		$$('.loadremote').addEvent('click', function(){
    			mf.loadHTML(this.get('a href'), this.get('rel'));
    			return false;
    		});
    		
    	}
    	
    };
    
    window.addEvent('domready', myMooFlowPage.start);
    

    /* ]]> /
    function MM_goToURL() { //v3.0
    var i, args=MM_goToURL.arguments; document.MM_returnValue = false;
    for (i=0; i<(args.length-1); i+=2) eval(args
    +".location='"+args[i+1]+"'");
    }
    </script>


  • User

    Ciao a tutti ragazzi,
    anche io ho un problema di conflitto tra jQuery e lightbox......ma il no.conflit per me non vale dato che nn ho nel mio codice variabili $

    Premetto che nn è necessario per forza cambiare lightbox, magari basta avere un'altra funzione per la sfumatura dell'immagine in header (che tra l'altro nn funziona nemmeno bene -.- )

    cmq ecco il codice che ho inserito:

    <!-- APERTURA FINESTRA ESTERNA -->
    <script type="text/javascript" src="js/targetBlank.js"></script>

    <!-- LIGHTBOX -->
    <script src="js/prototype.js" type="text/javascript"></script>
    <script src="js/scriptaculous.js?load=effects,builder" type="text/javascript"></script>
    <script src="js/lightbox.js" type="text/javascript"></script>

    <!-- EFFETTO FOTO HEAD -->
    <script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="js/script.js"></script>

    <!-- CAROUSEL -->
    <script type="text/javascript" src="js/jquery.jcarousel.min.js"></script>

    <script type="text/javascript">

    jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel();
    });

    </script>

    Grazie mille a tutti coloro che mi daranno una mano 😄
    Ciao Daniele


  • Super User

    @PI74image said:

    Ciao a tutti ragazzi,
    anche io ho un problema di conflitto tra jQuery e lightbox......ma il no.conflit per me non vale dato che nn ho nel mio codice variabili $

    Premetto che nn è necessario per forza cambiare lightbox, magari basta avere un'altra funzione per la sfumatura dell'immagine in header (che tra l'altro nn funziona nemmeno bene -.- )

    Ciao Daniele,
    perché non utilizzi il jQuery lightBox plugin ?


  • User

    Ho risolto usando shadowbox invece del lightbox 🙂
    Ora sembra andare tutto bene...grazie cmq a tutti x il supporto 🙂

    ciao Daniele


  • User Newbie

    Salve a tutti.
    Vi espongo subito il mio problema, spero qualcuno possa aiutarmi il prima possibile.
    La pagina "Works" del sito che sto sviluppando dovrebbe essere composta da vari carousel orizzontali, uno per ogni sezione Works, ognuno di questi integrato con dei lightbox che permettano di navigare tra i lavori singoli, visualizzandoli a tutta pagina.
    Ho già avuto molti problemi per trovare un carousel che permettesse di caricare più gallerie indipendenti sulla stessa pagina (ho usato jcarousel di sorgalla ); solo che non appena integro lo script di un qualsiasi lightbox (ho provato con più di uno) mi si smonta tutto la unordered list, tutti gli elementi mi si posizionano in verticale.
    Vi alleggo l'html della pagina:

    <!-- collegamento al css del carousel --->
    <link rel="stylesheet" type="text/css" href="jsor-jcarousel-7bb2e0a/skins/tango/skin.css" />

    <!-- collegamento allo script del carousel --->
    <script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="jsor-jcarousel-7bb2e0a/lib/jquery.jcarousel.min.js"></script>

    <script type="text/javascript">
    jQuery(document).ready(function() {
    jQuery('.first-and-second-carousel').jcarousel({
    scroll: 5,
    wrap: 'last'
    });
    });
    </script>

    <!-- collegamento al css del lightbox --->
    <link rel="stylesheet" type="text/css" href="lightbox/css/jquery.lightbox-0.5.css"/>

    <!-- collegamento allo script del lightbox --->
    <script type="text/javascript" src="lightbox/js/jquery.js"></script>
    <script type="text/javascript" src="lightbox/js/jquery.lightbox-0.5.js"></script>

    <script type="text/javascript">
    $(function() {

    $('a').lightBox(); 
    

    });
    </script>

    <div class="jcarousel-skin-tango">
    <div class="jcarousel-container">
    <div class="jcarousel-clip">
    <ul id="first-carousel" class="first-and-second-carousel jcarousel-skin-tango">

    <li><img src="immagini/works/infographics_s1.png" /></li>
    <li><img src="immagini/works/infographics_s2.png" /></li>
    <li><img src="immagini/works/infographics_s3.png" /></li>
    <li><img src="immagini/works/infographics_s4.png" /></li>
    <li><img src="immagini/works/infographics_s5.png" /></li>
    <li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_1.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    <li><a href="immagini/latestworks_2.png"><img src="immagini/works/infographics_w1.png" /></a></li>
    
    </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
    </div>
    

    <img src="immagini/linea1px.png" width="960" height="2" /></div>

    <div class="jcarousel-skin-tango">
    <div class="jcarousel-container">
    <div class="jcarousel-clip">
    <ul id="second-carousel" class="first-and-second-carousel jcarousel-skin-tango">

    <li><img src="immagini/works/infographics_s1.png" /></li>
    <li><img src="immagini/works/infographics_s2.png" /></li>
    <li><img src="immagini/works/infographics_s3.png" /></li>
    <li><img src="immagini/works/infographics_s4.png" /></li>
    <li><img src="immagini/works/infographics_s5.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    <li><img src="immagini/works/infographics_w1.png" /></li>
    

    </ul>
    </div>
    <div disabled="disabled" class="jcarousel-prev jcarousel-prev-disabled"></div>
    <div class="jcarousel-next"></div>
    </div>
    <img src="immagini/linea1px.png" width="960" height="2" /></div>

    Premetto che non sono un programmatore, ma studio graphic design, il sito è un progetto d'esame per il corso di web design, che, purtroppo, è stato svolto in maniera piuttosto sommaria... Spero che qualcuno mi possa dare qualche consiglio, il prima possibile che l'esame è alle porte...
    Grazie mille!