Conflit entre script : Jquery et Imzoom - Forum Javascript / DOM / Ajax

La Communauté Webmaster

  Forum-webmaster
  Technique - programmation
  Javascript / DOM / Ajax (Modérateurs: Shain, Netah, Lilian, lauryv, ToToMaStEr)
  Conflit entre script : Jquery et Imzoom

« Précédent Suivant »

Pages: [1]

Auteur

Sujet: Conflit entre script : Jquery et Imzoom (Lu 1894 fois)

Conflit entre script : Jquery et Imzoom
« sur: le 25-11-2012 a 12:18:31 »

MathieuG
Membre récent

Hors-Ligne

Messages: 1

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>



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



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



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

« Dernière Édition: le 25-11-2012 a 12:20:44 par MathieuG »

Rapporter au modérateur

Re:Conflit entre script : Jquery et Imzoom
« Répondre #1 sur: le 06-12-2012 a 16:57:06 »

pb88081
Membre récent

Hors-Ligne

Sexe: Male

Messages: 2

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