Titre: Conflit entre script : Jquery et Imzoom
Posté par: MathieuG le le 25-11-2012 a 12:18:31
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 j'insère la ligne
"<script src="imzoom/imZoom.v3.2.1.min.js" type="text/javascript"></script>" dans <head> 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é par "Jquery".
Je vous remercie d'avance pour prendre le temps de me lire et me répondre
Voila mon index.html :
Je ne sais pas si il faut que je post aussi d'autres fichiers ?
Code:
<!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'&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 évènements</span>
<ul class="subMenu">
<li><a href="#">- à venir</a></li>
<li><a href="#">- passé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'’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>
|
|
|
Titre: Re:Conflit entre script : Jquery et Imzoom
Posté par: pb88081 le le 06-12-2012 a 16:57:06
Bonjour,
J'ai un souci similaire et d'ailleurs j'ai crée un sujet à propos de conflit de scripts.
Mon problème n'est toujours pas résolu.
Je souhaiterai savoir comment vous avez fait pour remplacer $ par jQuery ?
Par ailleurs j'ai essayé ceci : http://www.dator.fr/comment-rendre-jquery-compatible-avec-prototype-ou-mootools/
mais sans succès.
Je vous propose si l'un de nous deux solutionne ce problème de le partager.
Merci par avance |
Forum-webmaster | Actionné par YaBB SE
© 2001-2003, YaBB SE Dev Team. Tous droits réservés.
|