15 ไลท์บ็อกซ์ไลบรารี่สำหรับตอบสนองมือถือ

Lightbox เป็นวิธีหนึ่งที่ได้รับความนิยม วางซ้อนภาพบนเว็บ. เมื่อคุณคลิกที่ภาพ Lightbox จะปรากฏขึ้นพร้อมกับภาพเคลื่อนไหวบางรูปแบบและหรี่แสงพื้นหลังเพื่อให้โฟกัสของคุณอยู่ที่ภาพ ภาพมีขนาดใหญ่ขึ้น ไลบรารี่ Lightbox JavaScript ยอดนิยมที่เรารู้จักมาหลายปีทำให้คุณทำได้ดีบนเดสก์ท็อป แต่ไม่มากบนแพลตฟอร์มมือถือ.

การเพิกเฉยต่อสิ่งนี้และความต้องการในการตอบสนองไม่ใช่ความคิดที่ดีในทุกวันนี้ซึ่งเป็นสาเหตุว่าทำไมไลบรารี่ Lightbox ที่ตอบสนองต่อไลบรารี่ทั้ง 15 ตัวนี้จึงต้องถูกตรวจสอบ.

เพิ่มเติมเกี่ยวกับ Hongkiat:

• สร้างหน้าต่าง Modal ได้อย่างง่ายดายด้วย HTML5 Dialog
• แกลเลอรี่รูปภาพ / สไลด์โชว์ที่ตอบสนองได้ฟรี 10 อันดับแรก
• สร้างควบคุมและปรับแต่งหน้าต่าง Modal ที่ดีกว่าสำหรับเว็บไซต์ของคุณโดยใช้ Vex
• jQuery Image Galleries & Sliders - ดีที่สุด

PhotoSwipe

PhotoSwipe เป็นปลั๊กอิน ligthbox สุดโปรดของฉัน มันเบาเปิดใช้งานระบบสัมผัสและที่สำคัญที่สุดคือโมดูลซึ่งช่วยให้ฉันสามารถขุดบางส่วนที่ไม่จำเป็น มันทำงานได้ดีในเบราว์เซอร์มือถือ คุณสามารถปัดนิ้วผ่านรูปภาพได้ด้วยนิ้วของคุณเหมือนในแอพเนทีฟและการเปลี่ยนแปลงจะราบรื่นมาก.

• เมืองขึ้น: ไม่มี
• รองรับเบราว์เซอร์: IE8 +, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถือสองสามตัว.
• การอนุญาต: ใบอนุญาต MIT

MagnificPopup

MagnificPopup เป็นปลั๊กอิน lightbox อื่นที่พัฒนาโดยบุคคลเดียวกันที่ให้ PhotoSwipe กับเรา Dmitry Semenov มันมาในรูปแบบของปลั๊กอิน jQuery / Zepto และยังนำความสามารถที่ขาดหายไปใน PhotoSwipe เช่นการสนับสนุนเนื้อหาวิดีโอแผนที่และ Ajax นี่เป็นทางเลือกที่ยอดเยี่ยมสำหรับผู้ที่ต้องการมีคุณสมบัติเพิ่มเติมในมือ.

• เมืองขึ้น: jQuery 1.9.1+ หรือ Zepto.js
• รองรับเบราว์เซอร์: IE7 (บางส่วน), IE8 +, Chrome, Firefox, Safari และ Opera.
• การอนุญาต: ใบอนุญาต MIT

SwipeBox

Swipebox เป็นปลั๊กอิน jQuery พร้อมการสนับสนุนท่าทางสัมผัสสำหรับแพลตฟอร์มมือถือ นอกจากนี้ยังรองรับวิดีโอจาก Youtube และ Vimeo นอกเหนือจากภาพ Swipebox นั้นใช้งานง่ายและมีตัวเลือกมากมายในการปรับแต่งพฤติกรรมของมัน ฉันคิดว่า Swipebox เป็นปลั๊กอิน lightbox ที่ยอดเยี่ยมสำหรับ JavaScript noobs.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Safari, Firefox, Opera, IOS4 +, Android และ Windows Phone.
• การอนุญาต: ไม่ได้กำหนด

iLightbox

iLighbox เป็นปลั๊กอิน lightbox jQuery พร้อมรองรับสื่อหลากหลายประเภท: รวมถึงวิดีโอ, Flash / SWF, เนื้อหา Ajax, iframe และแผนที่ ปลั๊กอินนี้ยังเพิ่มปุ่มโซเชียลมีเดียบนสื่อช่วยให้ผู้ใช้ของคุณแชร์ไปที่ Facebook, Twitter หรือ Reddit ตรวจสอบส่วนขั้นสูงเพื่อดูว่า iLightbox สามารถนำไปใช้ในสถานการณ์ต่าง ๆ ได้อย่างไร.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE7 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ไม่ได้กำหนด

Lightbox สำหรับ Bootstrap

Lightbox เป็นหนึ่งในชิ้นส่วนที่ขาดหายไปอย่างเห็นได้ชัดจาก Bootstrap ปลั๊กอินนี้แก้ไขได้ หากคุณใช้ Bootstrap ฉันขอแนะนำให้ใช้ไลบรารีนี้ ปลั๊กอินได้รับการบูรณาการอย่างดีกับรหัสฐานของ Bootstrap.

• เมืองขึ้น: jQuery และ Bootstrap Modal
• รองรับเบราว์เซอร์: IE8 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต GNU

Nivo Lightbox

Nivo Lightbox เป็นปลั๊กอิน lightbox ที่ยืดหยุ่น มีหลายตัวเลือกในการเปลี่ยนลักษณะที่ปรากฏในแบบที่คุณต้องการให้ปรากฏเช่นการเปลี่ยนชุดรูปแบบเอฟเฟกต์การเปลี่ยนแปลงและการเปลี่ยนการนำทาง.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต MIT

ImageLightbox

ImageLightbox เป็นปลั๊กอิน lightbox ที่ไม่มี bloat มันถูกสร้างขึ้นเป็นพิเศษสำหรับภาพจึงได้รับชื่อ - ไม่รองรับวิดีโอหรือสื่อประเภทอื่น นอกจากนี้ยังไม่ต้องการมาร์กอัป HTML ภายนอก องค์ประกอบก็เพียงพอแล้ว ปลั๊กอินใช้งานได้.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ไม่ได้กำหนด

มินิไลท์บ็อกซ์

ปลั๊กอิน Lightbox อื่นที่ไม่มีตัวขยาย ไลบรารีนี้มีขนาดเพียง 2kb และใช้ได้กับรูปภาพเท่านั้น มันเป็นปลั๊กอินที่สมบูรณ์แบบถ้าคุณกำหนดเฉพาะสำหรับเบราว์เซอร์ล่าสุดและไม่จำเป็นต้องซ้อนทับสื่อประเภทอื่น ๆ เช่นวิดีโอ.

• เมืองขึ้น: ไม่มี
• รองรับเบราว์เซอร์: IE10 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต MIT

LightCase

Lightcase เป็นปลั๊กอิน lightbox ที่น่ารัก มันมาพร้อมกับภาพเคลื่อนไหวหลายอย่างที่ทำให้ผู้ใช้โต้ตอบได้อย่างมีชีวิตชีวาเช่นจางการซูมยืดหยุ่นและการเลื่อน นอกจากนี้ยังรองรับสื่อประเภทต่าง ๆ รวมถึง Youtube, วิดีโอ HTML, SWF และรูปแบบการป้อนข้อมูล ปลั๊กอินยังจัดการกับสื่ออย่างถูกต้องไม่สามารถเข้าถึงหรือพบข้อผิดพลาด

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต GPL

Yalb

Yalb ย่อมาจาก Yet Another Lightbox - แต่ไม่ใช่ Yalb มาพร้อมกับ API จำนวนหนึ่งซึ่งรวมถึงเหตุการณ์ที่กำหนดเองที่อนุญาตให้คุณระบุสถานะไลท์บ็อกซ์เช่นเมื่อเป็น เปิด และเมื่อมันเป็น ปิด. Yalb มีสองเวอร์ชั่นคือ Vanilla JavaScript และ jQuery plugin.

• เมืองขึ้น: ไม่มี
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต MIT

featherlight

6kb featherlight เป็นปลั๊กอินสำหรับนักพัฒนาที่เข้าใจง่ายและมีเพียงสิ่งจำเป็นเท่านั้น ตัวอย่างเช่นหากคุณต้องการจัดกลุ่มกล่องรวมภาพในแกลเลอรี่คุณสามารถรวมส่วนขยายแกลเลอรี คุณยังสามารถพัฒนาส่วนขยายของคุณเองสำหรับปลั๊กอินนี้เพื่อให้เหมาะกับความต้องการของโครงการของคุณ.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE8 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต MIT

LightLayer

LightLayer เป็นปลั๊กอิน lightbox ที่ใช้งานง่าย มันมีตัวเลือกไม่กี่ตัวเลือกวิธี JavaScript ที่กำหนดเองและเหตุการณ์ที่กำหนดเอง ปลั๊กอินทำงานกับรูปภาพวิดีโอแผนที่และเนื้อหาภายนอก ยิ่งไปกว่านั้นเราสามารถถาม.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari และ Opera
• การอนุญาต: ใบอนุญาต MIT

LightGallery

LightGallery, ปลั๊กอิน lightbox อื่นที่มีคุณสมบัติเพิ่มเข้ามาจำนวนมาก มาพร้อมกับตัวเลือกมากกว่า 20 ตัวเลือกเพื่อปรับแต่งรายละเอียดที่เล็กที่สุดของไลท์บ็อกซ์.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE7 +, Chrome, Firefox, Safari, Opera, iOS, Android และ Windows Phone
• การอนุญาต: ใบอนุญาต MIT

FluidBox

Fluidbox เป็นปลั๊กอิน Lightbox ของภาพที่ได้รับแรงบันดาลใจจาก Medium มันทำงานได้กับภาพภายใต้สถานการณ์ต่าง ๆ รวมถึงภาพลอยภาพด้วย แน่นอน ตำแหน่งภาพที่มีเส้นขอบและขยายและแกลเลอรี่ ตรวจสอบวิธีการสร้าง หากคุณต้องการปลั๊กอิน WordPress มีหนึ่งรายการ.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE9 +, Chrome, Firefox, Safari, Opera
• การอนุญาต: ใบอนุญาต MIT

StripJS

StripJS เป็นปลั๊กอิน Lightbox ที่เป็นเอกลักษณ์ แทนที่จะวางซ้อนภาพปลั๊กอินจะเลื่อนภาพจากด้านข้างแทนเพื่อที่จะไม่ปิดกั้นเนื้อหาทั้งหมด StripJS รองรับทั้งรูปภาพและวิดีโอ.

• เมืองขึ้น: jQuery
• รองรับเบราว์เซอร์: IE7 +, Chrome, Firefox, Safari, Opera, iOS 5+ และ Android 3+
• การอนุญาต: ใบอนุญาต Creative Commons BY-NC-ND 3.0