Cách tạo: Thư viện hình ảnh modal

Học cách sử dụng CSS và JavaScript để tạo thư viện hình ảnh modal (hộp đèn).

Tạo hộp đèn

Dưới đây là ví dụ vềHộp thoại (Modals)和幻灯片（Slideshows）cùng nhau để tạo hiệu ứng cửa sổ ánh sáng (lightbox).

Bước 1 - Thêm HTML：

<!-- Hình ảnh để mở cửa sổ ánh sáng -->
<div class="row">
  <div class="column">
    <img src="img1.jpg" onclick="openModal();currentSlide(1)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img2.jpg" onclick="openModal();currentSlide(2)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img3.jpg" onclick="openModal();currentSlide(3)" class="hover-shadow">
  </div>
  <div class="column">
    <img src="img4.jpg" onclick="openModal();currentSlide(4)" class="hover-shadow">
  </div>
</div>
<!-- Mô hình cửa sổ/Đèn đường -->
<div id="myModal" class="modal">
  <span class="close cursor" onclick="closeModal()">×</span>
  <div class="modal-content">
    <div class="mySlides">
      <div class="numbertext">1 / 4</div>
      <img src="img1_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">2 / 4</div>
      <img src="img2_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">3 / 4</div>
      <img src="img3_wide.jpg" style="width:100%">
    </div>
    <div class="mySlides">
      <div class="numbertext">4 / 4</div>
      <img src="img4_wide.jpg" style="width:100%">
    </div>
    <!-- Tiếp theo/Trước đó điều khiển -->
    <a class="prev" onclick="plusSlides(-1)">❮</a>
    <a class="next" onclick="plusSlides(1)">❯</a>
    <!-- Văn bản tiêu đề -->
    <div class="caption-container">
      <p id="caption"></p>
    </div>
    <!-- Điều khiển hình thu nhỏ -->
    <div class="column">
      <img class="demo" src="img1.jpg" onclick="currentSlide(1)" alt="Tự nhiên">
    </div>
    <div class="column">
      <img class="demo" src="img2.jpg" onclick="currentSlide(2)" alt="Nước tuyết">
    </div>
    <div class="column">
      <img class="demo" src="img3.jpg" onclick="currentSlide(3)" alt="Núi">
    </div>
    <div class="column">
      <img class="demo" src="img4.jpg" onclick="currentSlide(4)" alt="Ánh sáng">
    </div>
  </div>
</div>

Bước 2 - Thêm CSS:

.row > .column {
  padding: 0 8px;
}
.row:after {
  content: "";
  display: table;
  clear: both;
}
/* Tạo bốn cột song song bằng nhau */
.column {
  float: left;
  width: 25%;
}
/* Mô đun cửa sổ (bối cảnh) */
.modal {
  display: none;
  position: fixed;
  z-index: 1;
  padding-top: 100px;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: black;
}
/* Nội dung mô đun */
.modal-content {
  position: relative;
  background-color: #fefefe;
  margin: auto;
  padding: 0;
  width: 90%;
  max-width: 1200px;
}
/* Nút đóng */
.close {
  color: white;
  position: absolute;
  top: 10px;
  right: 25px;
  font-size: 35px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: #999;
  text-decoration: none;
  cursor: pointer;
}
/* Ẩn các slide mặc định */
.mySlides {
  display: none;
}
/* Nút 'tiếp theo' / 'trước' */
.prev,
.next {
  cursor: pointer;
  position: absolute;
  top: 50%;
  width: auto;
  padding: 16px;
  margin-top: -50px;
  color: white;
  font-weight: bold;
  font-size: 20px;
  transition: 0.6s ease;
  border-radius: 0 3px 3px 0;
  user-select: none;
  -webkit-user-select: none;
}
/* Đặt nút 'tiếp theo' ở bên phải */
.next {
  right: 0;
  border-radius: 3px 0 0 3px;
}
/* Khi di chuột qua, thêm màu đen có độ trong suốt */
.prev:hover,
.next:hover {
  background-color: rgba(0, 0, 0, 0.8);
}
/* Văn bản số (1/3 v.v.) */
.numbertext {
  color: #f2f2f2;
  font-size: 12px;
  padding: 8px 12px;
  position: absolute;
  top: 0;
}
/* Văn bản tiêu đề */
.caption-container {
  text-align: center;
  background-color: black;
  padding: 2px 16px;
  color: white;
}
img.demo {
  opacity: 0.6;
}
.active,
.demo:hover {
  opacity: 1;
}
img.hover-shadow {
  transition: 0.3s;
}
.hover-shadow:hover {
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

Bước 3 - Thêm JavaScript:

<script>
// Mở hộp thoại
function mởModal() {
  document.getElementById("myModal").style.display = "block";
}
// Đóng hộp modal
function closeModal() {
  document.getElementById("myModal").style.display = "none";
}
var slideIndex = 1;
showSlides(slideIndex);
// Điều khiển chuyển đổi giữa幻灯
function plusSlides(n) {
  showSlides(slideIndex += n);
}
// Điều khiển hình ảnh thu nhỏ
function currentSlide(n) {
  showSlides(slideIndex = n);
}
function showSlides(n) {
  var i;
  var slides = document.getElementsByClassName("mySlides");
  var dots = document.getElementsByClassName("demo");
  var captionText = document.getElementById("caption");
  if (n > slides.length) {slideIndex = 1}
  if (n < 1) {slideIndex = slides.length}
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  for (i = 0; i < dots.length; i++) {
    dots[i].className = dots[i].className.replace(" active", "");
  }
  slides[slideIndex-1].style.display = "block";
  dots[slideIndex-1].className += " active";
  captionText.innerHTML = dots[slideIndex-1].alt;
}
</script>

Thử ngay

Trang liên quan

Hướng dẫn:Cách tạo mô đun

Hướng dẫn:Cách tạo幻灯