- Messages
- 585
- Points
- 10
- Language
- Tiếng Việt
Hiện nay trên Internet có rất nhiều thư viện JavaScript để tạo gallery ảnh như fancyBox, Lightbox, Viewer.js. Bài viết này, tôi sẽ giới thiệu với các bạn một thư viện JavaScript khác dùng để tạo gallery hình ảnh là lightgallery.js. Thư viện lightgallery.js cũng như các thư viện tạo gallery khác, hỗ trợ hiển thị hình ảnh toàn màn hình, hiệu ứng hoạt hình, cuộn hình ảnh đẹp mắt.
Việc sử dụng thư viện lightgallery.js cũng rất đơn giản, các bạn tải thư viện về tại địa chỉ https://github.com/sachinchoolur/lightgallery.js và tích hợp vào website với nội dung mã lệnh như sau:
Các bạn tạo gallery hình ảnh với nội dung mã lệnh HTML như sau:
Bây giờ, các bạn cài đặt thư viện lightgallery.js với dòng mã lệnh JavaScript sau:
Các bạn có thể xem demo của thư viện lightgallery.js tại địa chỉ https://sachinchoolur.github.io/lightgallery.js/demos cũng như tìm hiểu thêm về cách sử dụng tại địa chỉ https://sachinchoolur.github.io/lightgallery.js/docs.
Việc sử dụng thư viện lightgallery.js cũng rất đơn giản, các bạn tải thư viện về tại địa chỉ https://github.com/sachinchoolur/lightgallery.js và tích hợp vào website với nội dung mã lệnh như sau:
HTML:
<link href="path/to/lightgallery.min.css" rel="stylesheet">
<script src="path/to/lightgallery.min.js"></script>
HTML:
<div id="lightgallery">
<a href="path/to/image-1.jpg">
<img src="path/to/thumbnail-1.jpg">
</a>
<a href="path/to/image-2.jpg">
<img src="path/to/thumbnail-2.jpg">
</a>
<a href="path/to/image-3.jpg">
<img src="path/to/thumbnail-3.jpg">
</a>
</div>
JavaScript:
lightGallery(document.getElementById('lightgallery'));