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

0

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.

Hiệu ứng lightbox dùng thư viện fancybox
Khi click vào, hình sẽ ph1ong to
Khi click vào, hình sẽ ph1ong to

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ệ

Để lại một trả lời

Địa chỉ email của bạn sẽ không được công bố.