Thư viện hộp đèn đáp ứng. Sử dụng Hộp đèn jQuery cho thư viện ảnh Cài đặt thư viện ảnh LightBox2

Bài viết này chứa jQuery tốt nhất Plugin hộp đèn sẽ giúp bạn tạo ra những trang web đẹp.

Các plugin jQuery này được sử dụng để thêm cửa sổ bật lên vào trang web của bạn. Những plugin như vậy rất công cụ đắc lực cho bất kỳ nhà thiết kế và phát triển web nào, vì họ giúp đạt được rất nhiều hiệu ứng đẹp, mang lại cho một trang web bình thường một diện mạo ngoạn mục và hấp dẫn. Để sử dụng plugin jQuery, bạn cần có kiến ​​thức cơ bản về JavaScript và jQuery. Nếu bạn không biết những điều cơ bản, chỉ cần đọc mô tả plugin và làm theo hướng dẫn.

ánh sángZoom

Tôi sẽ bắt đầu với plugin tôi đã viết - . Bạn có thể xem cách plugin hoạt động trong bài viết này - tất cả hình ảnh đều có thể nhấp vào được. Mục tiêu của tôi khi phát triển nó là tạo ra một hộp đèn đơn giản chỉ có hình ảnh, không có hiệu ứng trình chiếu, v.v.

Nhẹ, hỗ trợ cảm ứng và quan trọng nhất là plugin mô-đun cho phép bạn loại bỏ những phần không cần thiết không cần thiết. Nó hoạt động tốt trong trình duyệt di động. Bạn có thể thay đổi hình ảnh bằng cách vuốt ngón tay như thể nó ứng dụng tiêu chuẩn, với sự chuyển tiếp mượt mà.

Hộp đèn cho Bootstrap

Ban đầu, plugin hộp đèn không có sẵn trong Bootstrap. sửa nó. Nếu bạn đang sử dụng Bootstrap thì nên sử dụng thư viện này. Plugin tích hợp tốt với Bootstrap.

dải

Strip là một plugin hộp đèn độc đáo. Thay vì chồng hình ảnh, mô-đun hộp đèn trượt hình ảnh từ bên này sang bên kia để hình ảnh không chặn toàn bộ nội dung. Strip hỗ trợ cả hình ảnh và video.

- Cái này Thư viện JavaScriptđể tạo các phòng trưng bày hộp đèn thích ứng. Nhẹ và tương thích với phiên bản điện thoại, thật dễ dàng để tùy chỉnh và sử dụng chuyển tiếp suôn sẻ hình ảnh trong CSS3.

Hộp lại

Rebox là một hộp đèn rất nhẹ và nhanh cho nội dung. Tất nhiên, chủ yếu là dành cho hình ảnh. Để khởi tạo plugin, bạn chỉ cần kết nối thư viện JS và CSS.

Plugin hộp đèn tuyệt vời. Hỗ trợ một số loại hình ảnh động, chẳng hạn như: mờ dần, đàn hồi, thu phóng và cuộn. Ngoài ra nó còn hỗ trợ các loại khác nhau phương tiện bao gồm Nhúng Youtube, video HTML, SWF và các biểu mẫu đầu vào.

Thư viện ánh sáng

LightGallery là một plugin jQuery có khả năng tùy biến cao để tạo thư viện thích ứng. Nó có tất cả mọi thứ bạn cần: xem trong hộp đèn, trình chiếu, thu phóng toàn màn hình, xem trước. Ngoài ra, người dùng xem thư viện có thể tải ảnh xuống ngay lập tức.

Không giống như một số người anh em của nó trong ngành, nó không phải là sự kết hợp để hiển thị bất kỳ thứ gì trong cửa sổ bật lên. Plugin được tạo và hoạt động chỉ với mục đích hiển thị hình ảnh – cả đơn lẻ và là một phần của bộ (thư viện), nhưng điều này không làm cho nó kém hấp dẫn hơn chút nào.

Plugin hộp đèn jQuery

Plugin jQuery LightBox đơn giản, thanh lịch, không phô trương, không yêu cầu đánh dấu bổ sung và được sử dụng để phủ hình ảnh lên trang hiện tại nhờ sức mạnh và tính linh hoạt của bộ chọn jQuery.

Cho phép bạn tạo những hộp thoại theo phong cách facebook, trong khi có thể tạo các hộp thoại bằng cách đặt chúng vào đó văn bản thô một số yếu tố, hình ảnh, trang ajax.

Được sử dụng để tạo thư viện ảnh và hiển thị nội dung khác trong các cửa sổ phương thức đẹp mắt. Nếu bạn dự định có một thư viện ảnh trên trang web của mình và đặt một số nội dung trong các cửa sổ phương thức thì hãy chú ý đến tập lệnh này.

Khá nhẹ, có thể thay đổi kích thước hình ảnh cho phù hợp với kích thước cửa sổ và dễ cấu hình.

ImageLightbox.js là hộp đèn chỉ dành cho hình ảnh chứ không phải video, văn bản và khung hình cùng một lúc. Theo mặc định không có tiêu đề, nút điều hướng hoặc nền.

Nó là một hộp phương tiện giao diện người dùng jQuery có khả năng hiển thị nhiều loại nội dung, bao gồm hình ảnh và video từ YouTube và Vimeo. Có nhiều tính năng độc đáo bao gồm Toàn cảnh và Kích thước lại trực tiếp.

jQuery TosRus

jQuery TosRus là một plugin jQuery tiện lợi và đầy chức năng để làm việc với video và hình ảnh. Tập lệnh có thể hoạt động như một công cụ hộp đèn và thanh trượt ngangđồng thời. Nội dung trong cửa sổ phương thức được phản hồi theo mặc định. Thích ứng cho các thiết bị cảm ứng.

- đây là một trong những loại lightbox, dựa trên jQuery, có chức năng nâng cao hơn so với loại truyền thống. Giống như tất cả các sản phẩm tương tự, nó có một loạt cài đặt để kiểm soát độ trong suốt của nền, tốc độ hiển thị, hiệu ứng, kích thước, nhãn, v.v.

là một plugin jQuery được thiết kế để triển khai hộp đèn đáp ứng, không phô trương, lý tưởng cho các hình ảnh có độ phân giải cao. Nó hoạt động tuyệt vời cho thiêt bị di độngà, và cũng có thể được sử dụng trên màn hình với nhiều độ phân giải cao cho hình ảnh đầu ra đẹp.

– Plugin jQuery cho máy tính để bàn, điện thoại thông minh và máy tính bảng. Anh ấy ủng hộ Kiểm soát cảm ứng dành cho thiết bị di động, điều hướng bàn phím cho thiết bị máy tính để bàn, chuyển đổi CSS với khả năng dự phòng cho các điều khiển JQuery, khá dễ tùy chỉnh.

Siêu hộp jQuery

jQuery Superbox giúp dễ dàng tạo các hộp đèn cho hình ảnh, nhóm hình ảnh, trang bên ngoài hoặc nội dung nhất định. Plugin này hoàn toàn có thể truy cập và tự giải thích, đồng thời sử dụng thuộc tính "rel" để chạy tập lệnh và thuộc tính "href" để chỉ định URL của hình ảnh hoặc trang.

— Plugin hộp đèn jQuery với sự hỗ trợ rộng rãi cho các định dạng phương tiện khác nhau: bao gồm video, Flash / SWF, Ajax, khung và bản đồ. Plugin này cũng thêm các nút mạng xã hộiở trên cùng, cho phép người dùng chia sẻ nó lên Facebook, Twitter hoặc Reddit. Ngoài ra còn có cài đặt thêmđể xem cái nào có thể được áp dụng trong những dịp khác nhau.

là một plugin jQuery Lightbox đáp ứng khác phù hợp để hiển thị hình ảnh, iFrames, Google-Maps, Vimeo và video YouTube. Plugin tính toán chiều rộng tối đa của hình ảnh trên màn hình và duy trì chiều cao tương ứng, ngay cả khi nó lớn hơn chiều cao của cửa sổ.

Cho phép bạn dễ dàng tạo các cửa sổ bật lên đẹp mắt bằng jQuery. Bạn có thể tự động nâng cao nội dung phương tiện của mình hoặc tạo cửa sổ bật lên tùy chỉnh bằng API mạnh mẽ.

- hộp đèn thích ứng tuyệt vời. Nó có thể được sử dụng để tạo các phòng trưng bày tuyệt đẹp trông tuyệt vời trên mọi màn hình.

Magnific Popup là một plugin hộp đèn jQuery dễ sử dụng, tập trung vào hiệu suất. Của anh ấy mục tiêu chính– cung cấp sự dễ dàng sử dụng trên mọi thiết bị.

Một plugin cơ bản nặng 6 kilobyte dành cho các nhà phát triển có kinh nghiệm và chỉ bao gồm những thứ cần thiết. Ví dụ: nếu bạn cần hiệu ứng hộp đèn cho một nhóm hình ảnh trong thư viện, bạn có thể bật tiện ích mở rộng thư viện. Bạn cũng có thể phát triển tiện ích mở rộng plugin của riêng mình để sử dụng trong các dự án của mình.

Hộp đèn Plus là một trong những plugin phổ biến nhất thực hiện hiệu ứng Lightbox của một hình ảnh xuất hiện (khi bạn nhấp vào một bản sao nhỏ của hình ảnh, bản lớn hơn sẽ mở ra trong cùng một cửa sổ với hiệu ứng js đẹp mắt). Mức độ phổ biến của plugin được quyết định bởi hai điều: thứ nhất là nó bắt đầu hoạt động ngay sau khi kích hoạt và không yêu cầu cấu hình bổ sung của hình ảnh, thứ hai là plugin có nhiều cài đặt và nếu muốn, plugin có thể được cấu hình cho bất kỳ nhiệm vụ. Plugin này có thể mở không chỉ hình ảnh mà còn cả video, ổ đĩa flash và liện kết ngoại. Thông thường tôi không thích thay thế một plugin hoạt động tốt bằng một plugin tương tự khác, nhưng tôi không thể cưỡng lại và thay thế plugin cũ và lỗi thời bằng Hộp đèn Plus.

1. Giải nén kho lưu trữ.

2. Sao chép thư mục hộp đèn cộng thêm V. /wp-content/plugin/.

3. Vào bảng quản trị blog trên "tab" bổ sung" và kích hoạt plugin.

Như tôi đã nói, ngay sau khi kích hoạt, plugin sẽ bắt đầu hoạt động và tất cả ảnh của bạn sẽ mở với hiệu ứng Hộp đèn. Nhưng bạn vẫn sẽ phải định cấu hình plugin vì bạn sẽ cần dịch các nhãn như “Hình ảnh 1 trên 2” sang “Hình ảnh 1 trên 2”. Tôi muốn dịch toàn bộ plugin sang tiếng Nga ngay lập tức, nhưng tôi đã bỏ cuộc giữa chừng vì thật không may, tác giả của plugin đã từ bỏ hỗ trợ đa ngôn ngữ và hầu hết plugin không thể dịch được thông qua các tệp bản địa hóa. Điều này thật khó chịu vì thực tế có rất nhiều cài đặt trong plugin và khá khó để những người không nói được tiếng Anh có thể hiểu chúng ngay lập tức. Nhưng ưu điểm của plugin là cho người dùng trung bình Thực tế không cần phải cấu hình bất cứ điều gì.

Trong mọi trường hợp, bạn có thể định cấu hình plugin bằng cách đi tới " Vẻ bề ngoài\Lightbox Plus". Điều đầu tiên bạn sẽ thấy ở đây là cài đặt kiểu:

Plugin cung cấp 14 kiểu hiển thị hình ảnh tích hợp. Cái này cài đặt duy nhất plugin đáng để thử nghiệm cẩn thận để phong cách phù hợp với thiết kế trang web của bạn. Nhưng hãy cẩn thận, vì theo mặc định tất cả các kiểu đều được điều chỉnh cho phù hợp với tiếng anh và sau khi dịch các từ “trước” và “tiếp theo” thành “trước” và “tiếp theo”, các từ này trong một số phong cách có thể trùng lặp với nhau.

Đây là cài đặt chính của plugin và tất cả các cài đặt khác nằm trong phần "Cài đặt hộp đèn chính", chứa các phần phụ:

Chuyển đến tiểu mục "Cài đặt cơ bản", đây là nơi bạn cần dịch các cụm từ:

Trên thực tế, việc này đã hoàn tất việc cấu hình plugin. Tất cả các tùy chọn khác có thể được giữ nguyên - theo mặc định, chúng phù hợp với hầu hết mọi trang web.

Làm thế nào để sử dụng plugin? Có, rất đơn giản - ví dụ: chèn hình thu nhỏ của một bức ảnh vào bài đăng và khi bạn nhấp vào hình thu nhỏ này, hình ảnh lớn hơn sẽ mở ra theo kiểu Hộp đèn mà bạn chọn. Không có hành động bổ sung Bạn không bắt buộc phải làm vậy. Đại khái nó sẽ trông như thế này:

Tuy nhiên, có một lưu ý nhỏ - theo mặc định, tất cả ảnh sẽ được hiển thị trong thư viện (nghĩa là với các nút “trước” và “tiếp theo”). Nếu bạn không muốn hiển thị ảnh trong thư viện thì bạn cần phải đăng ký thẻ rel cho một liên kết như rel="hộp đèn". Tức là mã liên kết phải là:

<a href = "http://www..jpg" rel = "hộp đèn" > <img style = "display: inline" title = border = "0" src = "http://www.s.jpg" / >

Ở đâu " eva1" là mã định danh duy nhất của một ảnh (bất kỳ giá trị duy nhất nào). Nếu bạn nhập mã định danh này cho hai ảnh cùng một lúc, bạn sẽ nhận được một bộ sưu tập gồm hai ảnh. Ví dụ: mã:

<p> <a href = "http://www..jpg" rel = "hộp đèn" > <img style = "display: inline" title = border = "0" alt =align = "middle" src = "http://www.s.jpg"/ > <a href = "http://www..jpg" rel = "hộp đèn" > <img style = "display: inline" title = border = "0" alt =align = "middle" src = "http://www.s.jpg"/ > </p>

Nó sẽ hiển thị một bộ sưu tập như thế này:

Bạn có thể chỉnh sửa thẻ rel trực tiếp trong trình chỉnh sửa WordPress:

Mọi thứ đều khá đơn giản với hình ảnh. Nhưng làm cách nào để hiển thị video hoặc nội dung khác bằng hiệu ứng Hộp đèn? Để thực hiện việc này, trước tiên hãy đi tới cài đặt plugin và chọn hộp "Sử dụng hộp đèn phụ":

Sau khi nhấp vào “Lưu cài đặt”, các cài đặt bổ sung sẽ xuất hiện cụ thể để chèn video và nội dung khác:

Bạn có thích bài viết? Đăng ký nhận thông tin cập nhật bằng hoặc

Thật tuyệt vời khi ngày càng có nhiều công nghệ web mới nhất cho chúng ta, với sự trợ giúp của chúng, công việc của chúng ta sẽ trở nên dễ dàng hơn nhiều. Cửa sổ phương thức – yếu tố chức năngđể hiển thị bất kỳ loại nội dung HTML nào, hướng đến sự sáng tạo thiết kế tiện lợi và giao diện.

Trong bài đánh giá này, chúng tôi đã biên soạn danh sách các thư viện và tập lệnh JQuery để tạo hộp đèn giúp các nhà phát triển và nhà thiết kế tạo ra các trang web thậm chí còn tốt hơn và chuyên nghiệp hơn.

Bạn có thể dễ dàng thêm các đoạn script dưới đây vào trang web của mình. Vì vậy, không dài dòng nữa, hãy đi thẳng vào vấn đề và xem qua các thư viện hộp đèn siêu jQuery này mà bạn có thể thêm vào kho vũ khí của mình.

1. Vuốt ảnh

PhotoSwipe là một thư viện ảnh HTML trên Dựa trên CSS và JavaScript, đặc biệt nhắm tới các thiết bị di động. Khi phát triển nó, các tác giả lấy dịch vụ xem hình ảnh trên điện thoại di động làm ví dụ. thiết bị iOS và Google. PhotoSwipe quen thuộc và trực quan giao diện rõ ràng, giúp làm việc với hình ảnh trên trang web dành cho thiết bị di động dễ dàng hơn.

Tất cả các chức năng cơ bản đều được hỗ trợ: di chuyển đến hình ảnh tiếp theo hoặc trước đó, phóng to, kéo, thu nhỏ hoặc đóng, v.v.

2. Hộp vuốt


Swipebox – Plugin JQuery dành cho máy tính để bàn, điện thoại thông minh và máy tính bảng. Nó hỗ trợ điều khiển cảm ứng cho thiết bị di động, điều hướng bàn phím cho thiết bị máy tính để bàn, chuyển đổi CSS với khả năng dự phòng cho điều khiển JQuery và khá dễ tùy chỉnh.

Plugin đã được thử nghiệm trên Chrome, Safari, Firefox, Opera, trình duyệt web IE 8+, iOS4+, Android, Điện thoại Windows. Được phát hành theo giấy phép MIT.

3. iLightbox


iLightBox giúp dễ dàng tạo các cửa sổ phương thức phản hồi rất đẹp mắt bằng JQuery. Kết hợp hỗ trợ nhiều loại nội dung đa phương tiện với giao diện tuyệt vời và API thân thiện với người dùng, iLightBox cố gắng tạo ra hộp đèn hoàn hảo nhất có thể. iLightBox cung cấp khả năng xem trong chế độ toàn màn hình, Giao diện tương thích với Retina, quản lý sự kiện chạm, tích hợp YouTube và Vimeo cho video HTML5, API JavaScript mạnh mẽ. Trình cắm có hỗ trợ miễn phí và cập nhật phiên bản.

4. Hộp đèn hình ảnh


Image Lightbox là một plugin tối giản, có thể mở rộng và tùy chỉnh cho iOS, Android và Windows Phone. Bạn chỉ cần tải xuống bằng bàn phím hình ảnh tiếp theo nhờ sử dụng các phép biến đổi và chuyển tiếp CSS.

5. Cửa sổ bật lên tuyệt vời


Magnific Popup là một plugin jQuery đáp ứng miễn phí, tập trung vào việc cung cấp trải nghiệm thiết bị người dùng tốt nhất. Hầu hết các plugin hộp đèn đều yêu cầu bạn xác định kích thước cửa sổ bằng JS. Trong Magnific Popup bạn có thể sử dụng đơn vị tương đối các phép đo như EM hoặc thay đổi kích thước hộp đèn bằng truy vấn phương tiện CSS.

6. Hộp đèn Nivo


Nivo Lightbox là một plugin hộp đèn linh hoạt. Có nhiều tùy chọn để bạn lựa chọn, nhờ đó bạn có thể dễ dàng thay đổi giao diện của hộp đèn. Ví dụ: thay đổi chủ đề, hiệu ứng chuyển tiếp và phương pháp điều hướng.

7. Vỏ đèn


Lightcase là một plugin hộp đèn linh hoạt, đáp ứng và có thể mở rộng được phát triển với sử dụng JQuery. Nó hoạt động tuyệt vời trong tất cả trình duyệt phổ biến, chẳng hạn như Internet Explorer 7+, Firefox, Opera, Webkit và các trình duyệt khác. Plugin hỗ trợ các cuộc gọi ảnh, video, video HTML5, Iframe, SWF và AJAX.

8. Lightlayer.js


LightLayer là tập lệnh hiển thị hộp đèn thích ứng, nó hoạt động tốt cùng với các thành phần khác trên bất kỳ màn hình nào. Kịch bản này thực sự rất dễ sử dụng. LightLayer cung cấp khả năng kiểm soát nhiều thông số: màu nền và độ mờ, vị trí hộp đèn, chuyển tiếp mở/đóng và nhiều tính năng tùy chỉnh khác.

9. Strip.js


Dải là một hộp đèn chỉ mở rộng đến một phần của trang. Điều này làm cho nó ít xâm phạm hơn và cho phép bạn tương tác với các thành phần trang khác trên màn hình lớn hơn; trên thiết bị di động hộp đèn có cái nhìn cổ điển. Strip sử dụng JQuery và được hỗ trợ trong tất cả các trình duyệt chính.

10. Hộp chất lỏng


Fluidbox là một plugin jQuery được thiết kế để cung cấp hộp đèn đáp ứng, kín đáo, lý tưởng cho hình ảnh có độ phân giải cao. Nó hoạt động tốt trên thiết bị di động và cũng có thể được sử dụng trên màn hình có độ phân giải cao hơn để có đầu ra hình ảnh đẹp.

11. Đèn lông vũ


Featherlight là một plugin rất nhẹ với giá 400 Chuỗi JavaScript , 100 dòng CSS và có kích thước nhỏ hơn 6Kb. Hộp đèn thông minh, đáp ứng, hỗ trợ hình ảnh, AJAX và iframe theo mặc định. Bạn cũng có thể điều chỉnh nó cho phù hợp với nhu cầu của bạn. Featherlight hoạt động trên IE8+ nhé mọi người trình duyệt hiện đại và nền tảng di động.

12. 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 bộ lớn giao diện bao gồm các sự kiện người dùng cho phép bạn xác định trạng thái của nó ( đóng mở).

13. Thư viện ánh sáng


JQuery lightGallery là một thư viện để hiển thị hình ảnh và video. Cô ấy có nhiều chức năng hữu ích, chẳng hạn như bố trí đáp ứng, hỗ trợ cho các thiết bị di động cảm ứng, hiệu ứng bật lên và mờ dần, chú thích và mô tả cho hình minh họa, v.v.

Tôi đã xem xét nhiều thư viện hình ảnh khác nhau nhiều lần và thu thập được một bộ sưu tập phong phú các trình chiếu và plugin ngoạn mục. Lightbox cũng chỉ có sẵn trên CSS3 mà không cần kết nối các thư viện js bổ sung. Nhưng thời gian không đứng yên, người dùng ngày càng sử dụng nhiều thiết bị di động khác nhau để lướt Internet, điều đó có nghĩa là khả năng thích ứng của các thành phần web và đặc biệt là các thư viện ảnh với hiệu ứng “ ” đang trở thành một trong những ưu tiên mà các nhà thiết kế và phát triển web nên chú ý ĐẾN.

Tôi trình bày một lựa chọn khác gồm 15 jQuery đáp ứng các plugin thân thiện với cả trình duyệt trên máy tính để bàn và hoàn toàn phù hợp với màn hình của nhiều thiết bị di động khác nhau (máy tính xách tay, điện thoại thông minh, máy tính bảng, v.v.).

Xem bản demo trên trang web của nhà phát triển, tải xuống plugin bạn thích và tạo, tạo, tạo...

1. iLightbox

iLightbox là một plugin Hộp đèn jQuery nhẹ có hỗ trợ cho phạm vi rộng nhiều loại khác nhau tập tin: hình ảnh, video, Flash/SWF, nội dung Ajax, khung và bản đồ nhúng. Plugin này cũng bổ sung thêm các nút mạng xã hội, cho phép người dùng chia sẻ nội dung qua Facebook, Twitter hoặc Reddit. Một cơ hội tuyệt vời để tổ chức các trình chiếu, thư viện hình ảnh và video ngoạn mục, với chế độ xem ở chế độ bình thường và toàn màn hình.

iLightbox Nó hoạt động khá nhanh và khi xem trên thiết bị di động, nó hiển thị chính xác hơn nội dung được xử lý. Ngoài ra, bằng cách sử dụng plugin này, bạn có thể dễ dàng triển khai việc hiển thị các khối thông tin giống như một cửa sổ phương thức.

  • Nghiện: jQuery
  • Hỗ trợ trình duyệt: IE7+, Chrome, Firefox, Safari và Opera
  • Giấy phép: Có quỷ mới biết)))

2. VuốtHộp

hộp vuốt- Cái này Trình cắm JQuery với sự hỗ trợ những màn hình cảm ứng nền tảng di động. Ngoài hình ảnh, plugin còn hỗ trợ video nhúng từ Youtube và Vimeo. Swipebox rất dễ gắn vào bất kỳ dự án nào; plugin có một số tùy chọn trực quan để tùy chỉnh chức năng và hành vi của nó. Trang web của nhà phát triển có tài liệu chi tiết về cách kết nối và sử dụng plugin, không có những điều rườm rà không cần thiết, mọi thứ đều đúng mục đích, vì vậy tôi nghĩ sẽ không khó để tìm ra cái gì, ở đâu và tại sao.

  • Nghiện: jQuery
  • Hỗ trợ trình duyệt: IE9+, Chrome, Safari, Firefox, Opera, iOS4+, Android và Windows Phone
  • Giấy phép: Tôi chưa quyết định, có lẽ bạn sẽ may mắn)))

3.Cửa sổ tuyệt vời

Một plugin hộp đèn nổi tiếng và đã được chứng minh từ lâu dựa trên jQuery hoặc Zepto.js. Tác giả của plugin là Dmitry Semenov, đồng thời là nhà phát triển plugin PhotoSwipe mà tôi sẽ nói đến bên dưới. Đi kèm dưới dạng plugin jQuery/Zepto, có nhiều tính năng hơn nhiều cơ hội thiếu trong PhotoSwipe, chẳng hạn như hỗ trợ video, hiển thị bản đồ và triển khai nội dung Ajax cửa sổ phương thức với các hình thức tích hợp sẵn. Theo tất cả các tiêu chí, đây là một công cụ tuyệt vời khác dành cho nhà phát triển web. Có một plugin riêng cho WordPress và tài liệu chi tiết về cách thiết lập và sử dụng. Điều đáng buồn duy nhất là thiếu tài liệu bằng tiếng Nga, xét theo tên và họ thì tác giả có vẻ là người Nga, chưa bao giờ hiểu là có hại hay do ảo giác về sự tinh vi của mình mà blah. Được rồi, ai cần tìm hiểu, chúng tôi cũng không đun sôi trà mềm))).

  • Nghiện: 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

4. Vuốt ảnh

  • Nghiện: Javascript hoặc jQuery
  • Hỗ trợ trình duyệt
  • Giấy phép: Giấy phép MIT

11.Ánh sáng lông vũ

Plugin hộp đèn 6 kbit, dành cho các nhà phát triển ít nhiều hiểu biết, được trang bị tất cả những tính năng tốt nhất chức năng cần thiết. Ngoài việc hỗ trợ tất cả các loại nội dung phổ biến (văn bản, hình ảnh, iframe, Ajax), còn có khả năng kết nối một loại nội dung bổ sung và 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, sẽ đáp ứng đầy đủ nhu cầu của bạn khi tạo mới dự án. Toàn bộ thứ này (phát triển tiện ích mở rộng) hoạt động như thế nào, tôi chưa thực sự tìm hiểu, nhưng những người cài đặt plugin này, tôi nghĩ họ sẽ tìm ra))).

  • Nghiện: jQuery
  • Hỗ trợ trình duyệt: IE8+, Chrome, Firefox, Safari và Opera
  • Giấy phép: Giấy phép MIT

12. Thư viện ánh sáng

Thư viện ánh sáng— một plugin hộp đèn đa chức năng với nhiều Tính năng bổ sung. Đi kèm với hơn 20 tùy chọn để tùy chỉnh những chi tiết nhỏ nhất Hộp đèn. Có tất cả mọi thứ ở đây, hoặc gần như tất cả mọi thứ)). Thư viện hình ảnh đầy đủ với các hình thu nhỏ được sắp xếp gọn gàng, các yếu tố điều hướng và cuộn hình thu nhỏ. Đánh dấu HTML đơn giản dưới dạng danh sách không có thứ tự

    sử dụng thuộc tính data-src cho hình ảnh kích thước đầy đủ. Điều tương tự cũng xảy ra với các video từ Youtube và Vimeo. Hỗ trợ tuyệt vời cho tất cả các định dạng video HTML5, MP4, WebM, Ogg... Hình thu nhỏ hoạt hình, bố cục phản hồi trên thiết bị di động, hiệu ứng trượt và chuyển tiếp mượt mà khi chuyển đổi giữa hình ảnh và nội dung khác. Sự xuất hiện có thể dễ dàng định hình và tùy chỉnh với sử dụng CSS. Tải trước tối ưu hóa hình ảnh và mã. Điều hướng bằng bàn phím dành cho máy tính để bàn, cũng như khả năng sử dụng các biểu tượng phông chữ bổ sung. Thư viện ánh sáng- đây là nơi “kết hợp” thực sự, điều chính là không để bị lạc trong vô số cài đặt và khả năng mở rộng của plugin này.
    Đối với những người cần một thanh trượt phù hợp, tôi khuyên bạn nên chú ý đến một thanh trượt từ cùng một nhà phát triển.

    • Nghiện: 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

    13. DảiJS

    Không bình thường, tôi thậm chí có thể nói: một cách triển khai hộp đèn khác thường, hay nói đúng hơn là cách trình bày nội dung khác thường, khi một hình ảnh hoặc video, trong thiết kế hộp đèn, xuất hiện ở bên phải, không lấp đầy toàn bộ màn hình mà chỉ lấp đầy một kích thước nhất định một hình ảnh hoặc video có kích thước đầy đủ. Trên màn hình lớn, cách tiếp cận này có thể hiểu được; vẫn có thể tương tác với trang. Trên màn hình nhỏ của thiết bị di động, tất cả thiết kế sáng tạo này đều biến thành một “hộp đèn” cổ điển một cách mượt mà. Ý tưởng thật thú vị, hãy xem bản demo, có thể ai đó sẽ bổ sung thêm sự sáng tạo như vậy.

    • Nghiện: 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

    14. Lớp ánh sáng

    Một plugin hộp đèn dễ sử dụng phù hợp với mọi dự án và cũng trông đẹp mắt trên mọi màn hình. Plugin LightLayer cung cấp khả năng kiểm soát nhiều cài đặt, chẳng hạn như thay đổi màu nền và mức độ trong suốt, vị trí của khối đế, lựa chọn hiệu ứng chuyển tiếp khi mở/đóng, các chức năng mà người dùng có thể thao tác độc lập. Plugin hoạt động tốt với nội dung trang web bên ngoài, trình phát video và bản đồ được nhúng.

    • Nghiện: jQuery
    • Hỗ trợ trình duyệt: IE9+, Chrome, Firefox, Safari và Opera
    • Giấy phép: Giấy phép MIT

    15. Hộp chất lỏng

    Fluidbox là plugin lightbox dành riêng cho hình ảnh. Số lượng các biến thể có thể có trong cách trình bày hình ảnh thực sự ấn tượng. Plugin hoạt động tốt với hình ảnh có nhiều kiểu dáng khác nhau, bao gồm hình ảnh nổi, hình ảnh có định vị tuyệt đối, hình ảnh và hình ảnh được đóng khung và thụt lề, với các hình ảnh đơn lẻ và được kết hợp thành một thư viện. Nói chung là lãng phí thời gian, vẫn chưa thể mô tả hết khả năng của plugin trong một bài trình bày ngắn gọn nên tốt hơn hết bạn nên xem demo, vặn xoắn, xoay vòng và tôi nghĩ nhiều người sẽ thích plugin này .

    • Nghiện: jQuery
    • Hỗ trợ trình duyệt: IE9+, Chrome, Firefox, Safari, Opera
    • Giấy phép: Giấy phép MIT

    Có lẽ đó là tất cả! Tôi hy vọng cái này Đánh giá ngắn, sẽ giúp bạn hiểu được rất nhiều sản phẩm phát triển web được cung cấp. Tôi muốn lưu ý rằng tôi chưa sử dụng tất cả các plugin được trình bày trong phần lựa chọn cho các dự án đang hoạt động; Tôi đã thử nghiệm hầu hết chúng trên các địa điểm thử nghiệm hoặc tại hội thảo, vì vậy nếu có bất kỳ câu hỏi nào phát sinh, rất có thể chúng ta sẽ cùng nhau giải quyết và cùng nhau, như mọi khi Chúng ta sẽ thành công.

    Với tất cả sự tôn trọng, Andrew