GROS PB entre imageflow + toggle menu

[karinemariejeanne]

Bonjour,

Je suis en train de faire une page qui mélange un imageflow et des menus toggle.

Voir à l'adresse suivante :

http://vnka.free.fr/futuramedia/reseaux_...lick2.html

J'aimerais que lorsque je clic sur une des photos de l'images flow, le bon encart se déplie.

J'ai trois encarts :

centre
pharma
club

mon image flow est composé de 15 photos, 5 pour chacune des cathégories (les encarts)

Pour le moment, les encarts se déplies ou se referment seulement lorsque je clic dessus. J'aimerais qu'ils le fasse en cliquant sur les photos appropriées.

Je en sais pas si j'ai bien expliqué...

En gros j'ai utilisé une fonction qui permet de déplier ou replier l'encart portant le nom de sous menu centre, pharma ou club lorsque l'on clic sur un <a> dans une <li> portant la class togglemenu.

J'ai voulu adapter ce script pour que lorsque je clic sur une <li> de l'image flow (li portant la class approprié : centre, club ou pharma) cela déplie le sous menu lui correspondant...

De toute façon, mes sources ne sont pas protégées, suffit de cliquer droit et voir le code source...

Si quelqu'un pouvait m'aider !!! ??? svp :'(
Please ....

[Troll]

Salut et à toi !

Si tu souhaites te présenter / faire connaissances avec la communauté, n'hésites pas à passer par la section "Présentations".

Alors si je ne me trompe pas, le code qui devrait ouvrir / fermer le bloc quand on clique sur une image reliée au bloc "pharmacie" par exemple, c'est ça :

Sélectionner - Agrandir / Réduire

// On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.pharma > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($(this).next("ul.subMenuclub:visible").length != 0) {

                $(this).next("ul.subMenuclub").slideUp("normal", function () { $(this).parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenuclub").slideUp("normal", function () { $(this).parent().removeClass("open") } );

                $(this).next("ul.subMenuclub").slideDown("normal", function () { $(this).parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

L'erreur c'est l'utilisation de "$(this)".
En effet, this représent l'élément sur lequel on clique.
Quand this c'est le bloc, ok pas de pb (soit le code que tu as copié/collé je suppose), mais quand c'est une balise <a> (soit-dit en passant, pas d'attribut href sur une balise <a> sauf erreur de ma part c'est une erreur HTML, c'est pas valide) eh ben ça marche plus ! (soit le cas du code que tu as copié/adapté/collé je suppose).

Il faut que au lieu de $(this) tu ailles chercher l'élement qui va bien. C'est-à-dire je suppose l'entête du bloc, sur lequel tu bind l'évènement click juste avant dans le code.

Donc, pour te mâcher le travail jusqu'au bout, je pense qu'il faut remplacer $(this) par $("li.toggleSubMenu > a").

Sauf que le soucis c'est que ça va cibler les trois blocs à la fois. Donc faut que tu ajoutes une classe sur tes li qui ont la classe toggleSubMenu pour pouvoir les différencier. Une classe "bloc_pharma" (and so on pour les autres) par exemple.

Si tu ne sais pas comment on met plusieurs classes à un élément HTML, il suffit en fait de les séparer par un espace (ce qui, notons le au passage, rend impossible l'utilisation d'un nom de classe avec des espaces, mais tu devais le savoir ! ) :

Sélectionner - Agrandir / Réduire

<anyhtmlelement class="classe1 classe2 classe3 classeandsoon" ></anyhtmlelement>

Désolé pour l'anglais dans les exemples, j'ai parlé anglais la moitié de l'aprem

[karinemariejeanne]

Bonjour et un grand merci pour ton aide !
Par contre, j'ai pas réussis...

Je te colle le code modifié :

Sélectionner - Agrandir / Réduire

<script type="text/javascript">

    <!--

    $(document).ready( function () {



        // On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($(this).next("ul.subMenucentre:visible").length != 0) {

                $(this).next("ul.subMenucentre").slideUp("normal", function () { $(this).parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenucentre").slideUp("normal", function () { $(this).parent().removeClass("open") } );

                $(this).next("ul.subMenucentre").slideDown("normal", function () { $(this).parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

     

        // On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($(this).next("ul.subMenupharma:visible").length != 0) {

                $(this).next("ul.subMenupharma").slideUp("normal", function () { $(this).parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenupharma").slideUp("normal", function () { $(this).parent().removeClass("open") } );

                $(this).next("ul.subMenupharma").slideDown("normal", function () { $(this).parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        }); 

        // On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($(this).next("ul.subMenuclub:visible").length != 0) {

                $(this).next("ul.subMenuclub").slideUp("normal", function () { $(this).parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenuclub").slideUp("normal", function () { $(this).parent().removeClass("open") } );

                $(this).next("ul.subMenuclub").slideDown("normal", function () { $(this).parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

	

	

	

	

	

	 // On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu club > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($.next("ul.subMenuclub:visible").length != 0) {

                $.next("ul.subMenuclub").slideUp("normal", function () { $.parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenuclub").slideUp("normal", function () { $.parent().removeClass("open") } );

                $.next("ul.subMenuclub").slideDown("normal", function () { $.parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

	

	// On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu pharma > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($.next("ul.subMenupharma:visible").length != 0) {

                $.next("ul.subMenupharma").slideUp("normal", function () { $.parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenupharma").slideUp("normal", function () { $.parent().removeClass("open") } );

                $.next("ul.subMenupharma").slideDown("normal", function () { $.parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });// On modifie l'evenement "click" sur les liens dans les items de liste

        // qui portent la classe "toggleSubMenu" :

        $("li.toggleSubMenu centre > a").click( function () {

            // Si le sous-menu etait deja ouvert, on le referme :

            if ($.next("ul.subMenucentre:visible").length != 0) {

                $.next("ul.subMenucentre").slideUp("normal", function () { $.parent().removeClass("open") } );

            }

            // Si le sous-menu est cache, on ferme les autres et on l'affiche :

            else {

                $("ul.subMenucentre").slideUp("normal", function () { $.parent().removeClass("open") } );

                $.next("ul.subMenucentre").slideDown("normal", function () { $.parent().addClass("open") } );

            }

            // On empêche le navigateur de suivre le lien :

            return false;

        });

	

	

	

	

	

    } ) ;

    // -->

    </script>    

qui soit dit en passant ne marche pas...

J'ai mis ces class à mes images de mon image flow

Sélectionner - Agrandir / Réduire

<li class="pharma toggleSubMenu"><a rel="img/pharmacie_5.jpg" title="RESEAU PHARMACIE"></a></li>

<li class="club toggleSubMenu" ><a title="RESEAU CLUB MED GYM : CAMPAGNE HONDA" rel="img/club_med_gym_1.jpg"></a></li>

<li class="centre toggleSubMenu"><a rel="img/centre_commercial_2.jpg" title="RESEAU CENTRE COMMERCIAL"></a></li>

<li class="pharma toggleSubMenu"><a rel="img/pharmacie_1.jpg" title="RESEAU PHARMACIE"></a>

<li class="club toggleSubMenu"><a rel="img/club_med_gym_2.jpg" title="RESEAU CLUB MED GYM"></a></li>

<li class="centre toggleSubMenu"><a rel="img/centre_commercial_3.jpg" title="RESEAU CENTRE COMMERCIAL"></a></li>

et ça marche pas

Je ne suis pas du tout une codeuse... j'ai effectivement récupéré le code et l'ai adapté à mes besoins, sans vraiment comprendre.
MAIS j'aimerais beaucoup apprendre... Bref, si tu te sens le coeur d'un chevalier...

[Troll]

Citation : Bref, si tu te sens le coeur d'un chevalier...

Je suis pas un chevalier, je suis un Troll.

Mais on peut quand même essayer

Alors, effectivement... tu as tout faux ^^

Tout d'abord, tu n'as pas ajouté les classes HTML au bon endroit. Il faut que tu ajoutes les classes sur les <a> qu'il y a "en bas" de ton code.

Celle qui sont dans tes bloc qui se ferment / s'ouvrent. Là dans le code HTML que tu me montre ce sont les <li> du listing d'images...

Ensuite tu as juste supprimé les $(this) O_O. Faut les remplacer !! xD Tu les remplaces par $('li.nom_de_la_classe_que_tu_as_ajoute_dans_le_html > a')

Je te conseille de donner aux classes que tu ajoute un nom un peu compliqué pour pas qu'il y en ait d'autres du même nom qui se baladent ailleurs (sinon ça va foutre le bordel).

Comme par exemple "jq-toggle-bloc-" et tu ajoute derrière "centre" ou "pharma" ou autre chose (ce qui donne par exemple au final "jq-toggle-bloc-pharma").

Sinon si tu souhaites apprendre y'a pas 36 solutions : Lire, beaucoup.

Personnellement y'a longtemps j'avais lu un bouquin sur JavaScript... ça m'avait bien aidé.

Maintenant tu peux trouver plein de choses sur internet, peut-être par exemple ça : https://developer.mozilla.org/fr/Le_DOM_et_Javascript

Ou encore "apprendre javascript" sur Google certainement.

Et sinon toi ce que tu utilises là c'est "jQuery".
Et jQuery utilise les "sélecteurs CSS" pour désigner un objet dans le DOM. Pour comprendre les "sélecteurs CSS" il faut "apprendre css" (cf. Google une fois de plus).

Mais bon, tout ça ça nécessite d'aimer un peu tout ça, parce que c'est long de tout lire, alors si ça te plaît pas, ça va pas bien passer je pense

[karinemariejeanne]

Merci Troll, je pense avoir compris, mais il me reste tout de même une interrogation.

Je n'ai pas encore testé ta solution, mais je me demande comment en cliquant sur une des photos, si je n'ai rien indiqué comme class à ces photos, les bloc pourront-ils s'ouvrir ?

En fait ce que je veux, c'est que quand je clic sur un des blocs, il s'ouvre, ce qui marche déjà avec le code existant et je veux que lorsque je clic sur l'une des photos pharmacie par exemple, cela ouvre le bloc pharmacie...

La dans ton explication, en mettant une class de type :

$('li.nom_de_la_classe_que_tu_as_ajoute_dans_le_html >

sur mes <a> dans le html et rien sur les photos, comment les photos sauront-elles quand il faut qu'elles ouvrent un des blocs qui leur correspondent ?

[Troll]

Ah non non, ça ce n'est pas la classe ! Ca c'est le JavaScript.

jQuery quand tu mets $('quelque_chose') ça fait chercher ce quelque_chose dans ta page.

Tu avais déjà ciblé tes liens en mettant $('li.centre > a') de mémoire. Donc ca va mettre l'évènement de clique sur ces éléments.

Après à l'intérieur de la fonction, il faut cibler les bons élements.

Mais sais-tu ne serait-ce que ce qu'est une fonction, un objet ?

[karinemariejeanne]

Non ! En fait je t'ai dis, je ne suis pas du tout codeuse...
Je fait du html css, d'une manière autodidacte et c'est tout

Mais ne t'embêtes pas trop pour moi tu sais, aucun problème...
Tu as déjà été super gentil de bien vouloir m'aider...

C'est pas très grave...

Merci vraiment pour ton aider !