Share Tạo gallery hình ảnh với thư viện lightgallery.js

filiallion · 06/14/2019

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:

HTML:

<link href="path/to/lightgallery.min.css" rel="stylesheet">
<script src="path/to/lightgallery.min.js"></script>

Các bạn tạo gallery hình ảnh với nội dung mã lệnh HTML như sau:

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>

Bây giờ, các bạn cài đặt thư viện lightgallery.js với dòng mã lệnh JavaScript sau:

JavaScript:

lightGallery(document.getElementById('lightgallery'));

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.

Share Tạo gallery hình ảnh với thư viện lightgallery.js

filiallion

Administrator