11540 sujets

JavaScript, DOM et API Web HTML5

Conflit entre script : Jquery et Imzoom

Bonjour,
Voila j'y comprend pas grand chose en javascript et même si je le voulais j'ai pas trop trop le temps de m'y mettre en ce moment. J'ai intégré sur un site un menu déroulant avec Jquery, et un script qui crée un zoom sur une image avec Imzoom, le problème c'est que quand les deux scripts sont dans <body> il y a un conflit entre les deux et le menu déroulant ne fonctionne plus. C'est surement une erreur bête de ma part ou un problème de compatibilité que je ne connais pas. Pourtant il n'y a pas le problème avec les "$" vu que je les ai remplacé.

Je vous remercie d'avance pour prendre le temps de me lire et me répondre Smiley biggrin

Voila mon index.html :
Je ne sais pas si il faut que je post aussi d'autres fichiers ?

<!DOCTYPE html>
<html>
<head>
    <title>G.N.U.M</title>

<meta http-equiv="content-language" content="fr">
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
<meta name="description" content="Site internet du GNUM : Groupe Naturaliste de l´Université Montpellier 2">
<meta name="keywords" content="Gnum, groupe naturaliste université montpellier, ecologie">
<meta name="author" content="GNUM">

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
<script type="text/javascript" src="jquery/jquery-1.8.2.js"></script>
<script src="imzoom/imZoom.v3.2.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="imzoom/imZoom.css" />

</head>

<!--Fin balise head-->

<body>
<div id="conteneur">

<div id="entete">
<h1></h1>
</div>

<div id="menuhaut">
<TABLE><TR><TH><a href="#" class="rollover"></a></TH>
<TH><a href="#" class="rollover2"></a></TH>
<TH><a href="index.html" class="rollover3"></TH></a></TR></TABLE>
</div>

<div id="recherche">
				<form action="http://assognum.free.fr/wakka.php?wiki=RechercheTexte/show" method="get" class="moteur-recherche">
	<input name="wiki" value="RechercheTexte" type="hidden" />
	<input name="phrase" class="input_rech" value="Recherche..." onfocus="if (this.value=='Recherche...') {this.value='';}" size="12" />
	<input type="submit" class="bouton_rech" value="GO" />
</form></div>

<div id="menugauche">
		<div id="titre_menu">
		<b>MENU</b>
		</div>
		<div id="menu_gauche_deroulant">
		
			<ul class="navigation">
				<li>
					<a href="#" title="Aller à la page 1">- L'association</a>
				</li>
				<li class="toggleSubMenu">
					<span>- Les projets</span>
					<ul class="subMenu">
						<li><a href="#" class="espacebota">- Espace botanique</a></li>
						<li><a href="#" class="ornitho">- Ornithologie</a></li>
						<li><a href="#" class="chiro">- Chiroptère</a></li>
						<li><a href="#" class="entomo">- Entomologie</a></li>
						<li><a href="#" class="rucher">- Rucher</a></li>
						<li><a href="#" class="inventair">- Inventaire fac</a></li>
						<li><a href="#" class="mare">- Mare</a></li>
						<li><a href="#" class="conf">- Conf'&amp;Sciences</a></li>
						<li><a href="#" class="herpeto">- Herpétologie</a></li>
						<li><a href="#" class="potager">- Potager</a></li>
					</ul>
				</li>
				<li class="toggleSubMenu">
					<span>- Les &eacute;v&egrave;nements</span>
					<ul class="subMenu">
						<li><a href="#">- &agrave; venir</a></li>
						<li><a href="#">- pass&eacute;s</a></li>
					</ul>
				</li>
				<li class="toggleSubMenu">
					<span>- Les medias</span>
					<ul class="subMenu">
						<li><a href="#">- Les photos</a></li>
						<li><a href="#">- Les vidéos</a></li>
					</ul>
				</li>
			</ul>
			
		</div>
		
	</div>
	
<!-- Chargement rapide d'images -->

	<img src="images/espacebota2.jpg" style="display:none" alt="" />
	<img src="images/ornitho2.jpg" style="display:none" alt="" />
	<img src="images/chiro2.jpg" style="display:none" alt="" />
	<img src="images/entomo2.jpg" style="display:none" alt="" />
	<img src="images/rucher2.jpg" style="display:none" alt="" />
	<img src="images/inventair2.jpg" style="display:none" alt="" />
	<img src="images/mare2.jpg" style="display:none" alt="" />
	<img src="images/conf2.jpg" style="display:none" alt="" />
	<img src="images/herpeto2.jpg" style="display:none" alt="" />
	<img src="images/potager2.jpg" style="display:none" alt="" />
	<img src="loading.gif" style="display:none" alt="" />

	
<div id="contenu">
<div id="text">
	<HR noshade size="3" width="100%" align="center" color="green">
	<h2>Bienvenue sur le site internet du GNUM !</h2>
	<HR noshade size="3" width="100%" align="center" color="green">
	<br></br>
<p>Le <b>GNUM</b> ou <b>Groupe Naturaliste l'&#146;Université Montpellier 2</b> est une association étudiante de l'université. <br>Elle regroupe des étudiants passionnés de <b>nature et de biologie</b>.</p><br/>
<br/><br/>

<center><iframe src="http://player.vimeo.com/video/53284990" width="600" height="337" frameborder="0" autoplay="1" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></center>
<br />

<p><b> (?autoplay=1) En navigant sur ce site vous trouverez : </b>

<LI>Plus de détails sur le fonctionnement de l'association
<LI>Les projets réalisés au sein du GNUM
<LI>Les sorties et événements divers
<br></br><b>Notre local est situé à l'UM2 entre les amphis 3 et 4 du bâtiment 5 au premier étage.
<br>Une permanence est assurée du lundi au vendredi de 12h à 14h.</br>
Des réunions sont organisées les lundis à 18h30 à la maison des étudiants.
</p></b>
<br></br>
<HR noshade size="3" width="100%" align="center" color="green">
<h3>TEST PHOTOS ZOOM + DIAPORAMA</h3>
<HR noshade size="3" width="100%" align="center" color="green">
<br></br>
<center>
<a href="images/photos/1.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/1b.jpg"/></a>
<a href="images/photos/2.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/2b.jpg"/></a>
<a href="images/photos/3.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/3b.jpg"/></a>
<br><a href="images/photos/4.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/4b.jpg"/></a>
<a href="images/photos/5.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/5b.jpg"/></a>
<a href="images/photos/6.jpg" title="Cliquez hors du cadre pour quitter"><img src="images/photos/6b.jpg"/></a></br></center>
	
	</div>

</div>

</div>
</div>

<!--Scripts-->

<script type="text/javascript">

jQuery(document).ready( function () {
    jQuery(".navigation ul.subMenu").hide();
    jQuery(".navigation li.toggleSubMenu span").each( function () {

        var TexteSpan = jQuery(this).text();
        jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    jQuery(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if (jQuery(this).next("ul.subMenu:visible").length != 0) {
            jQuery(this).next("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
        }
        else {
            jQuery(".navigation ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
            jQuery(this).next("ul.subMenu").slideDown("normal", function () { jQuery(this).parent().addClass("open") });
        }
        return false;
    });
} ) ;
</script>


<script type="text/javascript">
var options = {
	animDuration : 250,
	animEase : 1,
	showTitle : 1,
	showNav : 1,
	screenOpacity : 0.8,
	slideDelay : 2000,
};
imZoom.autoApplyInto(options);
</script>
</body>

Modifié par Plouf (24 Nov 2012 - 21:43)
Merci pour ta réponse Smiley smile
Mais comme je le disais je ne pense pas que ça soit un problème avec les $ puisque je les ai remplacé par "Jquery", j'ai essayé le non conflit et ça marche pas.

C'est quand j'insère 

<script src="imzoom/imZoom.v3.2.1.min.js" type="text/javascript"></script>

dans <Head> que ça marche plus.
Je l'avais lu, mais au cas ou ...

Sinon, il doit y avoir un conflit quand même quelque part.

En mettant cette ordre qu'est-ce que cela donne:

Script Jquery
Tes fonctions Jquery (avec le no conflict)
Imzoom
Désolé j'y connais vraiment rien en js,
dans mon code :


<script type="text/javascript">

 jQuery.noConflict();
 (function($) { 
   $(function() {

jQuery(document).ready( function () {
    jQuery(".navigation ul.subMenu").hide();
    jQuery(".navigation li.toggleSubMenu span").each( function () {

        var TexteSpan = jQuery(this).text();
        jQuery(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
    } ) ;

    jQuery(".navigation li.toggleSubMenu > a").click( function () {
        // Si le sous-menu était déjà ouvert, on le referme :
        if (jQuery(this).next("ul.subMenu:visible").length != 0) {
            jQuery(this).next("ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
        }
        else {
            jQuery(".navigation ul.subMenu").slideUp("normal", function () { jQuery(this).parent().removeClass("open") });
            jQuery(this).next("ul.subMenu").slideDown("normal", function () { jQuery(this).parent().addClass("open") });
        }
        return false;
    });
} ) ;
   });
 })(jQuery);

var options = {
	animDuration : 250,
	animEase : 1,
	showTitle : 1,
	showNav : 1,
	screenOpacity : 0.8,
	slideDelay : 2000,
};
imZoom.autoApplyInto(options);
</script>


Je dois rajouter quoi exactement ? Juste marquer Script JQuery et Imzoom ?
Non j'ai aucune erreur dans la console =\
C'est quand j'insère cette ligne que le premier script ne marche plus.
<script src="imzoom/imZoom.v3.2.1.min.js" type="text/javascript"></script>
Et en ne mettant que le script imzoom, ce script fonctionne t'il ?

En tout cas, pour moi c'est pratiquement sur, il y a un conflit quelque part (function de base étendu par ImZoom qui fait perdre les pédale à Jquery par exemple)
Sujet clos
Aller à