11548 sujets

JavaScript, DOM et API Web HTML5

Conflit lightbox / jquery [Résolu]

Bonjour à toutes et tous,
Voilà, pour cette page http://yvanclavel.free.fr j'ai 3 éléments dynamiques : une "lightbox" une video FLV et un petit script / jquery pour styliser le formulaire de contact. Celui-ci ne fonctionne que si je supprime ou déplace sur ma page XHTML le script "lightbox/prototype.js". Mais évidemment "lightbox" ne fonctionne plus.

Les scripts se trouvent en fin de "body" et dans cet ordre là, le script /jquery du formulaire ne fonctionne pas :
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="script.js"></script>
<script type="text/javascript" src="lightbox/prototype.js"></script>
<script type="text/javascript" src="lightbox/scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox/lightbox.js"></script>
<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>
<script type="text/javascript">
<!--
swfobject.registerObject("FLVPlayer");
swfobject.registerObject("FLVPlayer");
//-->
</script>


Quelqu'un a-t-il une solution ?
Modifié par groshapas (28 Nov 2010 - 14:10)
Ça vient effectivement d'un conflit sur le namespace $ utilisé aussi bien par Prototype que par jQuery.
Place ton code jQuery de cette façon :

$.noConflict();
jQuery(document).ready(function($){
    /* Ton code javascript ici */
});

Modifié par moust (28 Nov 2010 - 13:28)
Merci à vous Moust et Kenor, c'était bien l'origine du conflit. Je note et je retiens.
Bon dimanche et encore bravo ! Smiley biggrin
Bonjour vous vous trois

Je pense avoir le même problème de conflit mais je ne voit pas où utiliser les lignes de code fourni par moust. Est-ce dans le Head de mon html ou alors dans mon javascript?

D'avance merci

C'est bon j'ai trouvé, c'est dans mon Head Smiley cligne
Modifié par Avok (17 Dec 2010 - 17:59)
Bonjour Avok,
Tu dois copier ce bout de code en tête de ton script (et non pas dans le head de ta page HTML)
$.noConflict(); 
jQuery(document).ready(function($){ 
    /* Ton code javascript ici */ 
});
Salut !
J'ai le même problème car j'envoie mes données avec JQuery et l'envoi ne s'effectue pas à cause de lightbox !
j'ai ajouté

$.noConflict();

au début de mon fichier .js qui récupère les données du formulaire et les envoi mais ça ne marche toujours pas Smiley sweatdrop
Désolé de déterrer se sujet... mais je bloque pour sur ce même sujet.... Au lieu de créer un nouveau poste, je me permet de venir ici afin que (peut être) vous puissiez m'aider.
Dans ma page, j'ai un carousel et un lightbox....
Ils fonctionnent parfaitement de façon individuelle. Mais quand je cherche à les faire fonctionner ensemble.... ça ne fonctionne pas.
Si le carousel est ok, le lightbox ouvre l'image dans une nouvelle fenêtre.
Si le lightbox est ok, le carousel ne fonctionne plus du tout....
je vous met ce que j'ai de mon head...


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

<script type="text/javascript" language="javascript" src="scripts/jquery.js"></script>
<script type="text/javascript" language="javascript" src="scripts/jquery.carouFredSel-5.4.1-packed.js"></script>
   
<script type="text/javascript" language="javascript">
$(function() {
	$("#slider").carouFredSel({
		auto 	: false,
		scroll: 1,
		prev	: {	
			button	: "#foo2_prev",
			key		: "left"
		},
		next	: { 
			button	: "#foo2_next",
			key		: "right"
		},
		pagination	: "#foo2_pag"
	});
	});
</script>


J'ai plus ou moins compris que je pourrais "régler" mon problème avec $.noConflict(); mais étant une vrais bille (et le terme est faible) en script... Je ne sais pas du tout comment l'appliquer.
J'ai essayer de le mettre dans le head... ça ne change rien...
J'ai essayer de le mettre dans le script de prototype.js.... ça ne change rien non plus.

Y aurait il une personne parmis vous tous qui saurait me dépanner ?

Je vous en remercie par avance
Modifié par amonteil (23 Dec 2011 - 21:12)
Bonjour,

Je me permet de remonter le sujet à mon tour car j'ai exactement le même problème. J'ai essayé d'appliqué le petit bout de code qui est fourni ici... mais rien à faire.

Je l'ai mis en début des différents scripts JS que j'utilise (lightbox et un carrousel jQuery) mais ça ne change rien...

Est-ce quelqu'un pourrait confirmer qu'il faut bien appliquer le code a cet emplacement là ?!

Merci d'avance et désolé d'avoir remonté le sujet...


EDIT : Pour les prochains qui passeront par ici, j'ai résolu mon problème. J'ai utilisé cette page et le fameux $.noConflict(); dont tout le monde parle dans ce sujet.

Dans mon cas, j'ai rajouté comme ci-dessous (sans doute pas la meilleure solution... mais ça fonctionne sur les principaux navigateurs de ce jour (IE7, IE8, IE9, Firefox, Google Chrome, Safari)).

<script type="text/javascript" src="./lightbox/js/prototype.js">$.noConflict(); jQuery(document).ready(function($) { });</script>


Et un peu après j'ai un appel de fonction que j'ai entouré de ça :
$.noConflict();
	jQuery(document).ready(function($) {
		// Mon code JavaScript qui utilise des $(... 
	});

Modifié par Fido166 (06 Jan 2012 - 09:45)
Sujet clos
Aller à