Cách Tạo Lightbox Thư Viện Hình ảnh Cho Wordpress

Trang chủ » Thư Viện Lightbox » Cách Tạo Lightbox Thư Viện Hình ảnh Cho Wordpress

Có thể bạn quan tâm

NỘI DUNG (HIGHLIGHTS)

  • Cách tạo Lightbox thư viện hình ảnh cho WordPress
    • 1. Html Lightbox thư viện hình ảnh
    • 2. Css Lightbox thư viện hình ảnh

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

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.

Bài Viết Cùng Chuyên Mục Game & Apk Mod Acapella Việt Template BLogspot Liên Kết URL

Theo dõi trên

Logo Google new Rate this post

Từ khóa: Cách tạo Lightbox thư viện hình ảnh, Cách tạo Lightbox thư viện hình ảnh cho Wordpress, create a Lightbox image gallery for Wordpress, How to create a Lightbox image gallery for Wordpress, tạo Lightbox thư viện hình ảnh, tạo Lightbox thư viện hình ảnh cho Wordpress

Từ khóa » Thư Viện Lightbox