LightGallery là một thư viện chiếu ảnh đa năng và mạnh mẽ, lý tưởng cho các website tiếp thị liên kết và thiết kế web công ty. Với khả năng tùy biến cao, LightGallery cho phép người dùng tạo ra những trải nghiệm hình ảnh độc đáo và ấn tượng. Thư viện này hỗ trợ nhiều định dạng hình ảnh và video, giúp cho việc giới thiệu sản phẩm trở nên sinh động và thu hút hơn bao giờ hết.
Khi sử dụng LightGallery, các nhà thiết kế có thể dễ dàng tích hợp vào trang web của mình, tạo ra những bộ sưu tập hình ảnh đẹp mắt mà không mất nhiều thời gian. Giao diện thân thiện và dễ sử dụng của thư viện giúp các doanh nghiệp tối ưu hóa trải nghiệm người dùng, đồng thời nâng cao khả năng chuyển đổi khi khách hàng tham quan sản phẩm.
Bên cạnh đó, với các tính năng như tự động phát slideshow và hỗ trợ cảm ứng trên thiết bị di động, LightGallery đảm bảo rằng người dùng sẽ có những giây phút thưởng thức hình ảnh tuyệt vời, bất kể họ đang truy cập từ đâu. Hãy cùng Quicksite khám phá những lợi ích mà LightGallery mang lại cho bạn!
Các tính năng mạnh mẽ của LightGallery
lightGallery là một thư viện JavaScript mạnh mẽ cho phép tạo ra các thư viện hình ảnh và video chất lượng cao. Dưới đây là một số tính năng nổi bật của lightGallery:
Hỗ trợ đa nền tảng
- Tương thích với React, Vue.js, Angular và Vanilla JavaScript.
- Hoạt động trên các trình duyệt hiện đại bao gồm IE 10 trở lên.
Kiến trục Modular
- Có kiến trúc modular cho phép bạn dễ dàng thêm hoặc loại bỏ các module không cần thiết.
- Bao gồm nhiều module tích hợp sẵn như thumbnails, zoom, và nhiều hơn nữa.
Tính tùy biến cao
- Hơn 120 tùy chọn để tùy chỉnh mà không cần phải chỉnh sửa mã nguồn.
- Có thể cập nhật giao diện bằng cách sửa đổi các biến SASS.
Hỗ trợ nội dung đa dạng
- Cho phép kết hợp nhiều loại nội dung trong cùng một thư viện (hình ảnh, video, iframe).
- Tự động nhận diện loại nội dung và tạo slide tương ứng.
Hỗ trợ Video
- Hỗ trợ nhúng video từ YouTube, Vimeo, Wistia và các định dạng video HTML5 như MP4, WebM, Ogg.
Tính năng chia sẽ mạng xã hội
- Cho phép chia sẻ hình ảnh và video lên các nền tảng mạng xã hội như Facebook và Twitter.
Cải thiện trải nghiệm người dùng
- Hỗ trợ các cử chỉ chạm như zoom, kéo, và vuốt để điều hướng giữa các slide.
- Cung cấp tính năng tự động phát và tạm dừng video dựa trên hành động của người dùng.
Khả năng truy cập (A11y)
- Hỗ trợ điều hướng bằng bàn phím và sử dụng các đánh dấu HTML được khuyến nghị để đảm bảo tính khả dụng cho người dùng khiếm thị.
Quản lý slide linh hoạt
- Cho phép thêm, chỉnh sửa, và xóa slide ngay cả khi thư viện đang mở.
- Cung cấp các phương thức để cập nhật danh sách slide một cách dễ dàng.
Chế độ động
- Có thể khởi động thư viện một cách lập tức thông qua các tùy chọn động, cho phép xây dựng những thư viện phức tạp.
Hỗ trợ hình ảnh phản hồi
- Cho phép tải hình ảnh khác nhau cho các viewport khác nhau, hỗ trợ thuộc tính srcset của HTML5.
Tính năng ghi chú
- Hỗ trợ tích hợp hộp bình luận từ Facebook và Disqus, cho phép người dùng bình luận trên các slide.
LightGallery là một công cụ mạnh mẽ cho việc tạo ra các thư viện hình ảnh và video hấp dẫn với hiệu suất cao và trải nghiệm người dùng tuyệt vời.
LightGallery miễn phí 100% cho người dùng và thu phí cho dự án thương mại
lightGallery là một thư viện mã nguồn mở miễn phí, nhưng nếu bạn muốn sử dụng thư viện này cho các dự án thương mại, bạn cần mua giấy phép thương mại để giữ nguồn mã riêng tư. Dưới đây là thông tin chi tiết về các gói giấy phép mà lightGallery cung cấp.
Gói giấy phép Hobby với giá 48 USD cho một nhà phát triển và một sản phẩm. Gói này thích hợp cho việc sử dụng cá nhân. Bạn có thể nhận được hỗ trợ trên GitHub và các bản cập nhật miễn phí trọn đời. Tuy nhiên, gói này không cho phép bạn bán sản phẩm.
Gói giấy phép Team có giá 118 USD, dành cho nhóm nhỏ với tối đa 8 nhà phát triển và 5 sản phẩm. Gói này cho phép bạn kiếm tiền từ sản phẩm sử dụng lightGallery và nhận hỗ trợ qua email.
Gói giấy phép Organization có giá 188 USD, hướng đến các tổ chức lớn với số lượng nhà phát triển và sản phẩm không giới hạn. Gói này cũng bao gồm hỗ trợ qua Email và Skype, cùng với các bản cập nhật miễn phí trọn đời.
Nếu bạn muốn tích hợp lightGallery vào các sản phẩm thương mại như bộ công cụ phát triển phần mềm (SDK) hay các trang web tải về, bạn cần chọn Giấy phép thương mại mở rộng, có giá 239 USD. Gói này cũng cho phép sử dụng cho một sản phẩm duy nhất nhưng không giới hạn số lượng nhà phát triển.
Ngoài ra, trong trường hợp bạn đang phát triển ứng dụng mã nguồn mở, lightGallery cho phép bạn sử dụng theo các điều khoản của giấy phép GNU GPL v3.
Các giấy phép thương mại không có thời hạn sử dụng, nghĩa là bạn có thể sử dụng chúng mãi mãi sau khi mua. Tuy nhiên, bạn không được phép tái bán hoặc chia sẻ lightGallery dưới bất kỳ hình thức nào.
lightGallery còn cung cấp các ưu đãi cho sinh viên đang theo học tại các trường đại học. Nếu bạn là sinh viên, hãy liên hệ qua Twitter để nhận giấy phép miễn phí. Với sự hỗ trợ từ cộng đồng và các thương hiệu hàng đầu thế giới, lightGallery là lựa chọn tuyệt vời cho các nhà phát triển muốn xây dựng dự án web đẹp mắt và hiệu quả.
Hướng dẫn cài đặt LightGallery
LightGallery là một thư viện JavaScript nhẹ và linh hoạt, giúp bạn tạo ra những bộ sưu tập hình ảnh và video đẹp mắt cho trang web của mình. Với khả năng tương thích cao và dễ dàng tùy chỉnh, LightGallery là lựa chọn hoàn hảo cho các nhà phát triển web. Dưới đây là hướng dẫn chi tiết để cài đặt LightGallery.
Cài đặt LightGallery
Bạn có thể cài đặt LightGallery thông qua NPM, Yarn, Bower hoặc tải trực tiếp từ GitHub. Để cài đặt qua NPM, bạn chỉ cần chạy lệnh sau trong terminal:
npm install lightgalleryNếu bạn sử dụng Yarn, lệnh sẽ là:
yarn add lightgalleryVới Bower, bạn có thể sử dụng lệnh:
bower install lightgallery --saveNhúng CSS và JavaScript
Sau khi cài đặt, bạn cần bao gồm các tệp CSS và JavaScript của LightGallery vào trang web của mình. Thêm mã sau vào phần <head> của tài liệu HTML của bạn:
<link type="text/css" rel="stylesheet" href="css/lightgallery.css" />Nếu bạn cần sử dụng các plugin như thu nhỏ (thumbnail) hoặc phóng to (zoom), hãy thêm các tệp CSS tương ứng:
<link type="text/css" rel="stylesheet" href="css/lg-zoom.css" />
<link type="text/css" rel="stylesheet" href="css/lg-thumbnail.css" />Tiếp theo, thêm các tệp JavaScript vào phần <body>:
<script src="js/lightgallery.umd.js"></script>
<script src="js/plugins/lg-thumbnail.umd.js"></script>
<script src="js/plugins/lg-zoom.umd.js"></script>Tạo đánh dấu HTML
Để sử dụng LightGallery, bạn cần tạo một phần tử HTML chứa các liên kết đến hình ảnh hoặc video. Dưới đây là một ví dụ đơn giản:
<div id="lightgallery">
<a href="img/img1.jpg" data-lg-size="1600-2400">
<img alt="img1" src="img/thumb1.jpg" />
</a>
<a href="img/img2.jpg" data-lg-size="1024-800">
<img alt="img2" src="img/thumb2.jpg" />
</a>
</div>Khởi tạo Gallery
Cuối cùng, để khởi tạo LightGallery, bạn cần thêm đoạn mã JavaScript sau vào trang của mình:
<script type="text/javascript">
lightGallery(document.getElementById('lightgallery'), {
plugins: [lgZoom, lgThumbnail],
speed: 500,
licenseKey: 'your_license_key'
});
</script>Với các bước trên, bạn đã hoàn tất việc cài đặt LightGallery. Thư viện này không chỉ giúp nâng cao trải nghiệm người dùng mà còn làm cho trang web của bạn trở nên thu hút hơn với những hình ảnh và video chất lượng cao. Hãy bắt đầu tạo bộ sưu tập của bạn ngay hôm nay!
Xem thêm tài liệu hướng dẫn tại: Docs – lightGallery (lightgalleryjs.com)
