<body>
<div class="wrapper">
<div class="image">
<img decoding="async" src="img1.jpeg" alt="học lập trình frontend, fullstack hà nội, img1" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 1 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img2.jpeg" alt="học lập trình frontend, fullstack hà nội, img2" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 2 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img3.jpeg" alt="học lập trình frontend, fullstack hà nội, img3" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 3 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img4.jpeg" alt="học lập trình frontend, fullstack hà nội, img4" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 4 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img5.jpeg" alt="học lập trình frontend, fullstack hà nội, img5" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 5 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img6.jpeg" alt="học lập trình frontend, fullstack hà nội, img6" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 6 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img7.jpeg" alt="học lập trình frontend, fullstack hà nội, img7" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 7 học lập trình frontend, fullstack hà nội">
</div>
<div class="image">
<img decoding="async" src="img8.jpeg" alt="học lập trình frontend, fullstack hà nội, img8" title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 8 học lập trình frontend, fullstack hà nội">
</div>
</div>
<div class="gallery">
<span class="control prev">
<i class="fas fa-chevron-left"></i>
</span>
<span class="control next">
<i class="fas fa-chevron-right"></i>
</span>
<div class="gallery-inner">
<img decoding="async" src="" alt="học lập trình frontend, fullstack hà nội," title="# Day 4 | Hiệu ứng show ảnh Image Gallery chuyên nghiệp không phải ai cũng biết 9 học lập trình frontend, fullstack hà nội">
</div>
<i class="fas fa-times close"></i>
</div>
<script src="app.js"></script>
</body>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
height: 100vh;
background-color: #dadada;
display: flex;
}
.wrapper {
width: 1200px;
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
margin: auto;
}
.image {
width: 22%;
height: 200px;
overflow: hidden;
margin: 10px;
cursor: pointer;
border-radius: 4px;
}
.image:hover img {
transform: scale(1.2);
}
img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: center;
transition: 0.25s;
}
.gallery {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.8);
z-index: 1;
display: flex;
opacity: 0;
pointer-events: none;
transform: scale(0.8);
transition: 0.25s;
}
.gallery.show {
opacity: 1;
pointer-events: auto;
transform: scale(1);
}
.gallery-inner {
width: 70%;
height: 70%;
margin: auto;
}
.control {
position: absolute;
color: rgba(255, 255, 255, 0.8);
font-size: 50px;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.prev {
left: 15px;
}
.next {
right: 15px;
}
.close {
color: white;
font-size: 35px;
position: absolute;
top: 15px;
right: 25px;
cursor: pointer;
}
.hide {
display: none;
}
const images = document.querySelectorAll(".wrapper .image img");
const gallery = document.querySelector(".gallery");
const galleryImg = document.querySelector(".gallery-inner img");
const close = document.querySelector(".gallery .close");
const <a href="https://nodemy.vn/xay-dung-ung-dung-ecommerce-voi-next-js-cho-nguoi-moi-bat-dau-important/">next</a> = document.querySelector(".control.next");
const prev = document.querySelector(".control.prev");
let currentIndex = 0;
images.forEach((img, index) => {
img.addEventListener("click", () => {
currentIndex = index;
showGallery();
});
});
<a href="https://nodemy.vn/tim-hieu-ve-ham-trong-javascript-cach-tao-truyen-tham-so-va-su-dung-mot-cach-hieu-qua-don-gian-de-hieu-danh-cho-nguoi-moi-bat-dau-important/">function</a> showGallery() {
currentIndex == images.length - 1
? next.classList.add("hide")
: next.classList.remove("hide");
currentIndex == 0
? prev.classList.add("hide")
: prev.classList.remove("hide");
gallery.classList.add("show");
galleryImg.src = images[currentIndex].src;
}
close.addEventListener("click", () => {
gallery.classList.remove("show");
});
next.addEventListener("click", () => {
currentIndex != images.length - 1 ? currentIndex++ : undefined;
showGallery();
});
prev.addEventListener("click", () => {
currentIndex != 0 ? currentIndex-- : undefined;
showGallery();
});
// esc click
document.addEventListener("keydown", (e) => {
if (e.keyCode == 27) gallery.classList.remove("show");
});
LỘ TRÌNH LÊN FULLSTACK, trọn bộ serial course Pro HTML,CSS,JAVASCRIPT MIỄN PHÍ :
HTML : HTML căn bản cho người mới bắt đầu
CSS : CSS căn bản cho người mới bắt đầu
JS: Javascript cho người mới bắt đầu
2 Responses