Tạo Lightbox Chuyên Nghiệp Với Thư Viện BaguetteBox.js | Gextend

• Home
• Forums New posts Search forums
• Resources Latest reviews Search resources
• Members Current visitors New profile posts Search profile posts
• What's new Featured content New posts New resources New profile posts Latest activity

Log in Register What's new Search

Search

Everywhere Threads This forum This thread Search titles only Note By: Search Advanced search…

• New posts
• Search forums

Menu Log in Register Install the app Install How to install the app on iOS

Follow along with the video below to see how to install our site as a web app on your home screen.

Note: This feature may not be available in some browsers.

• Home
• Forums
• Discussion
• Web
• JavaScript

You are using an out of date browser. It may not display this or other websites correctly.You should upgrade or use an alternative browser. ShareTạo lightbox chuyên nghiệp với thư viện baguetteBox.js

• Thread starter Thread starter filiallion
• Start date Start date 07/01/2020
• Tags Tags baguette baguettebox javascript lightbox

filiallion

Administrator

Staff member Administrator Messages 585 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. You must log in or register to reply here. Share: Facebook X (Twitter) LinkedIn Reddit Pinterest Tumblr WhatsApp Email Share Link

• Home
• Forums
• Discussion
• Web
• JavaScript

Back Top