ls-cmd2
diff --git a/‎35. Image Gallery/app.js
Lines changed: 17 additions & 0 deletions b/‎35. Image Gallery/app.js
Lines changed: 17 additions & 0 deletions
diff --git a/‎35. Image Gallery/images/Img1.jpg
2.17 MB b/‎35. Image Gallery/images/Img1.jpg
2.17 MB
diff --git a/‎35. Image Gallery/images/Img2.jpg
1.62 MB b/‎35. Image Gallery/images/Img2.jpg
1.62 MB
diff --git a/‎35. Image Gallery/images/img3.jpg
1.05 MB b/‎35. Image Gallery/images/img3.jpg
1.05 MB
diff --git a/‎35. Image Gallery/images/img4.jpg
2.12 MB b/‎35. Image Gallery/images/img4.jpg
2.12 MB
diff --git a/‎35. Image Gallery/images/img5.jpg
2.06 MB b/‎35. Image Gallery/images/img5.jpg
2.06 MB
diff --git a/‎35. Image Gallery/images/img6.jpg
1.7 MB b/‎35. Image Gallery/images/img6.jpg
1.7 MB
diff --git a/‎35. Image Gallery/images/img7.jpg
4.08 MB b/‎35. Image Gallery/images/img7.jpg
4.08 MB
diff --git a/‎35. Image Gallery/images/img8.jpg
1.9 MB b/‎35. Image Gallery/images/img8.jpg
1.9 MB
diff --git a/‎35. Image Gallery/index.html
Lines changed: 29 additions & 0 deletions b/‎35. Image Gallery/index.html
Lines changed: 29 additions & 0 deletions
@@ -0,0 +1,17 @@
+let images = document.querySelectorAll("img");
+let wrapper = document.getElementById("wrapper");
+let imgWrapper = document.getElementById("fullImg");
+let close = document.querySelector("span");
+
+images.forEach((img, index) => {
+  img.addEventListener("click", () => {
+    openModal(`images/img${index}.jpg`);
+  });
+});
+
+close.addEventListener("click", () => (wrapper.style.display = "none"));
+
+function openModal(pic) {
+  wrapper.style.display = "flex";
+  imgWrapper.src = pic;
+}
@@ -0,0 +1,29 @@
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Image Gallerytitle>
+    <link rel="stylesheet" href="style.css" />
+  head>
+  <body>
+    
+    <div class="imageWrapper" id="wrapper">
+      <img src="images/Img1.jpg" id="fullImg" />
+      <span>Xspan>
+    div>
+
+    <div class="img-gallery">
+      <img src="images/Img1.jpg" />
+      <img src="images/Img2.jpg" />
+      <img src="images/Img3.jpg" />
+      <img src="images/Img4.jpg" />
+      <img src="images/Img5.jpg" />
+      <img src="images/Img6.jpg" />
+      <img src="images/Img7.jpg" />
+      <img src="images/Img8.jpg" />
+    div>
+
+    <script src="app.js">script>
+  body>
+html>