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

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
}