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.
Nội dung chính
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
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.