Day 4 | Demo Image Gallery

Sử dụng HTML , CSS, JS thiết kế chức năng Show Ảnh và Tạo slice Ảnh 

				
					
  <body>
    <div class="wrapper">
      <div class="image">
        <img decoding="async" src="img1.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img2.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img3.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img4.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img5.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img6.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img7.jpeg" alt="" />
      </div>
      <div class="image">
        <img decoding="async" src="img8.jpeg" alt="" />
      </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="" />
      </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 next = document.querySelector(".control.next");
const prev = document.querySelector(".control.prev");

let currentIndex = 0;

images.forEach((img, index) => {
  img.addEventListener("click", () => {
    currentIndex = index;
    showGallery();
  });
});

function 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 

 
 
 

Leave a Reply

Your email address will not be published. Required fields are marked *