Plugin thư viện hình ảnh có thể tùy chỉnh và đáp ứng
Lightgallery.js là một công cụ tùy chỉnh và thay đổi hình ảnh mã nguồn mở hữu ích.
Lightgallery.js là một plugin hữu ích và có khả năng tùy biến cao, hoàn hảo cho các dự án yêu cầu nhiều tính năng khi tải và hiển thị video và hình ảnh trên các trang web. Được phát triển hoàn toàn bằng JavaScript và CSS, đây là một thư viện hộp đèn đầy đủ tính năng cung cấp cho các nhà phát triển nhiều tùy chọn.
Là một plugin mã nguồn mở, sử dụng miễn phí Lightgallery.js rất hữu ích khi bạn cần các tùy chọn bổ sung đó ngoài việc thay đổi kích thước và tải nội dung hình ảnh và video lên trang web của bạn dưới dạng thư viện. Nó cũng lưu trữ lịch sử trình duyệt của hình ảnh và video trong một trang trình bày và cung cấp một URL duy nhất cho mỗi hình ảnh thư viện. Nó không chỉ nhanh mà còn là một trình tạo thư viện hộp đèn nhẹ, mô-đun, đáp ứng và không cản trở hiệu suất bộ nhớ.
Bắt đầu với LightGallery
Cách được đề xuất để cài đặt LightGallery qua NPM. Vui lòng sử dụng lệnh sau để cài đặt nó.
Cài đặt LightGallery qua NPM
npm install lightgallery.js
API JavaScript miễn phí cho thao tác hình ảnh
Lightgallery.js đi kèm với nhiều mô-đun tích hợp như tạo hình thu nhỏ, toàn màn hình, phóng to và thu nhỏ, v.v. có thể bị loại bỏ nếu bạn không cần chúng. Bạn cũng có thể thêm các mô-đun của riêng mình tùy thuộc vào yêu cầu của dự án của bạn. Trái ngược với phương pháp thay đổi kích thước hình ảnh và video của JavaScript, Lightgallery.js sử dụng phương pháp chỉ CSS để thay đổi kích thước đáp ứng, làm cho nó nhanh hơn và linh hoạt hơn đáng kể. Chỉ cần cập nhật các biến SASS của thư viện, bạn có thể dễ dàng tùy chỉnh plugin để phù hợp với nhu cầu của mình.
Tạo hình thu nhỏ qua API JavaScript miễn phí
Khi nói đến hình thu nhỏ, Lightgallery.js cho phép bạn bật hình thu nhỏ động giống như YouTube để mang lại cảm giác hiện đại hơn. Hình thu nhỏ động cũng có thể được kích hoạt cho thư viện YouTube hoặc Vimeo của bạn. Lightgallery.js đi kèm với hơn 20 hình ảnh động được tích hợp trong plugin có thể được sử dụng để tạo các phòng trưng bày đẹp mắt.
Tạo ra phòng tranh tĩnh Thumbnails thông qua JavaScript
lightGallery(document.getElementById('static-thumbnails'), {
animateThumb: false,
zoomFromOrigin: false,
allowMediaOverlap: true,
toggleThumb: true,
});
Tùy chỉnh phòng tranh Thumbnails sáng tạo qua JavaScript
lightGallery(document.getElementById('customize-thumbnails-gallery'), {
// Add a custom class to apply style only for the particular gallery
addClass: 'lg-custom-thumbnails',
// Remove the starting animations.
// This can be done by overriding CSS as well
appendThumbnailsTo: '.lg-outer',
animateThumb: false,
allowMediaOverlap: true,
});