Sử dụng baguetteBox.js để tạo hiệu ứng lightbox đẹp

GIỚI THIỆU

BaguetteBox là một thư viện lightbox có giao diện rất đẹp, hiện đại và thân thiện với người dùng, được viết hoàn toàn bằng javascript và không yêu cầu thêm một thư viện nào khi sử dụng. BaquetteBox cung cấp rất nhiều tính năng cap cấp như hỗ trợ nhiều gallery trên cùng một trang, gán tiêu để ảnh, reponsive, tương thích tốt với các thiết bị di động với thao tác vuốt trên các màn hình cảm ứng

baquettebox lightbox

TÍNH NĂNG

Chạy hoàn toàn độc lập, không phụ thuộc vào thư viện nào khác
Hỗ trợ nhiều gallery trên cùng trang, với tính năng tuỳ biến cho từng gallery
Hỗ trợ thao tác vuốt trên các thiết bị cảm ứng
Giao diện thân thiện, hiện đại
Hỗ trợ hiển thị tiêu đề hình ảnh
Hỗ trợ responsive
Hỗ trợ các hiệu ứng chuyển động CSS3
Sử dụng các nút SVG, khồng cần phải download thêm file hình ảnh nào
Kích cỡ siêu nhỏ, chỉ 2KB gzipped

CÀI ĐẶT (SỬ DỤNG BOWER)

bower install baguettebox.js

HƯỚNG DẪN SỬ DỤNG

1. Thêm vào JavaScript & CSS

<link rel='stylesheet' href='https://cdn.rawgit.com/feimosi/baguetteBox.js/v.1.1.1/dist/baguetteBox.min.css'>
<script src='https://cdn.rawgit.com/feimosi/baguetteBox.js/v.1.1.1/dist/baguetteBox.min.js'></script>

2. HTML

Mình sử dụng một số hình ảnh từ trang chủ của tác giả

<div class="gallery">
    <a href="https://feimosi.github.io/baguetteBox.js/img/1-1.jpg" data-caption="Golden Gate Bridge"><img src="https://feimosi.github.io/baguetteBox.js/img/thumbs/1-1.jpg"></a>
    <a href="https://feimosi.github.io/baguetteBox.js/img/1-2.jpg" title="Midnight City"><img src="https://feimosi.github.io/baguetteBox.js/img/thumbs/1-2.jpg"></a>
    <a href="https://feimosi.github.io/baguetteBox.js/img/1-3.jpg"><img src="https://feimosi.github.io/baguetteBox.js/img/thumbs/1-3.jpg"></a>
</div>

Thêm một chút gia vị CSS để hiển thị đẹp hơn

.gallery img {
    height: 100%;
}

.gallery a {
    width: 240px;
    height: 180px;
    display: inline-block;
    overflow: hidden;
    margin: 4px 6px;
    box-shadow: 0 0 4px -1px #000;
}

DEMO

See the Pen baguetteBox.js demo by Thanh Nguyen (@genievn) on CodePen.

TUỲ BIẾN

1. Hiển thị ảnh responsive theo kích cỡ trình duyệt

Muốn hình ảnh của bạn hiển thị khác nhau cho các độ phân giải khác nhau, rất đơn giản, bạn chỉ cần sử dụng thuộc tính data-at-{width} gán đường dẫn hình ảnh tương ứng. {width} là chiều rộng lớn nhất của màn hình mà hình ảnh có thể được hiển thị. BaquetteBox sẽ chọn hình ảnh với {width} lớn hơn hoặc bằng với chiều rộng màn hình hiện tại để mang lại trải nghiệm tốt nhất cho người dùng.

Ví dụ:

<a href="img/2-1.jpg" 
  data-at-450="img/thumbs/2-1.jpg" 
  data-at-800="img/small/2-1.jpg" 
  data-at-1366="img/medium/2-1.jpg" 
  data-at-1920="img/big/2-1.jpg">
    <img src="img/thumbs/2-1.jpg">
</a>

2. Cấu hình

Bạn có thể khởi tạo lightbox với một số các tham số như sau:

{
  captions: true,       // true|false - Hiển thị tiêu đề ảnh 
  buttons: 'auto',      // 'auto'|true|false - Hiển thị nút điều hướng
  async: false,         // true|false - Tải file không đồng bộ
  preload: 2,           // [number] - Tải trước (preload) bao nhiêu ảnh kể từ ảnh hiện tại
  animation: 'slideIn'  // 'slideIn'|'fadeIn'|false - Loại chuyển động
}

Recent Post