customLightbox/index.html at main · HasansCode/customLightbox · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html>
<style>
*{margin:0;padding:0;box-sizing:boder-box;}
.img-container{width:250px;heght:250px;overflow:hidden;}
.img-container img{width:100%;height:100%;cursor:pointer;}
.img-container img:hover{transform:scale(1.2)}
.modal{background:red;position:fixed;top:0;left:0;width:100%;height:100%}
/*.full-img.open{}*/
.modal{opacity:0;pointer-events:none;}
.modal img{width:250px;heght:250px;}
.modal.open{opacity:1;pointer-events:all;}
</style>
<body>

<div class="gallery">
	<div class="img-container">
		<img src="https://images.ctfassets.net/hrltx12pl8hq/3MbF54EhWUhsXunc5Keueb/60774fbbff86e6bf6776f1e17a8016b4/04-nature_721703848.jpg?fit=fill&w=480&h=270" alt="somthing problem" data-original="https://media.istockphoto.com/photos/child-hands-formig-heart-shape-picture-id951945718?k=6&m=951945718&s=612x612&w=0&h=ih-N7RytxrTfhDyvyTQCA5q5xKoJToKSYgdsJ_mHrv0=">
	</div>

    <div class="img-container">
		<img src="https://thumbs.dreamstime.com/b/environment-earth-day-hands-trees-growing-seedlings-bokeh-green-background-female-hand-holding-tree-nature-field-gra-130247647.jpg" alt="somthing problem" data-original="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRd6vp_1wkyH_s2NhWlFHQEN69LeUSggGJerw&usqp=CAU">
	</div>

    <div class="img-container">
		<img src="https://lh3.googleusercontent.com/proxy/tLj0qFWQRuI8tAUc007xk_kJ_Ds_jEiIJeFB-lW8BeoAxip1PeTGk6Xw-0Z4f1Vplm68NkDJnAqbloXuRp9QLzXgiExoqjhM_EOPtKT7B3jnDpA1JspmBXocywez5xoqQRXL2xsEVsVHXQ" alt="somthing problem" data-original="https://www.whatsappimages.in/wp-content/uploads/2021/01/Boys-Feeling-Very-Sad-Images-Pics-Downlaod.jpg">
	</div>
</div>
<div class="modal">
<img src="https://upload.wikimedia.org/wikipedia/commons/thumb/b/b6/Image_created_with_a_mobile_phone.png/220px-Image_created_with_a_mobile_phone.png" alt="" class="full-img">
</div>

<script>
const modal = document.querySelector(".modal");
const previews = document.querySelectorAll(".gallery img");
const original = document.querySelector(".full-img");
previews.forEach(preview => {
preview.addEventListener('click' , () => {
	modal.classList.add("open");
    //daymic change
    const originalSrc = preview.getAttribute("data-original");
    original.src = originalSrc;
});
});
</script>

</body>
</html>