Share Tạo lightbox chuyên nghiệp với thư viện baguetteBox.js

filiallion

Administrator
Staff member
Administrator
Messages
489
Points
10
Language
Tiếng Việt
Trên website, các lightbox thường được thiết kế để tăng tính thẩm mỹ cũng như gửi thông điệp khuyến mãi, thông báo tới người dùng. Hiện nay có rất nhiều thư viện JavaScript hỗ trợ việc thiết kế lightbox, mỗi thư viện có một ưu điểm riêng cũng như có giao diện thiết kế mặc định khác nhau. Bài viết này tôi giới thiệu với các bạn thư viện lightbox cũng được nhiều lập trình viên ưa thích lựa chọn đó là baguetteBox.js.

Thư viện baguetteBox.js được viết bằng JavaScript và các bạn có thể sử dụng mà không cần tới các thư viện bổ sung như jQuery. Ngoài ra, baguetteBox.js còn có thể được sử dụng trong Nodejs hay React. Với các tuỳ chọn trong cấu hình để tuỳ chỉnh hiệu ứng, thời gian cũng như tuỳ chỉnh giao diện thông qua CSS, các bạn sẽ dễ dàng hơn trong việc sử dụng baguetteBox.js cho nhiều thể loại website khác nhau.

Để sử dụng thư viện baguetteBox.js, các bạn tải tại địa chỉ https://github.com/feimosi/baguetteBox.js hoặc sử dụng công cụ NPM với dòng lệnh:
Code:
npm install baguettebox.js --save
Các bạn nhúng thư viện baguetteBox.js vào website như sau:
HTML:
<link href="path/to/baguetteBox.min.css" rel="stylesheet">
<script src="path/to/baguetteBox.min.js"></script>
Tạo giao diện lightbox như sau:
HTML:
<div class="baguette-box">
    <a href="path/to/image-1.jpg" data-caption="Caption 1">
        <img src="path/to/thumbnail-1.jpg">
    </a>
    <a href="path/to/image-2.jpg" data-caption="Caption 2">
        <img src="path/to/thumbnail-2.jpg">
    </a>
    <a href="path/to/image-3.jpg" data-caption="Caption 3">
        <img src="path/to/thumbnail-3.jpg">
    </a>
</div>
Bước cuối cùng để có một lightbox là các bạn khai báo mã lệnh JavaScript như sau:
JavaScript:
window.addEventListener('load', function() {
    baguetteBox.run('.baguette-box');
});
Các bạn có thể tìm hiểu thêm về thư viện baguetteBox.js tại địa chỉ https://github.com/feimosi/baguetteBox.js.
 
Top