Share Hiển thị popup hình ảnh đẹp mắt với thư viện fancyBox

filiallion

Administrator
Staff member
Administrator
Messages
585
Points
10
Language
Tiếng Việt
Một số website khi các bạn nhấp chuột vào hình ảnh thì hình ảnh sẽ phóng to lên như đang trình chiếu cho các bạn xem. Đây là một chức năng khá hay mà nhiều website đang sử dụng và để tích hợp chức năng này vào website thì hoàn toàn không có khó khăn gì với những thư viện đang được cung cấp miễn phí hiện nay. Một trong số đó tôi sẽ giới thiệu với các bạn thư viện fancyBox, ngoài chức năng hiển thị hình ảnh dưới dạng trình chiếu thì thư viện fancyBox còn nhiều tính năng khác như tạo một hộp thoại chẳng hạn. Điểm đáng chú ý nữa của thư viện fancyBox là hỗ trợ rất tốt trên các thiết bị màn hình cảm ứng cũng như các thiết bị di động.

Để sử dụng thư viện fancyBox, các bạn tải thư viện tại địa chỉ https://fancyapps.com.

Vì thư viện fancyBox yêu cầu thư viện jQuery nên các bạn cũng tải thư viện jQuery tại địa chỉ http://jquery.com/download.

Các bạn tạo cấu trúc thư mục như sau:
Code:
css
-----jquery.fancybox.min.css
images
js
-----jquery-3.3.1.min.js
-----jquery.fancybox.min.js
index.html
Với cấu trúc như trên thì thư mục images chứa các hình ảnh để trình bày ví dụ.

Mở tập tin index.html và nhập vào nội dung mã lệnh như sau:
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="css/jquery.fancybox.min.css" rel="stylesheet">
<script src="js/jquery-3.3.1.min.js"></script>
<script src="js/jquery.fancybox.min.js"></script>
<title>fancyBox</title>
</head>
<body>
<a href="images/01-full.jpg" data-fancybox="gallery">
    <img src="images/01-thumbnail.jpg">
</a>
<a href="images/02-full.jpg" data-fancybox="gallery">
    <img src="images/02-thumbnail.jpg">
</a>
<a href="images/03-full.jpg" data-fancybox="gallery">
    <img src="images/03-thumbnail.jpg">
</a>
</body>
</html>
Các bạn chú ý 3 thẻ <a> có thuộc tính "data-fancybox", đây là thuộc tính để kích hoạt thư viện fancyBox nên các bạn cần lưu ý.

Bây giờ các bạn chạy tập tin index.html để xem kết quả.

Các bạn có thể tìm hiểu thêm về thư viện fancyBox tại địa chỉ https://fancyapps.com/fancybox/3/docs.
 

Attachments

  • fancyBox.zip
    1.3 MB · Views: 3
Back
Top