Partage

Galerie Photos Navigation simple boutton

18 mai 2019 à 22:59:36

Bonsoir, après avoir chercher très longtemps sur internet je ne trouve pas comment faire. Je voudrais que pour chaque boutton, qu'il existe un bloc a lui ou se trouvent 6 photos les une a coté des autres par exemple, et lorsqu'e je clic sur un autre boutton, le bloc disparait et apparait le bloc voulu, un peu comme une galerie ou un portfolio dans une div. J'ai essayer de faire ça avec du JQUERY, JS, CSS, cela ne m'a que rendu la tâche difficile. J'ai jeter un coup d'oeil à tout les Galerie Photos en JS sur W3School, aucune d'eux ne correspondait a ce que je voulais !

J'ai mit mon site en ligne pour vous permettre de voir cela plus facilement :

https://lhair-du-temps.000webhostapp.com/

PS : Mon site ne s'affiche pas correctement en ligne, cela doit être un bug du serveur je suppose ? Car en local il s'affiche correctement.

Mes photos se trouvent dans ma div "nav_photos" dans la section GALERIE

Merci de votre aide !

-
Edité par Mehddii 18 mai 2019 à 23:00:28

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

breeza

18 mai 2019 à 23:37:03

Bonjour,

Ci-dessous un lien JSFiddle avec je pense ce que tu recherches :

https://jsfiddle.net/f05cymzx/

Il existe une fonction :target en CSS qui te permet de faire ce que tu souhaites

https://www.w3schools.com/cssref/sel_target.asp

Solution trouvée ? => petit pouce + passer le sujet en Résolu :)

Mehddii

19 mai 2019 à 0:46:16

Bonsoir,

je n'arrive toujours pas résoudre mon problème, le :target est bien compris mais je n'arrive pas appliquer cela, soit ça ne change pas bloc soit ça fait un bug le slide du bas qui rentre sur celui d'en haut.

Voici mon HTML :

<section data-anchor="Page 3" class="page-3">
						<div id="bloc_galerie">
                            <div id="texte_menu">
                                <div id="texte">
                                    <h2>Notre Galerie</h2>
                                </div>
                                <div id="menu">
                                    <img src="Images/Ligne_sep.png" alt="">
                                    <a href="#bloc_salon" style="margin-left:100px;" class="active">Salon</a>
                                    <a href="#bloc_coiffure">Coiffure</a>
                                    <a href="#bloc_ethetique">Ésthétique</a>
                                    <a href="#bloc_beaute">Beauté</a>
                                    <img src="Images/Ligne_sep.png" alt="">
                                </div>
                            </div>
                            <div id="bloc_images">
                                <div id="bloc_salon" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_coiffure" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_esthetique" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_beaute" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                            </div>
                        </div>
					</section>

Voici mon CSS :

/* ************* CONTAINER SECTION PAGE-3 ************* */

.page-3 #bloc_galerie {
    width: 1400px;
    height: 500px;
    margin-top: 70px;
    background-color: #FFFE9A;
    font-family: Cinzel;
    border: 2px solid #B4B4B4;
}

.page-3 #bloc_galerie #texte_menu {
    width: 100%;
    height: 20%;
    padding-top: 10px;
}

.page-3 #bloc_galerie #texte {
    color: #B4B4B4;
    font-size: 25px;
    margin-top: -20px;
    margin-left: 20px; 
    float: left;
}

.page-3 #bloc_galerie #menu {
    margin-top: 20px;
    float: right;
}

.page-3 #bloc_galerie a {
    font-size: 20px;
    color: #B4B4B4;
    text-decoration: none;
    margin-right: 80px;
    border: 1px solid #B4B4B4;
    border-radius: 20px;
    padding: 10px;
}

div.tab {
    display: none;
}
div.tab:target, :target div.tab {
    display: block;
}
:target div.tab + div.tab {
    display: none;
}

.page-3 #menu a:hover {
    background-color: #B4B4B4;
    color: #FFFE9A;
}

.page-3 #menu a.active {
    background-color: #B4B4B4;
    color: #FFFE9A;
}

.page-3 #bloc_galerie #bloc_images {
    width: 100%;
    height: 50%;
}

.page-3 #bloc_images img {
    width: 250px;
    height: 350px;
    margin-left: 25px;
}

Merci !

-
Edité par Mehddii 21 mai 2019 à 3:49:38

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

Mehddii

21 mai 2019 à 3:51:52

Bonsoir,

Voici mon HTML :

<section data-anchor="Page 3" class="page-3">
						<div id="bloc_galerie">
                            <div id="texte_menu">
                                <div id="texte">
                                    <h2>Notre Galerie</h2>
                                </div>
                                <div id="menu">
                                    <img src="Images/Ligne_sep.png" alt="">
                                    <a href="#bloc_salon" style="margin-left:100px;" class="active">Salon</a>
                                    <a href="#bloc_coiffure">Coiffure</a>
                                    <a href="#bloc_ethetique">Ésthétique</a>
                                    <a href="#bloc_beaute">Beauté</a>
                                    <img src="Images/Ligne_sep.png" alt="">
                                </div>
                            </div>
                            <div id="bloc_images">
                                <div id="bloc_salon" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_coiffure" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_esthetique" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                                <div id="bloc_beaute" class="tab">
                                    <img src="Images/Photo1.jpg">
                                    <img src="Images/Photo2.jpg">
                                    <img src="Images/Photo3.jpg">
                                    <img src="Images/Photo4.jpg">
                                    <img src="Images/Photo5.jpg">
                                </div>
                            </div>
                        </div>
					</section>

Vocii mon CSS :

/* ************* CONTAINER SECTION PAGE-3 ************* */

.page-3 #bloc_galerie {
    width: 1400px;
    height: 500px;
    margin-top: 70px;
    background-color: #FFFE9A;
    font-family: Cinzel;
    border: 2px solid #B4B4B4;
}

.page-3 #bloc_galerie #texte_menu {
    width: 100%;
    height: 20%;
    padding-top: 10px;
}

.page-3 #bloc_galerie #texte {
    color: #B4B4B4;
    font-size: 25px;
    margin-top: -20px;
    margin-left: 20px; 
    float: left;
}

.page-3 #bloc_galerie #menu {
    margin-top: 20px;
    float: right;
}

.page-3 #bloc_galerie a {
    font-size: 20px;
    color: #B4B4B4;
    text-decoration: none;
    margin-right: 80px;
    border: 1px solid #B4B4B4;
    border-radius: 20px;
    padding: 10px;
}

div.tab {
    display: none;
}
div.tab:target, :target div.tab {
    display: block;
}
:target div.tab + div.tab {
    display: none;
}

.page-3 #menu a:hover {
    background-color: #B4B4B4;
    color: #FFFE9A;
}

.page-3 #menu a.active {
    background-color: #B4B4B4;
    color: #FFFE9A;
}

.page-3 #bloc_galerie #bloc_images {
    width: 100%;
    height: 50%;
}

.page-3 #bloc_images img {
    width: 250px;
    height: 350px;
    margin-left: 25px;
}

Merci !

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

breeza

22 mai 2019 à 1:00:24

Salut,

Je ne comprends pas ton problème avec ton code fournis, j'ai fais un copier/coller et cela fonctionne chez moi.

J'ai remarqué juste que tu as fais une erreur sur l'orthographe ici :

<a href="#bloc_ethetique">Ésthétique</a>

Ce devrait être :

<a href="#bloc_esthetique">Ésthétique</a>

Il manquait juste le 's'

PS : Tu n'étais pas obliger d'editer don précedent message

Solution trouvée ? => petit pouce + passer le sujet en Résolu :)

Mehddii

22 mai 2019 à 12:55:39

Ah oui, merci le 's' manquait en effet, mais cela ne résout pas mon problème, en fait je pense que c'est moi qui ai pas bien expliquer. En gros lorsque je vais sur Galerie normal j'ai ça :

Une fois je clique sur un lien ( que ce soit salon aussi d'ailleur ) j'ai ça :

PS : Petite info, malgré que dans cette dernière photo on puisse croire que avec un scroll en bas on passera vers le slide connexion, non puisque ceci est un bug et va rescroller vers galerie pour l'afficher complétement.

Le petit <p> affiché en blanc juste en haut sur la deuxième photo. Comment puis-je règler cela ?

Cordialement !

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

AliasDmc

23 mai 2019 à 19:08:34

Bonjour Shayam,

Si je me trompe pas, tu utilises déjà le :target pour ton menu principal tu ne peux donc pas réutiliser le systeme pour ta galerie

Il faut passer par le js :

https://codepen.io/Zonecss/pen/joZpxG

Découvrez les Css avec la zonecss.fr

Mehddii

25 mai 2019 à 3:00:16

Bonsoir,

déjà merci beaucoup je comprend un peu mieux mon problème ainsi,

après avoir essayer plusieurs heures / jours de décortiquer le code que tu m'a envoyé, chose par chose, je ne pu arriver à sa compréhension complète au vu de mon niveau faible en JS, ce que je vois c'est des méthodes tout ça, je n'ai aucune connaissance là dessus en ce moment.

En gros, j'ai utitliser ton code et la console m'indique une erreur comem quoi : wdgGalerie n'est pas défini.

Cordialement !

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...

AliasDmc

25 mai 2019 à 9:15:13

Bonjour Shayam,

il faut que le script soit chargé avant de l'appeler

le script c'est de "(function() {" (ligne 10 ) à "})();" ligne 48

l'appel doit se faire dans un "document.addEventListener('DOMContentLoaded',function(){";

Normalement si tu prends tout le script et que tu le colle dans une balise script

il doit fonctionner, seul "bt_galerie" et "active" de new wdgGalerie("bt_galerie","active");

sont a changer selon tes propres classes css

-
Edité par AliasDmc 25 mai 2019 à 9:18:00

Découvrez les Css avec la zonecss.fr

Mehddii

25 mai 2019 à 11:29:07

Bonjour, merci de ta réponse Alias,

je comprend un peu, donc c'est un peu comme du PHP, écrire un script et puis l'exécuter ensuite .... je vois.

Cependant, j'ai remarquer que dans mon JS de base j'ai un "use strict" ce qui veut apparemment dire que je devrais utiliser le mot clef 'var'.

J'utilise donc le 'var' pour la première ligne du code que tu m'a donné, c'est à dire :

var wdgGalerie = function (sClassBt, sClassActive) {

Ainsi, comme ça, je ne voit plus d'erreur concernant cette ligne, par contre une autre erreur apparait au niveau de l'appel du script : "document.addEventListener('DOMContentLoaded',function(){";", j'ai une erreur comme ceci :

Précision : J'ai essayer de mettre tout le code dans un <script type="text/javascript" src="blabla"> , je remarque que au chargement de ma page, plus aucune erreur n'apparait et cela ne semble pas marcher, comme si il ne le lisait même pas.

Voila merci de votre retour,

cordialement !

Postez votre code et vos msg d'erreurs - "ça marche pas" n'est pas un message d'erreur ...