Fancy Box là một thư viện Javascript Lightbox được viết trên framework JQuery nổi tiếng, với thư viện này bạn có thể dể dàng tạo các Lightbox popup dễ dàng, Một số ưu điểm của Fancy Box so với các thư viện Popup khác:

Tính năng đặc điểm:

Tối ưu hiển thị trên nền tàng di động mobile responsive: Với Fancy Box popup hỗ trợ web responsive 100%, hỗ trợ người sử dụng với các thao tác: vuốt để di chuyển slide hình ảnh trong gallery, chụm để phóng to, thu nhỏ.

Hiển thị nội dung thông minh tự động: Bạn không cần phải viết code sử lý nhiều nếu cần hiển thị các nền tảng YouTube, Vimeo và Google maps trong popup lightbox.

Giảm nhẹ xử lý GPU hình ảnh: Fancybox rất nhẹ và được thiết kế giảm thiểu khả năng xử dụng GPU trên máy tính và thiết bị di động, giúp tăng thời lượng pin trải nghiệm.

Thư viện xử dụng linh hoạt: có rất nhiều cách để xử dụng thư viện này với javascript thuần hoặc Jquery

Hộ trợ các framework css khác: không gây xung đột với các thư viện Css khác, xử dụng tuyệt vời trên Bootstrap.

Cài đặt nhanh và dễ dàng: Triển khai một popup với FancyBox rất dễ dàng với trên dưới 10 dòng code.

Hỗ trợ nhiều kiểu hiển thị tùy chỉnh phổ biến như: gallery, slideshow, popup modal, video box, nội dung html, tích hợp luôn cả AJAX.

Dễ dàng tùy chỉnh sáng tạo: kết hợp với các thư viện Jquery khác một cách sáng tạo bạn sẽ tạo được những popup tuyệt đẹp

Một số hướng xử lý khi triển khai Fancy Box:

Cài đặt thư viện Fancybox cho project

Hiện tại Fancy box đang được phát triển ở version v3. Bạn có thể dễ dàng tãi và đọc các hướng dẫn sử dụng trên trang web này: http://fancyapps.com/fancybox/3/ .

Tại trang chủ Fancy Box có cung câp 1 phương thức triển khai nhanh qua các CDN, bạn chỉ cần copy và paste vàoproject mình.

<!-- 1. Add latest jQuery and fancyBox files -->

<script src="//code.jquery.com/jquery-3.3.1.min.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.0/jquery.fancybox.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.0/jquery.fancybox.min.js"></script>


<!-- 2. Create links -->

<a data-fancybox="gallery" href="big_1.jpg"><img src="small_1.jpg"></a>
<a data-fancybox="gallery" href="big_2.jpg"><img src="small_2.jpg"></a>


<!-- 3. Have fun! -->

Tạo popup hình ảnh đơn giản không có khoảng trắng chung quanh.

Demo code được viết dựa trên thư viện Bootstrap v3. Nội dung hình ảnh cần hiển thị trong popup được đặt trong 1 div

<div id="popup-all">
  <div class="container-fluid">
    <div class="row">
      <a href="link popup" title="Nice Popup" target="__blank">
        <img src="link hình ảnh" alt="Dùng fancybox tạo popup" />
      </a>
      
    </div>
  </div>
</div>

Mã code JQuery với tác dụng load page sau 5s thì hiện popup

$(document).ready(function(){
  setTimeout(function(){ 
    $("#popup-all").fancybox({
      padding: 0,
          helpers: {
              title : {
                  type : 'float'
              }
          }
      }).trigger('click');
  }, 5000);
});

Mã Css loại bỏ viền trắng xung quanh hộp LightBox

<style>
.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 0 0;
       -moz-box-shadow: 0 0 0;
            box-shadow: 0 0 0;
}
</style>

About the author

Kevin Dang

Hey there! My name is Kevin Dang, I am website, software, mobile app develop, web admin system. Expert living in Hồ Chí Minh (Việt Nam). I am very interested in digital marketing with: SEO, Facebook, Google Ads ... This blog is where I will share the experiences, techniques and knowledge I have learned.