Skip to content

Commit 0611d51

Browse files
solygambassolygambas
committed
add fluid image lightbox
1 parent 1034bf5 commit 0611d51

File tree

4 files changed

+146
-1
lines changed

4 files changed

+146
-1
lines changed

‎84-fluid image lightbox/index.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!-- Based on Fluid Image Pop Up JavaScript Tutorial by Simo Edwin - Dev Ed (2020)
2+
see: https://www.youtube.com/watch?v=4SQXOA8Z-lo -->
3+
4+
<!DOCTYPE html>
5+
<html lang="en">
6+
<head>
7+
<meta charset="UTF-8" />
8+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
9+
<link rel="stylesheet" href="style.css" />
10+
<title>Lightbox</title>
11+
</head>
12+
<body>
13+
<div class="gallery">
14+
<div class="img-container">
15+
<img
16+
src="https://source.unsplash.com/tzSLATuyZzM/640x853"
17+
alt="No elegance is possible without perfume"
18+
data-original="tzSLATuyZzM/1920x2560"
19+
/>
20+
</div>
21+
<div class="img-container">
22+
<img
23+
src="https://source.unsplash.com/GWQ2KmCXrQA/640x1137"
24+
alt="It is the unseen, unforgettable, ultimate accessory"
25+
data-original="GWQ2KmCXrQA/1920x3413"
26+
/>
27+
</div>
28+
<div class="img-container">
29+
<img
30+
src="https://source.unsplash.com/nkWnc-W_GP8/640x853"
31+
alt="A perfume is like a piece of clothing, a message"
32+
data-original="nkWnc-W_GP8/1920x2560"
33+
/>
34+
</div>
35+
<div class="img-container">
36+
<img
37+
src="https://source.unsplash.com/Ou00pmFFPKA/640x853"
38+
alt="Perfume is like a parenthesis, a moment of freedom"
39+
data-original="Ou00pmFFPKA/1920x2560"
40+
/>
41+
</div>
42+
</div>
43+
<div class="modal">
44+
<img src="" alt="" class="full-img" />
45+
<p class="caption"></p>
46+
</div>
47+
<script src="script.js"></script>
48+
</body>
49+
</html>

‎84-fluid image lightbox/script.js

+22
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
const modal = document.querySelector(".modal");
2+
const previews = document.querySelectorAll(".gallery img");
3+
const original = document.querySelector(".full-img");
4+
const caption = document.querySelector(".caption");
5+
6+
previews.forEach((preview) => {
7+
preview.addEventListener("click", () => {
8+
modal.classList.add("open");
9+
original.classList.add("open");
10+
const originalSize = preview.getAttribute("data-original");
11+
original.src = `https://source.unsplash.com/${originalSize}`;
12+
caption.textContent = preview.alt;
13+
// Reference: https://stackoverflow.com/questions/35213147/difference-between-textcontent-vs-innertext
14+
});
15+
});
16+
17+
modal.addEventListener("click", (e) => {
18+
if (e.target.classList.contains("modal")) {
19+
modal.classList.remove("open");
20+
original.classList.remove("open");
21+
}
22+
});

‎84-fluid image lightbox/style.css

+73
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Sacramento&display=swap");
2+
3+
* {
4+
box-sizing: border-box;
5+
margin: 0;
6+
padding: 0;
7+
}
8+
9+
body {
10+
font-family: "Sacramento", cursive;
11+
}
12+
13+
.gallery {
14+
display: grid;
15+
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
16+
min-height: 100vh;
17+
gap: 2rem;
18+
}
19+
20+
.img-container {
21+
overflow: hidden;
22+
}
23+
24+
.img-container img {
25+
cursor: pointer;
26+
width: 100%;
27+
height: 100%;
28+
object-fit: cover;
29+
transition: all 0.3s ease-out;
30+
}
31+
32+
.img-container img:hover {
33+
transform: scale(1.2);
34+
}
35+
36+
.modal {
37+
background-color: rgba(0, 0, 0, 0.8);
38+
position: fixed;
39+
top: 0;
40+
left: 0;
41+
width: 100%;
42+
height: 100%;
43+
opacity: 0;
44+
pointer-events: none;
45+
transition: opacity 0.3s ease-out;
46+
}
47+
48+
.modal.open {
49+
opacity: 1;
50+
pointer-events: all;
51+
}
52+
53+
.full-img {
54+
position: absolute;
55+
height: 75%;
56+
top: 50%;
57+
left: 50%;
58+
transform: translate(-50%, -50%) scale(0.5);
59+
transition: all 0.3s ease-out;
60+
}
61+
62+
.full-img.open {
63+
transform: translate(-50%, -50%) scale(1);
64+
}
65+
66+
.modal p {
67+
color: white;
68+
font-size: 2rem;
69+
position: absolute;
70+
bottom: 5%;
71+
left: 50%;
72+
transform: translate(-50%, -5%);
73+
}

‎README.md

+2-1
Original file line numberDiff line numberDiff line change
@@ -88,7 +88,8 @@
8888
| 80 | [Health Dashboard](https://github.com/solygambas/html-css-fifty-projects/tree/master/80-health%20dashboard) | [Live Demo](https://codepen.io/solygambas/full/XWNvEKz) |
8989
| 81 | [Animated SVG](https://github.com/solygambas/html-css-fifty-projects/tree/master/81-animated%20SVG) | [Live Demo](https://codepen.io/solygambas/full/vYyoVWR) |
9090
| 82 | [Parallax Landing Page](https://github.com/solygambas/html-css-fifty-projects/tree/master/82-parallax%20landing%20page) | [Live Demo](https://codepen.io/solygambas/full/ExZxxRo) |
91-
| 83 | [Full Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/83-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) |
91+
| 83 | [Full-Screen Image Slider](https://github.com/solygambas/html-css-fifty-projects/tree/master/83-full%20screen%20image%20slider) | [Live Demo](https://codepen.io/solygambas/full/JjEoEdb) |
92+
| 84 | [Fluid Image Lightbox](https://github.com/solygambas/html-css-fifty-projects/tree/master/84-fluid%20image%20lightbox) | [Live Demo](https://codepen.io/solygambas/full/MWJKpwg) |
9293

9394
This repository is mostly based on 2 courses by Brad Traversy (2020):
9495

0 commit comments

Comments
 (0)