Feat: Page gallerie, affichage des images en mosaïque ou en colonne #6

gallerie.html

@@ -13,13 +13,13 @@
     <link href="https://fonts.googleapis.com/css2?family=Bangers&family=M+PLUS+Rounded+1c:wght@300&display=swap"
         rel="stylesheet">
 
-
     <!--Titre et déscription-->
     <title>Javascript-project</title>
     <meta name="Description" content="Bienvenue sur le 1er projet Javascript de Pierrick MARTINET.">
 
     <!--Srcipt-->
-    <script src="scriptGallerie.js"></script>
+    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js" defer></script>
+    <script src="scriptGallerie.js" defer></script>
 
 </head>
 
@@ -29,26 +29,33 @@
         <div class="titleHeader">
             <h2 class="textWhite titleFont">Javascript Project</h2>
         </div>
-        <div>
-            <nav>
-                <div>
-                    <a href="index.html">Accueil</a>
-                </div>
-                <div>
-                    <a href="gallerie.html">Gallerie</a>
-                </div>
-                <div>
-                    <a href="jeu.html">Jeu</a>
-                </div>
-            </nav>
+        <!-- Menu dropdown -->
+        <div class="dropdown closed">
+            <h2 class="icon">Menu<span>∆</span></h2>
+            <ul class="menu">
+                <li><a href="index.html">Accueil</a></li>
+                <li><a href="gallerie.html">Gallerie</a></li>
+                <li><a href="jeu.html">Jeu</a></li>
+            </ul>
         </div>
 
     </header>
 
 
     <main>
         <h1>Gallerie</h1>
-
+        <div id="divIconGallery">
+            <img class="iconGalleryMosaic" src="images/mosaicIcon.svg" alt="icone affichage mosaïque">
+            <img class="iconGalleryColumn" src="images/columnIcon.svg" alt="icone affichage colonne">
+        </div>
+        <div id="imgGallery">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery1.jpg" alt="Image de chuck Norris">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery2.jpg" alt="Image de chuck Norris">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery3.jpg" alt="Image de chuck Norris">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery4.jpg" alt="Image de chuck Norris">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery5.jpg" alt="Image de chuck Norris">
+            <img class="imgGalleryColumn imgGalleryMosaic" src="images/chuckGallery6.jpg" alt="Image de chuck Norris">
+        </div>
     </main>
 
 

index.html

@@ -49,7 +49,7 @@ <h2 class="icon">Menu<span>∆</span></h2>
 
 
     <main>
-        <h1 id="titleJavascriptProject">Accueil</h1>
+        <h1>Accueil</h1>
 
         <!-- Carrousel d'image -->
         <div class="fotorama" data-transition="slide" data-loop="true" data-autoplay="3000">

scriptGallerie.js

@@ -0,0 +1,56 @@
+$(document).ready(function () {
+    console.log('Je peux maintenant écrire du code jQuery');
+
+    // Menu dropDown
+
+    // Séléction de la div de la classe dropdown 
+    let dropdown = document.querySelector('.dropdown')
+
+    // Au clic si fermé: ouvre sinon ferme
+    dropdown.addEventListener('click', (e) => {
+
+        if (dropdown.classList.contains('closed')) {
+            dropdown.classList.remove('closed')
+        } else {
+            dropdown.classList.add('closed')
+        }
+
+    })
+
+
+    // Gallerie d'image
+
+    // La variable iconGalleryMosaic prend pour valeur l'icon inconGalleryMosaic
+    let iconGalleryMosaic = document.querySelector('.iconGalleryMosaic');
+    // La variable iconGalleryColumn prend pour valeur l'icon inconGalleryColumn
+    let iconGalleryColumn = document.querySelector('.iconGalleryColumn');
+
+    // La variable imgGallery prend pour valeur un tableau avec les images de la div portant l'id imgGallery
+    let imgGallery = document.querySelectorAll('#imgGallery img');
+
+
+    // Listener sur l'icon Mosaïque au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
+    iconGalleryMosaic.addEventListener('click', (e) => {
+        index = 0;
+        // Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe colonne et ajout de la classe Mosaïque tant qu'il y a des images
+        while(index < imgGallery.length){
+            imgGallery[index].classList.remove("imgGalleryColumn");
+            imgGallery[index].classList.add("imgGalleryMosaic");
+            index = index + 1;
+        }
+
+    })
+
+    // Listener sur l'icon Colonne au click de la souris (l'évenement se passe lorsque l'utilisateur clique sur l'icon)
+    iconGalleryColumn.addEventListener('click', (e) => {
+        index = 0;
+        // Au moment ou l'utilisateur clique sur l'icon, pour chaque image, supression de la classe Mosaïque et ajout de la classe Colonne tant qu'il y a des images
+        while(index < imgGallery.length){
+            imgGallery[index].classList.remove("imgGalleryMosaic");
+            imgGallery[index].classList.add("imgGalleryColumn");
+            index = index + 1;
+        }
+
+    })
+
+});

scriptIndex.js

@@ -67,7 +67,6 @@ $(document).ready(function () {
         let joke = document.getElementById('joke').value;
         // les variables name et joke sont insérés dans le DOM avec les autres blagues
         $('<div class="blagues">'+ '<div>' + name + '</div>' + '<div>' + joke + '</div>' + '</div>').prependTo('#feed');
-
     }
 
 });

style.css

@@ -43,6 +43,7 @@ a:hover{
 
 h1{
     margin: 0;
+    padding: 40px 0px;
     display: flex;
     justify-content: center;
 }
@@ -62,9 +63,6 @@ main{
 
 /* Main */
 
-#titleJavascriptProject{
-    padding: 40px 0px;
-}
 
 #refreshingIcon{
     width: 50px;
@@ -156,4 +154,45 @@ justify-content: center;
   background-color: #CCDAD1;
   margin: 20px 200px;
   padding: 10px 0px;
+}
+
+
+/* Gallery image */
+
+.imgGalleryMosaic{
+  height: auto;
+  width: 40%;
+  margin: 5px;
+}
+
+.imgGalleryColumn{
+  height: auto;
+  width: 50%;
+  margin: 5px;
+}
+
+
+#imgGallery{
+  display: flex;
+  justify-content: center;
+  flex-wrap: wrap;
+}
+
+
+/* Icon Gallery */
+
+.iconGalleryMosaic{
+  width: 5%;
+  height: auto;
+}
+
+.iconGalleryColumn{
+  width: 5%;
+  height: auto;
+}
+
+#divIconGallery{
+  display: flex;
+  justify-content: space-evenly;
+  margin: 4%;
 }