- ★
Hình ảnh và video là những nội dung quan trọng giúp website trở nên sinh động, thu hút người truy cập. Tuy nhiên, việc hiển thị nội dung đa phương tiện đôi khi cần một giao diện trực quan hơn để người dùng dễ dàng quan sát mà không phải chuyển sang trang khác. Fancybox là thư viện JavaScript hỗ trợ giải quyết nhu cầu này thông qua hiệu ứng Lightbox. Vậy cách sử dụng Fancybox để hiển thị hình ảnh và video trên website như thế nào? Hãy cùng tìm hiểu qua hướng dẫn dưới đây.
1. Fancybox hỗ trợ hiển thị những nội dung nào?
Fancybox là thư viện giúp mở nội dung trong cửa sổ nổi (overlay) ngay trên trang web. Công cụ này hỗ trợ nhiều loại nội dung, phổ biến gồm:
Hình ảnh: Hiển thị ảnh ở kích thước lớn, hỗ trợ phóng to và thu nhỏ.
Thư viện ảnh: Nhóm nhiều hình ảnh thành một bộ sưu tập, cho phép chuyển đổi qua lại.
Video: Hiển thị video từ các nền tảng hỗ trợ hoặc tệp video tương thích.
Iframe: Nhúng nội dung từ website khác như bản đồ, trang giới thiệu hoặc video.
HTML: Hiển thị nội dung HTML tùy chỉnh trong cửa sổ Lightbox.
2. Cách sử dụng Fancybox để hiển thị hình ảnh
Để hiển thị hình ảnh bằng Fancybox, bạn cần tích hợp thư viện vào website và tạo liên kết đến hình ảnh gốc.
Bước 1: Nhúng thư viện Fancybox
Với Fancybox 3, trước tiên cần tải jQuery, sau đó thêm CSS và JavaScript của Fancybox:
Bước 2: Tạo liên kết hình ảnh
Sử dụng thuộc tính data-fancybox để kích hoạt chức năng Lightbox:
Bước 3: Tạo thư viện nhiều hình ảnh
Để nhóm nhiều ảnh vào cùng một bộ sưu tập, hãy sử dụng chung giá trị data-fancybox= "gallery" :
Khi nhấp vào ảnh, người dùng có thể xem ảnh lớn và chuyển đổi giữa các hình trong cùng thư viện.
3. Cách sử dụng Fancybox để hiển thị video
Ngoài hình ảnh, Fancybox còn hỗ trợ mở video trong cửa sổ Lightbox. Bạn có thể sử dụng liên kết đến video tương thích hoặc nhúng nội dung thông qua iframe.
Ví dụ hiển thị video YouTube bằng Fancybox 3:
Xem video giới thiệu
Trong đó, VIDEO_ID cần được thay bằng mã video YouTube thực tế.
Đối với video HTML5, bạn có thể sử dụng nội dung nhúng phù hợp với cấu hình Fancybox:
Cách triển khai cụ thể có thể khác nhau tùy phiên bản Fancybox. Với các phiên bản mới, bạn cần sử dụng cú pháp và cấu hình tương ứng thay vì sao chép nguyên mã của Fancybox 3.
Liên hệ Công Ty Phần Mềm Tri Thức để biết thêm thông tin.
