11552 sujets

JavaScript, DOM et API Web HTML5

Conflit JS entre lightbox et menu ?

Bonjour,

Voilà je suis pas un expert du tout en JavaScript et là j'ai un problème qui me bloque pas mal. Je suis en train d me faire un petit site avec pour les images une lightbox. Seulement avec mon menu la lightbox déconne...

Je pense que ça vient de JQuery mais je sais pas où retirer quoi parce que tout me parait bon, en tout cas pour moi... Smiley lol

Je vous donne deux exemples : 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Pierre xxx :: Portfolio </title>
     <meta name="keywords" lang="fr" content="" />
     <meta name="description" content="Page d'accueil portfolio" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta http-equiv="Content-Language" content="fr" />
     <link href="css/global.css" rel="stylesheet" type="text/css" />
     <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />
     <script type="text/javascript" src="js/prototype.js"></script>
	 <script type="text/javascript" src="js/scriptaculous.js?load=effects,builder"></script>
	 <script type="text/javascript" src="js/lightbox.js"></script>
	 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
</head>

<body>

<?php
include('header.html');
?>

<div id="container">
<p>
<a href="images/image-1.jpg" rel="lightbox" title="my caption">image 1</a>
</p>
</div>


<?php
include('footer.html');
?>



</body>


</html>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr" lang="fr">
<head>
     <title>Header</title>
     <meta name="keywords" lang="fr" content="" />
     <meta name="description" content="header" />
     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
     <meta http-equiv="Content-Language" content="fr" />
     <link href="css/global.css" rel="stylesheet" type="text/css" />	 
	 <link rel="stylesheet" href="css/lightbox.css" type="text/css" media="screen" />

     <script type="text/javascript">
	<!--
	$(document).ready( function () {
	    // Cacher les sous-menus :
	    $(".navigation ul.subMenu").hide();
	    // On sélectionne tous les items de liste portant la classe "toggleSubMenu"
	
	    // et on remplace l'élément span qu'ils contiennent par un lien :
	    $(".navigation li.toggleSubMenu span").each( function () {
	        // On stocke le contenu du span :
	        var TexteSpan = $(this).text();
	        $(this).replaceWith('<a href="" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;
	    } ) ;
	
	    // On modifie l'évènement "click" sur les liens dans les items de liste
	    // qui portent la classe "toggleSubMenu" :
	    $(".navigation li.toggleSubMenu > a").click( function () {
	        // Si le sous-menu était déjà ouvert, on le referme :
	        if ($(this).next("ul.subMenu:visible").length != 0) {
	            $(this).next("ul.subMenu").slideUp("normal");
	        }
	        // Si le sous-menu est caché, on ferme les autres et on l'affiche :
	        else {
	            $(".navigation ul.subMenu").slideUp("normal");
	            $(this).next("ul.subMenu").slideDown("normal");
	        }
	        // On empêche le navigateur de suivre le lien :
	        return false;
	    });    
	} ) ;
	// -->
</script> 
</head>

<body>

<h1><a href="http://www.xxxx.fr"><img src="images/logo.png" alt="Pierre LENOBLE" width="200" height="84" /></a><br />
<span class="SubTitle">Bienvenue sur mon portfolio !</span></h1>

<ul class="navigation">
    <li><a href="index.php" title="Accueil">Accueil</a></li>

    <li class="toggleSubMenu"><span>Productions</span>
        <ul class="subMenu">
            <li><a href="web.php" title="Conception WEB">Conception Web</a></li>
            <li><a href="illustration.php" title="Infographie">Infographie</a></li>
            <li><a href="com.php" title="Communication et Marketing">Com & Marketing</a></li>
            <li><a href="divers.php" title="Divers">Divers</a></li>
        </ul>
    </li>
    <li class="toggleSubMenu"><span>Loisirs</span>
        <ul class="subMenu">

            <li><a href="photo.php" title="Photographie">Photographie</a></li>
            <li><a href="videogames.php" title="Jeux">Jeux vidéo</a></li>

        </ul>
    </li>
       <li><a href="contact.php" title="Contact">Contact</a></li>
       <li><a href="apropos.php" title="A propos">À propos</a></li>
</ul>

</body>
</html>


Merci d'avance pour votre aide et désolé si je fais de grosses erreurs de débutant.
Modifié par SedeL (09 Jan 2012 - 15:19)
Hello,

Je ne sais pas si tu as des risques de conflits ou pas mais ce que je sais c'est que ta lightbox ne risque pas de s'ouvrir : tu charges jQuery après avoir chargé ton plugin lightbox.js.

Edit : En tout cas, c'est fort possible qu'il y ait des conflits à l'avenir : tu charges scriptaculous, prototype et jQuery pour le même document. Choisis une librairie et évite de les mélanger, les performances de ton site te diront merci Smiley cligne
Modifié par audrasjb (09 Jan 2012 - 15:17)
Ah d'accord je savais pas qu'il y avait un sens précis. Merci pour ta réponse je vais essayer et je te tiens au courant.

Sinon, je suis désolé mais j'ai pas totalement saisi ta remarque entre parenthèse.

Merci en tout cas.

EDIT : alors effectivement là ma lightbox refonctionne, mais par contre le js du menu non... Smiley decu

EDIT 2 : j'ai attrapé le code sur ce site : http://lokeshdhakar.com/projects/lightbox2/ et apparemment je dois importer les trois donc je sais pas... Smiley decu
Modifié par SedeL (09 Jan 2012 - 15:22)
Sujet clos
Aller à