Skip to content

Commit ffc133a

Browse files
committed
Image Gallery
1 parent 0454b1f commit ffc133a

File tree

11 files changed

+103
-0
lines changed

11 files changed

+103
-0
lines changed

35. Image Gallery/app.js

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
let images = document.querySelectorAll("img");
2+
let wrapper = document.getElementById("wrapper");
3+
let imgWrapper = document.getElementById("fullImg");
4+
let close = document.querySelector("span");
5+
6+
images.forEach((img, index) => {
7+
img.addEventListener("click", () => {
8+
openModal(`images/img${index}.jpg`);
9+
});
10+
});
11+
12+
close.addEventListener("click", () => (wrapper.style.display = "none"));
13+
14+
function openModal(pic) {
15+
wrapper.style.display = "flex";
16+
imgWrapper.src = pic;
17+
}

35. Image Gallery/images/Img1.jpg

2.17 MB
Loading

35. Image Gallery/images/Img2.jpg

1.62 MB
Loading

35. Image Gallery/images/img3.jpg

1.05 MB
Loading

35. Image Gallery/images/img4.jpg

2.12 MB
Loading

35. Image Gallery/images/img5.jpg

2.06 MB
Loading

35. Image Gallery/images/img6.jpg

1.7 MB
Loading

35. Image Gallery/images/img7.jpg

4.08 MB
Loading

35. Image Gallery/images/img8.jpg

1.9 MB
Loading

35. Image Gallery/index.html

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<html lang="en">
2+
<head>
3+
<meta charset="UTF-8" />
4+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Image Gallerytitle>
7+
<link rel="stylesheet" href="style.css" />
8+
head>
9+
<body>
10+
11+
<div class="imageWrapper" id="wrapper">
12+
<img src="images/Img1.jpg" id="fullImg" />
13+
<span>Xspan>
14+
div>
15+
16+
<div class="img-gallery">
17+
<img src="images/Img1.jpg" />
18+
<img src="images/Img2.jpg" />
19+
<img src="images/Img3.jpg" />
20+
<img src="images/Img4.jpg" />
21+
<img src="images/Img5.jpg" />
22+
<img src="images/Img6.jpg" />
23+
<img src="images/Img7.jpg" />
24+
<img src="images/Img8.jpg" />
25+
div>
26+
27+
<script src="app.js">script>
28+
body>
29+
html>

0 commit comments

Comments
 (0)