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

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

+ 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

"Ra đời, cuộc sống bươm chải, có làm vẫn không có ăn" nên phải gắn QUẢNG CÁO

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 mua hosting từ link trên, mình sẽ có một ít tiền để duy trì. Cảm ơn

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ệ