Cách tạo Lightbox thư viện hình ảnh cho WordPress

Cách tạo Lightbox thư viện hình ảnh cho WordPress: Bạn muốn hiển thị hình ảnh trên Blog WordPress của bạn theo định dạng Lightbox, thì bạn đã tìm đúng bài viết rồi đấy. Trong bài viết này Blog thủ thuật máy tính f4vnn sẽ giúp bạn cách tạo Lightbox thư viện hình ảnh cho WordPress.

Cách tạo Lightbox thư viện hình ảnh cho WordPress

Nếu bạn muốn tạo thư viện hình ảnh dạng Lightbox cho Blog của mình thì bạn hãy đọc các thông tin bên dưới nhé.

1. Html Lightbox thư viện hình ảnh

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="style.css" />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/css/lightbox.min.css"
    />
  </head>
  <body>
    <div class="gallery-container">
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true" alt=""
      /></a>
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true" alt=""
      /></a>
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true" alt=""
      /></a>
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true" alt=""
      /></a>
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/1.jpg?raw=true" alt=""
      /></a>
      <a
        data-lightbox="supercars"
        data-title="The is the first image"
        href="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true"
        ><img src="https://github.com/livebloggerofficial/Lightbox/blob/master/images/2.jpg?raw=true" alt=""
      /></a>
    </div>

    <script src="https://cdnjs.cloudflare.com/ajax/libs/lightbox2/2.11.1/js/lightbox-plus-jquery.min.js"></script>
  </body>
</html>

Các bạn chú ý thay link ảnh của bạn vào đây nhé.

2. Css Lightbox thư viện hình ảnh

Sau khi đã thêm html thì việc tiếp theo là thêm Css làm đẹp cho nó. Các bạn copy và dán đoạn code Css bên dưới và thêm vào Css của theme bạn đang dùng nhé.

.gallery-container {
  max-width: 900px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 4px;
  margin: 32px auto;
}

.gallery-container img {
  width: 100%;
  height: 200px;
  object-fit: cover;
}

Chỉ có thế thôi, bây giờ bạn truy cập vào link bài viết, trang bạn đã thêm và tận hưởng thôi.

Hy vọng với cách tạo Lightbox thư viện hình ảnh cho WordPress mà Blog thủ thuật máy tính f4vnn đã chia sẻ sẽ có ích với bạn. Chúc bạn thành công.