15 thư viện hộp đèn cho phản ứng di động
Lightbox là một cách phổ biến để lớp phủ hình ảnh trên web. Khi bạn nhấp vào hình ảnh, Lightbox bật lên với một số hình thức hoạt hình và làm mờ nền để bạn tập trung vào hình ảnh. Hình ảnh cũng lớn hơn về tỷ lệ. Các thư viện JavaScript Lightbox phổ biến nhất mà chúng tôi đã biết trong nhiều năm cho phép bạn làm tốt điều này trên máy tính để bàn, nhưng không quá nhiều trên nền tảng di động.
Bỏ qua điều này và nhu cầu đáp ứng, không phải là một ý tưởng tốt hiện nay, đó là lý do tại sao bộ sưu tập 15 thư viện Lightbox đáp ứng này phải được kiểm tra.
Thêm thông tin về Hongkiat:
- Tạo cửa sổ Modal dễ dàng với hộp thoại HTML5
- Top 10 phòng trưng bày / trình chiếu hình ảnh đáp ứng miễn phí
- Tạo, kiểm soát và tùy chỉnh cửa sổ phương thức tốt hơn cho trang web của bạn bằng Vex
- Phòng trưng bày & thanh trượt hình ảnh jQuery - Tốt nhất
Ảnh
Ảnh cho đến nay là plugin ligthbox yêu thích của tôi. Đó là ánh sáng, kích hoạt cảm ứng và quan trọng nhất là mô-đun cho phép tôi bỏ một vài phần không cần thiết. Nó chạy độc đáo trong trình duyệt di động. Bạn có thể vuốt qua hình ảnh bằng ngón tay như trong ứng dụng gốc và quá trình chuyển đổi diễn ra rất suôn sẻ.
- Phụ thuộc: Không ai
- Hỗ trợ trình duyệt: IE8 +, Chrome, Firefox, Safari, Opera và một vài trình duyệt di động.
- Giấy phép: Giấy phép MIT
MagnificPopup
MagnificPopup là một plugin hộp đèn khác, được phát triển bởi cùng một người đã cho chúng tôi PhotoSwipe, Dmitry Semenov. Nó xuất hiện dưới dạng một plugin jQuery / Zepto và cũng mang đến các khả năng còn thiếu trong PhotoSwipe như hỗ trợ cho Video, Bản đồ và nội dung Ajax. Đây là một thay thế tuyệt vời cho những người thích có nhiều tính năng hơn trong tay.
- Phụ thuộc: jQuery 1.9.1+ hoặc Zepto.js
- Hỗ trợ trình duyệt: IE7 (một phần), IE8 +, Chrome, Firefox, Safari và Opera.
- Giấy phép: Giấy phép MIT
SwipeBox
Swipebox là một plugin jQuery có hỗ trợ cử chỉ cảm ứng cho nền tảng di động. Nó cũng hỗ trợ video từ Youtube và Vimeo ngoài hình ảnh. Swipebox cũng hoàn toàn dễ thực hiện và có một số tùy chọn để tùy chỉnh hành vi của nó. Tôi nghĩ Swipebox là một plugin lightbox tuyệt vời cho noobs JavaScript.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android và Windows Phone.
- Giấy phép: Chưa xác định
hộp đựng
hộp đựng đồ là một plugin hộp đèn jQuery với nhiều loại phương tiện hỗ trợ: bao gồm video, Flash / SWF, nội dung Ajax, iframe và bản đồ. Plugin này cũng thêm các nút phương tiện truyền thông xã hội trên đầu phương tiện, cho phép người dùng của bạn chia sẻ nó lên Facebook, Twitter hoặc Reddit. Ngoài ra hãy xem phần nâng cao để xem iLightbox có thể được áp dụng như thế nào trong các tình huống khác nhau.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE7 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Chưa xác định
Hộp đèn cho Bootstrap
Hộp đèn là một trong những mảnh ghép còn thiếu từ Bootstrap. Plugin này sửa nó. Nếu bạn đang sử dụng Bootstrap, tôi khuyên bạn nên sử dụng thư viện này. Plugin được tích hợp tốt với cơ sở mã của Bootstrap.
- Phụ thuộc: Phương thức jQuery và Bootstrap
- Hỗ trợ trình duyệt: IE8 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép GNU
Hộp đèn Nivo
Hộp đèn Nivo là một plugin lightbox linh hoạt. Một số tùy chọn được đưa vào để thay đổi giao diện theo cách bạn muốn xuất hiện, chẳng hạn như thay đổi chủ đề, hiệu ứng chuyển tiếp và chuyển đổi điều hướng.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép MIT
Hộp hình ảnh
Hộp hình ảnh là một plugin lightbox mà không cần bloat. Nó được xây dựng đặc biệt cho hình ảnh do đó tên được đặt - không hỗ trợ video hoặc loại phương tiện khác. Nó cũng không yêu cầu đánh dấu HTML bên ngoài; các yếu tố là đủ. Plugin chỉ hoạt động.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Chưa xác định
Hộp đèn mini
Một plugin lightbox không có bloat. Thư viện chỉ có 2kb và chỉ hoạt động với hình ảnh. Đây là plugin hoàn hảo nếu bạn chỉ định cho trình duyệt mới nhất và không cần phải chồng các loại phương tiện khác như video.
- Phụ thuộc: Không ai
- Hỗ trợ trình duyệt: IE10 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép MIT
LightCase
Lightcase là một plugin lightbox đáng yêu. Nó đi kèm với một số hình ảnh động làm cho tương tác người dùng trở nên sống động, như mờ dần, thu phóng đàn hồi và cuộn. Hơn nữa, nó cũng hỗ trợ các loại phương tiện khác nhau bao gồm Youtube nhúng, video HTML, SWF và các hình thức đầu vào. Các plugin cũng xử lý đúng phương tiện không thể đạt được hoặc tìm thấy lỗi
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép GPL
Yalb
Yalb là viết tắt của Yet Another Lightbox - nhưng không phải vậy. Yalb đi kèm với một số API bao gồm các sự kiện tùy chỉnh cho phép bạn xác định trạng thái hộp đèn, chẳng hạn như khi nó mở
và khi nó là gần
. Yalb có hai phiên bản, Vanilla JavaScript và jQuery plugin.
- Phụ thuộc: Không ai
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép MIT
Lông vũ
6kb Lông vũ là một plugin trần cho nhà phát triển hiểu biết và chỉ mang theo những điều cần thiết. Nếu bạn cần, ví dụ, để nhóm hộp đèn hình ảnh trong một bộ sưu tập, bạn có thể bao gồm phần mở rộng bộ sưu tập. Bạn cũng có thể phát triển tiện ích mở rộng của riêng mình cho plugin này để phù hợp với nhu cầu dự án của bạn.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE8 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép MIT
LightLayer
LightLayer là một plugin lightbox dễ sử dụng. Nó có một số tùy chọn, phương thức JavaScript tùy chỉnh và sự kiện tùy chỉnh. Plugin hoạt động với hình ảnh, video, bản đồ và nội dung bên ngoài. Chúng ta có thể hỏi thêm gì nữa.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari và Opera
- Giấy phép: Giấy phép MIT
LightGallery
LightGallery, một plugin lightbox khác với rất nhiều tính năng được thêm vào. Nó đi kèm với hơn 20 tùy chọn để tùy chỉnh các chi tiết nhỏ nhất của hộp đèn.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android và Windows Phone
- Giấy phép: Giấy phép MIT
Hộp mực
Hộp chất lỏng là một plugin hộp đèn hình ảnh được lấy cảm hứng từ Medium. Nó hoạt động với hình ảnh trong các trường hợp khác nhau bao gồm hình ảnh nổi, hình ảnh với tuyệt đối
vị trí, hình ảnh có đường viền và đệm, và phòng trưng bày. Kiểm tra xem nó được xây dựng như thế nào. Nếu bạn cần một plugin WordPress, có một.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE9 +, Chrome, Firefox, Safari, Opera
- Giấy phép: Giấy phép MIT
Dải
Dải là một plugin lightbox độc đáo. Thay vì phủ lên hình ảnh, plugin thay vào đó trượt hình ảnh từ bên cạnh, để nó không chặn toàn bộ nội dung. StripJS hỗ trợ cả hình ảnh và video.
- Phụ thuộc: jQuery
- Hỗ trợ trình duyệt: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ và Android 3+
- Giấy phép: Giấy phép Creative Commons BY-NC-ND 3.0