Add petpet function

src/index.html

@@ -21,37 +21,44 @@
             <div class="swiper-wrapper">
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/denis_chemise.png">
+                        <img class="normal-denis" src="./images/denis/denis_chemise.png">
+                        <img class="petpet-denis"src="./images/denis/denis-chemise-petpet.gif">
                     </div> 
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/denis_chapeau.png">
+                        <img class="normal-denis" src="./images/denis/denis_chapeau.png">
+                        <img class="petpet-denis"src="./images/denis/denis-chapeau-petpet.gif">
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/saint_denis.png">
+                        <img class="normal-denis" src="./images/denis/saint_denis.png">
+                        <img class="petpet-denis"src="./images/denis/saint-denis-petpet.gif">
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/denis.png">
+                        <img class="normal-denis" src="./images/denis/denis.png">
+                        <img class="petpet-denis"src="./images/denis/denis-petpet.gif">
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/denis_noel.png">
+                        <img class="normal-denis" src="./images/denis/denis_noel.png">
+                        <img class="petpet-denis" src="./images/denis/denis-noel-petpet.gif">
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/denis_bobo.png">
+                        <img class="normal-denis" src="./images/denis/denis_bobo.png">
+                        <img class="petpet-denis" src="./images/denis/denis-bobo-petpet.gif">
                     </div>
                 </div>
                 <div class="swiper-slide">
                     <div class="photo-container">
-                        <img src="./images/denis/thinking_denis.png">
+                        <img class="normal-denis" src="./images/denis/thinking_denis.png">
+                        <img class="petpet-denis" src="./images/denis/thinking-denis-petpet.gif">
                     </div>
                 </div>
             </div>

src/script.js

@@ -118,12 +118,44 @@ const addMaximumScaleToMetaViewport = () => {
     }
   };
   
-  const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
-  
-  // https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
-  const checkIsIOS = () =>
-    /iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
-  
-  if (checkIsIOS()) {
-    disableIosTextFieldZoom();
-  }
+const disableIosTextFieldZoom = addMaximumScaleToMetaViewport;
+
+// https://stackoverflow.com/questions/9038625/detect-if-device-is-ios/9039885#9039885
+const checkIsIOS = () =>
+/iPad|iPhone|iPod/.test(navigator.userAgent) && !window.MSStream;
+
+if (checkIsIOS()) {
+disableIosTextFieldZoom();
+}
+
+normalsPics = document.querySelectorAll(".normal-denis");
+petpetPics = document.querySelectorAll(".petpet-denis");
+
+normalsPics.forEach(pic => {
+    pic.addEventListener("click", () => {
+
+        normalsPics.forEach(pic => {
+            pic.style.display = "none";
+        });
+
+        petpetPics.forEach(pic => {
+            pic.style.display = "block";
+        });
+
+    });
+});
+
+
+petpetPics.forEach(pic => {
+    pic.addEventListener("click", () => {
+
+        petpetPics.forEach(pic => {
+            pic.style.display = "none";
+        });
+
+        normalsPics.forEach(pic => {
+            pic.style.display = "block";
+        });
+
+    });
+});

src/style.css

@@ -170,6 +170,10 @@ body {
 	margin-right: -0.625em;
 }
 
+.petpet-denis {
+    display: none;
+}
+
 @media screen and (max-width: 1024px) {
 
     body {
@@ -224,3 +228,4 @@ body {
         margin-left: 15vw;
     }
 }
+