Bài 13: Hiệu ứng lightbox – thư viện FancyBox – phóng to hình ảnh

Trong bài này, mình sẽ hướng dẫn các bạn hiệu ứng lightbox – zoom phóng to hình ảnh bằng cách sử dụng thư viện ngoài là Fancybox – một thư viện của jQuery.

Video – Hiệu ứng lightbox – thư viện FancyBox

Ý tưởng

+ Khi click vào, hình ảnh sẽ phóng to để xem chi tiết và có thể chuển đổi qua lại các hình giống slide.

+ Dùng thư viện fancybox để giảm việc code.

Hướng dẫn chi tiết

Tải Fancybox JS

Các bạn có thể tải fancybox theo link này: Download

Có làm thì mới có ăn như ai đó từng nói - Vài dòng ngắn cho QUẢNG CÁO nhé

Các bạn cần hosting WordPress nhanh, rẻ và dễ sử dụng có free SLL hãy chọn Azdigi nhé.
Link đăng ký: NHẬN NGAY ƯU ĐÃI
Nếu các bạn đăng ký và sử dụng hosting từ link trên, Góc Làm Web sẽ có một ít tiền để duy trì. 

Hoặc có thể dùng fancybox trong code mẫu mình đã đóng gói sẵn.

Hoặc dùng link CDN trực tuyến:

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

<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.3.5/jquery.fancybox.min.js"></script>

Phần HTML

Chúng ta chỉ cần 1 div bao ngoài và các hình bên trong. Lưu ý, các hình cần nằm trong thẻ a

<div class="content">
<a data-fancybox="gallery" href="img/1.png" data-caption="Caption for single image"><img src="img/1.png" alt=""></a>
<a data-fancybox="gallery" href="img/2.png"><img src="img/2.png" alt=""></a>
<a data-fancybox="gallery" href="img/3.png"><img src="img/3.png" alt=""></a>
</div>

Lưu ý:

+ Các thẻ a phải có href trung với link hình

+ Các thẻ a muốn xếp thành slide cùng chủ đề phải có thuộc tính data-fancybox giống nhau.

+ Thuộc tính data-caption để làm tiêu đề cho hình lúc phóng to.

Phần CSS

chúng ta sẽ định dạng 1 chút cho html

*{
   margin: 0px;
   padding: 0px;
}
.content{
   width: 1200px;
   margin: auto;
   margin-top: 50px;
   display: flex;
   justify-content: space-around;
}
.content a{
   display: block;
   width: 30%;
   padding: 5px;
}
.content a img{
   width: 100%
}

Phần JS – jQuery

Rất đơn giản, chúng tôi chỉ việc gọi thẻ a và gọi hàm fancybox() (tất nhiên là phải đặt trong ready function). Ngoài ra, các bạn có thể cấu hình thêm 1 số thuộc tính khác cho hiệu ứng

$(document).ready(function() {
   $('.content a').fancybox();
});

Code mẫu: Download

Nếu có thắc mắc, hãy đặt câu hỏi bằng cách comment bên dưới, qua email, hoặc nhắn tin qua Fanpage Góc làm web.

Liên hệ