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

Đăng bởi Admin Cập nhật lần cuối Th6 22, 2020

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.

Hiệu ứng lightbox dùng thư viện fancybox

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.

Liên hệ

jQuery