conflitto tra lightbox e jquery

lucaeffe

conflitto tra lightbox e jquery

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

<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?

shad

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();

cla83

@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

// 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>

virgo9999

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

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>

virgo9999

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

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>

virgo9999

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

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>

pi74image

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:

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

<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>

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

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

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

</script>

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

ayrton2001

@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 ?

pi74image

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

ciao Daniele

m.dimarte

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:

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

<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>

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

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

$('a').lightBox();

});
</script>

<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>

<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!