Cách tạo hiệu ứng phóng to ảnh bằng Fancybox

Chia sẻ mã nguồn và kinh nghiệm lập trình PHP, JavaScript, jQuery,...
Nội quy chuyên mục
Thành viên đăng quảng cáo trong chuyên mục này sẽ bị xóa toàn bộ bài viết và cấm vĩnh viễn tham gia Diễn đàn.

* Xem qui định đăng bài viết tại đây: Nội quy đăng bài viết
Đăng trả lời
FreeCode
Thành viên mới
Thành viên mới
Bài viết: 7
Ngày tham gia: 10/11/2019 - 15:28

Cách tạo hiệu ứng phóng to ảnh bằng Fancybox

Gửi bài gửi bởi FreeCode » 23/11/2019 - 19:50

Fancybox, là một JavaScript giúp tạo hiệu ứng phóng to ảnh thường được sử dụng trên cac trang web.
fancybox,.jpg
fancybox,.jpg (27.9 KiB) Đã xem 34 lần
Fancybox tương thích với hầu hết các trình duyệt web thông dụng trên máy vi tính cũng như thiết bi di động.

Tải Fancybox
Fancybox được tải về và sử dụng miễn phí tại trang web: https://fancyapps.com/fancybox/3/
Sử dụng Fancybox

Fancybox yêu cầu phải có thư viện jQuery để hoạt động.
Xem JQuery - Thư viện JavaScript hỗ trợ lập trình các chức năng cho trang web tại đây: viewtopic.php?f=30&t=466480
Bạn cần nhúng thư viện jQuery và Fancybox vào bên trong thẻ <head></head> trang web bằng cách khai báo như sau:

Mã: Chọn tất cả

<head>
...
<script src="path/jquery-x.x.x.min.js"></script>

<link rel="stylesheet" type="text/css" href="path/jquery.fancybox.min.css">

<script src="path/jquery.fancybox.min.js"></script>
...
</head>
Trong đó:
path là đường dẫn tới tập tin JavaScript.

Hoặc bạn cũng có thể sử dụng thư viện jQuery và Fancybox trực tiếp mà không cần phải tải về:

Mã: Chọn tất cả

<head>
<script src="https://cdn.jsdelivr.net/npm/jquery@3.4.1/dist/jquery.min.js"></script>

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.css" />

<script src="https://cdn.jsdelivr.net/gh/fancyapps/fancybox@3.5.7/dist/jquery.fancybox.min.js"></script>
</head>
Sau đó trong phần <body> của trang web, bạn tạo các hình ảnh với cấu trúc như sau:

Tạo fancybox cho riêng từng ảnh:

Mã: Chọn tất cả

<a href="image.jpg" [b]data-fancybox[/b] data-caption="Caption for single image">
	<img src="thumbnail.jpg" alt="" />
</a>
Tạo fancybox cho nhiều ảnh:

Mã: Chọn tất cả

<a href="image_1.jpg" [b]data-fancybox="gallery"[/b] data-caption="Caption #1">
	<img src="thumbnail_1.jpg" alt="" />
</a>

<a href="image_2.jpg" [b]data-fancybox="gallery"[/b] data-caption="Caption #2">
	<img src="thumbnail_2.jpg" alt="" />
</a>

Đăng trả lời
  • Các chủ đề liên quan
    Trả lời
    Xem
    Bài viết mới nhất

Quay về