11488 sujets

JavaScript, DOM et API Web HTML5

Bonsoir,
j'ai un soucis sur la réalisation d'une page où j'y ai inséré la fonction du menu déroulant en jquery. Jusque là tout va bien, mais c'est lorsque j'y insère sur cette même page une lightbox jquery que se pose un problème. En effet cette lightbox refuse de marcher et j'ignore quelle en est la raison, vu que je suis totalement novice en javascript. Je m'y suis surement mal pris donc je post sur ce forum en espérant qu'une bonne âme vienne à mon secours et éclairer ma lanterne. A savoir aussi que mon menu déroulant lui marche bel et bien même lorsque j'insère mon script lightbox ...


<script type="text/javascript" src="scripts/jquery.lightbox-0.4.js"></script>

<script type="text/javascript">
$(function() {
	
	$('a[@rel*=lightbox]').lightBox(); 
	$('#gallery a').lightBox(); 
	$('a.lightbox').lightBox(); 
	$('a').lightBox(); 
});
</script>

<script type="text/javascript" src="scripts/jquery-1.2.1.js"></script> 
 
<script type="text/javascript"> 
<!-- 
$(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".navigation ul.subMenu:not('.open_at_load')").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", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
} ) ;  
// --> 
</script>

Modifié par kingarthuro (04 Feb 2010 - 16:46)
Bonjour,

Tu appelles ton fichier de plugin lightbox avant d'appeler celui de jquery. Essaie plutôt d'insérer


<script type="text/javascript" src="scripts/jquery-1.2.1.js"></script>  


avant


<script type="text/javascript" src="scripts/jquery.lightbox-0.4.js"></script> 
effectivement ça marche ! j'arrive pas à croire que c'était si bête alors que je suis dessus depuis plusieurs jours ... Smiley sweatdrop
un grand merci à toi kaaviar ton aide m'a été très précieuse ! Smiley biggrin
alors non je rectifie le tir j'ai posté un peu trop vite car cela ne marche toujours pas ... en effet cette fois ci ma lightbox fonctionne mais mon menu déroulant lui ne fonctionne plus ... Smiley bawling
aurais tu par hasard d'autres suggestions ? Smiley lol
j'ai finalement réussi ... il fallait tout simplement enlever le $ qui s'appliquait à toutes mes balises a, forcément ... Smiley confused
merci kaaviar
Modifié par kingarthuro (04 Feb 2010 - 16:49)
Bonjour à tous,
en effet, j'ai ce même problème.

King, pourrais-tu mettre ton code final ?
Car je ne comprends pas où tu retires les $ T.T
Je désespère~
Bonsoir SoozDark,

désolé pour la réponse tardive. Le code du menu déroulant est le suivant :
$(document).ready( function () { 
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".navigation ul.subMenu:not('.open_at_load')").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", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".navigation ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
} ) ;


N'oublie pas d'appeler ta libraire jquery avant ton script et après tes feuilles de styles CSS. J'espère que cela va t'aider.