Tôi không có tài năng gì cả. Tôi chỉ đam mê hiểu biết
Tạo Hiệu Ứng Lightbox Với Thư Viện LightgalleryJS

Tạo Hiệu Ứng Lightbox Với Thư Viện LightgalleryJS


Ngày 10 Tháng 10 Năm 2020

Tạo Hiệu Ứng Lightbox Với Thư Viện LightgalleryJS

Ngày hôm nay chúng ta sẽ đi vào tìm hiểu cách tạo hiệu ứng lightbox cho trang web bằng việc kết hợp thư viện lightgallery javascript với HTML CSS nhé!

Giới Thiệu Về Thư Viện LightgalleryJS

Mình xin giới thiệu sơ qua một chút về light box. Nó là một component dùng để hiển thị hình ảnh chi tiết cho trang web thông qua việc sử dụng modal kết hợp với background overlay. Hiệu ứng này sẽ hiển thị đầy đủ kích thước của hình ảnh và làm mờ các phần còn lại của website giúp người dùng có thể tập trung vào hình ảnh mà họ đang muốn xem. Thông thường hiệu ứng light box sẽ được xây dựng bằng HTML, CSS và Javascript.

Nếu bạn muốn tham khảo về lightbox cũng như cách tạo hiệu ứng này bằng HTML, CSS, Javascript thuần thì có thể xem các đường dẫn mình để ở bên dưới nhé!

LightgalleryJS là một thư viện Javascript giúp bạn tạo ra hiệu ứng lightbox cho trang web một cách nhanh chóng và dễ dàng. Thư viện này tích hợp nhiều tính năng hữu ích như là hiển thị được trên nhiều màn hình thiết bị khác nhau, dễ dàng chỉnh sửa, có các hiệu ứng chuyển động cho hình ảnh, nó có plugin giúp người dùng có thể dễ dàng chia sẻ hình ảnh lên các trang mạng xã hội phổ biến, có thể sử dụng cho video...

Để sử dụng trực tiếp cho trang HTML thì bạn chỉ cần thêm các đường dẫn CDN của thư viện ở bên dưới:

 <!--Đường Dẫn CDN CSS-->
 <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css">
<!--Đường Dẫn CDN Javascript-->
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
 <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery-all.min.js"></script>

Nếu bạn muốn cài qua npm thì có thể sử dụng đoạn mã sau nhé:

$ npm install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share

Còn đây là mã để bạn cài thư viện bằng bower:

$ bower install lightgallery lg-thumbnail lg-autoplay lg-video lg-fullscreen lg-pager lg-zoom lg-hash lg-share

Tạo Lightbox Bằng Thư Viện LightgalleryJS

Phần đầu tiên chúng ta sẽ đi vào tạo hai file là index.html(nơi lưu trữ HTML) và style.css(nơi lưu trữ mã CSS). Sau đó liên kết chúng với thư viện LightgalleryJS và Google Font thông qua đoạn mã dưới đây nhé:

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tạo Lightbox Bằng Thư Viện LightgalleryJS</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lightgallery.min.css">
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/lightgallery-all.min.js"></script>
</body>
</html>

Trước khi đi vào ví dụ thì mình sẽ giới thiệu sơ qua về cấu trúc tổng quát HTML khi bạn sử dụng thư viện LightgalleryJS nhé:

Đoạn mã tổng quát:

<div id="lightgallery">
  <a href="img/img1.jpg">
      <img src="img/thumb1.jpg" />
  </a>
  <a href="img/img2.jpg">
      <img src="img/thumb2.jpg" />
  </a>
...
</div>

Mình có một số lưu ý với đoạn mã trên là tất cả các hình ảnh bạn muốn sử dụng hiệu ứng lightbox thì cần đặt trong cùng một div cha, mà ví dụ của đoạn mã trên là thẻ div có id là lightgallery (Nó sẽ được dùng để khởi tạo thư viện). Các thẻ hình ảnh sẽ được bọc trong các thẻ a với đường dẫn tương ứng.

Sau khi bạn đã nắm được đoạn mã trên thì bước tiếp theo chúng ta sẽ tạo cấu trúc phần tử HTML cho phần tử lightbox trong trang web thông qua đoạn mã bên dưới nhé:

HTML

<h2>Hiệu Ứng Light Box</h2>
<div class="container">
  <div id="lightgallery">
    <a
      href="https://images.pexels.com/photos/606453/pexels-photo-606453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail"
        src="https://images.pexels.com/photos/606453/pexels-photo-606453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </a>
    <a
      href="https://images.pexels.com/photos/1640820/pexels-photo-1640820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail"
        src="https://images.pexels.com/photos/1640820/pexels-photo-1640820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </a>
    <a
      href="https://images.pexels.com/photos/235798/pexels-photo-235798.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail"
        src="https://images.pexels.com/photos/235798/pexels-photo-235798.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </a>
  </div>
</div>

Bây giờ chúng ta sẽ sử dụng CSS để thiết lập vị trí, khoảng cách, shadow... cho nội dung trong light box thông qua đoạn code sau nhé:

CSS

.img-thumbnail{
  width: 300px;
  height: auto;
  margin-right: 2em;
  box-shadow: 0 1px 1px rgba(0,0,0,0.12), 
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}
body{
  font-family: 'Open Sans', sans-serif;
}
h2{
  text-align:center;
  text-shadow: 0px 10px 10px #234D3C;
}
.container{
  display:flex;
  justify-content:center;
  align-items:center;
}

Bước cuối cùng chúng ta sẽ đi vào khởi tạo thư viện bằng Javascript trong đoạn mã sau nhé:

$(document).ready(function() {
  $("#lightgallery").lightGallery();
});

Và kết quả cuối cùng bạn xem Code ở dưới nhé:

See the Pen Tạo Lightbox Bằng Thư Viện LightgalleryJS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Ở đây nó cũng có tích hợp một số tính năng hữu ích sẵn có trong thư viện như là nút chia sẻ , xoay, phóng to, thu nhỏ, tải xuống ... hình ảnh.(Bạn hãy nhấp vào hình ảnh thumbnail để thấy các chức năng này nhé!)

Nguồn

Tạo Lightbox Với Caption Bằng Thư Viện LightgalleryJS

Thư viện này cung cấp cho chúng ta một tính năng khá là hữu ích đó là tạo chú thích cho từng hình ảnh thông qua việc sử dụng thuộc tính data-sub-html. Để hiểu rõ hơn bạn xem đoạn mã sau nhé:

HTML

<h2>Hiệu Ứng Light Box</h2>
<!--Nơi Thẻ Div Chứa Các Chú Tích Cho Hình Ảnh-->
<div class="caption1" style="display:none">
  <h4>Chú Thích Hình Ảnh 1</h4>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, at tempora neque aliquid fugit animi quam est accusantium ullam repellat exercitationem quia numquam officiis et repudiandae placeat? Libero,repellendus ullam.....</p>
</div>
<div class="caption2" style="display:none">
  <h4>Chú Thích Hình Ảnh 2</h4>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, at tempora neque aliquid fugit animi quam est accusantium ullam repellat exercitationem quia numquam officiis et repudiandae placeat? Libero,repellendus ullam.....</p>
</div>
<div class="caption3" style="display:none">
  <h4>Chú Thích Hình Ảnh 3</h4>
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Maxime, at tempora neque aliquid fugit animi quam est accusantium ullam repellat exercitationem quia numquam officiis et repudiandae placeat? Libero,repellendus ullam.....</p>
</div>
<!--Nơi Hiển Thị Hình Ảnh Và Chú Thích Của Nó-->
<div class="container">
  <div id="lightgallery">
    <a data-sub-html=".caption1" href="https://images.pexels.com/photos/606453/pexels-photo-606453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail" src="https://images.pexels.com/photos/606453/pexels-photo-606453.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      </a>
    <a data-sub-html=".caption2"href="https://images.pexels.com/photos/1640820/pexels-photo-1640820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail" src="https://images.pexels.com/photos/1640820/pexels-photo-1640820.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </a>
    <a data-sub-html=".caption3" href="https://images.pexels.com/photos/235798/pexels-photo-235798.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
      <img class="img-thumbnail" src="https://images.pexels.com/photos/235798/pexels-photo-235798.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
    </a>
  </div>
</div>

Ở trên mình sử dụng thuộc tính display:none cho các thẻ div caption vì muốn nó không hiển thị mặc định trên trang web. Chỉ khi nào người dùng nhấn vào hình ảnh thì các caption(chú thích) đó mới được hiện ra trong light box thông qua việc kết nối bằng data-sub-html.

Các đoạn mã CSS và Javascript đều giống như ví dụ trên nha. Đây là kết quả trên Codepen:

See the Pen Tạo Lightbox Với Caption Bằng Thư Viện LightgalleryJS by haycuoilennao19 (@haycuoilennao19) on CodePen.

Nguồn

Thiết Lập Hiệu Ứng Chuyển Động Transition Cho Lightbox

Để sử dụng được hiệu ứng chuyển động transition cho lightbox thì ngoài các đường dẫn CDN đã thêm ở các ví dụ trên thì chúng ta sẽ cần phải thêm một file CSS khác là:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/lg-transitions.min.css">

Sau đó bạn chỉ cần khởi tạo thư viện với mã Javascript tổng quát như sau (Các file HTML, CSS sẽ không thay đổi nhé):

$('#lightgallery').lightGallery({
    mode: 'lg-rotate'
})

Để hiểu rõ hơn bạn xem kết quả khi mình sử dụng mode: 'lg-rotate' cho lightbox ở Codepen bên dưới nhé:

See the Pen Hiệu Ứng Transition Light Box by haycuoilennao19 (@haycuoilennao19) on CodePen.

Bạn thử nhấn vào hình ảnh và di chuyển giữa các hình trong lightbox để thấy hiệu ứng transition nhé!

Nguồn

Nếu bạn muốn tìm hiểu thêm các hiệu ứng transition khác thì có thể xem Ở đây nhé!

Nếu bạn muốn tham khảo thêm về thư viện LightgalleryJS thì xem Ở đây nhé!

Nếu bạn muốn tham khảo các ví dụ khác về Lightbox được xây dựng bằng HTML, CSS, Javascript thì xem Ở đây nhé!

Tổng kết:

Qua đây mình mong bài viết sẽ cung cấp thêm cho bạn những kiến thức để tạo lightbox hữu ích dành cho việc phát triển, thiết kế web và nếu có thắc mắc gì cứ gửi email mình sẽ phản hồi sớm nhất có thể. Rất mong bạn tiếp tục ủng hộ trang web để mình có thể viết nhiều bài hay hơn nữa nhé. Chúc bạn có một ngày vui vẻ!

Load WooCommerce Stores in 249ms!