ไลท์บ็อกซ์ Jquery พร้อม 2 วัตถุ การออกแบบเว็บไซต์และการเพิ่มประสิทธิภาพการค้นหา ปลั๊กอินไลท์บ็อกซ์ jQuery ที่สวยงามสำหรับ WordPress

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

พลังเต็มรูปแบบของ jQuery มาพร้อมกับไลท์บ็อกซ์แบบไม่มีปลั๊กอิน ซึ่งทำให้นักออกแบบสามารถทำงานกับรูปภาพได้อย่างมีประสิทธิภาพอย่างเหลือเชื่อ บทเรียนของเรานำเสนอปลั๊กอินที่แตกต่างกัน 15 แบบ ซึ่งจะให้เครดิตคุณมากมาย

เติม

TopUp เป็นไลบรารี JavaScript ที่เรียบง่ายสำหรับการแสดงหน้าเว็บที่ไม่เกะกะ ไลบรารีถูกเรนเดอร์ผ่าน jQuery และ jQuery UI เพื่อให้มั่นใจถึงความเข้ากันได้และความกะทัดรัดข้ามเบราว์เซอร์

ปลั๊กอินไฮสไลด์

Highslide เป็นเครื่องมือพิเศษสำหรับการดูภาพ สื่อ และแกลเลอรี่

กล่องสี

ปลั๊กอินขนาดเล็กสำหรับ jQuery 1.3+

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

PrettyPhoto รองรับไม่เพียงแต่รูปภาพเท่านั้น แต่ยังรองรับวิดีโอ, แฟลช, YouTube และ Ajax อีกด้วย ไลท์บ็อกซ์สำหรับไฟล์มีเดีย

Slimbox 2 – โคลนของ Light box 2 ขนาด 4 KB ใช้งานโดยใช้ jQuery

Shadowbox เป็นส่วนเสริมบนเว็บสำหรับการดูไฟล์สื่อที่รองรับรูปแบบยอดนิยมทั้งหมด Shadowbox เขียนด้วย JavaScript และ CSS และสามารถปรับแต่งได้สูง

Pirobox ขยาย V.1.0.

ข้อดีอย่างหนึ่งของปลั๊กอินนี้คือความสามารถในการเปิดไฟล์ทุกประเภทตั้งแต่ไฟล์ทดแทนไปจนถึงไฟล์ .swf จากรูปภาพธรรมดาไปจนถึงไฟล์ .pdf

ความสามารถอัศจรรย์อื่นๆ: การเปลี่ยนขนาดภาพอัตโนมัติและการรองรับเทคโนโลยี "ลากแล้วโยน"

GrayBox สามารถใช้แสดงเว็บไซต์ การแสดง และสถานที่อื่นๆ ได้

Super Box เป็นปลั๊กอินที่แสดงหน้าต่างพร้อมเอฟเฟกต์ไลท์บ็อกซ์

ไลท์บ็อกซ์มีขนาดเล็ก ไลบรารีจาวาสคริปต์ซึ่งใช้แสดงภาพสวยๆ ในหน้าเดียวกัน ติดตั้งง่ายและใช้งานได้กับเบราว์เซอร์ปัจจุบันทั้งหมด

สคริปต์ช่วยให้คุณสามารถแสดงภาพเพียงอย่างเดียวหรือเป็นระยะ ๆ ตรงกลางหน้าต่างท่อระบายน้ำ

คำแนะนำสำหรับ Wikoristan

ส่วนที่ 1: การเชื่อมต่อห้องสมุด

1. ดาวน์โหลดและแตกไฟล์เก็บถาวรด้วยสคริปต์ zvidsi

2. ค้นหาไฟล์จากโฟลเดอร์ JS jquery-1.10.2.min.jsі ไลท์บ็อกซ์-2.6.min.jsจากนั้นคัดลอกไปยังโฟลเดอร์ที่มีสคริปต์ของคุณบนเว็บไซต์ของคุณ

3. เชื่อมต่อสคริปต์เหล่านี้กับเพจของคุณ ซึ่งเขียนไว้ระหว่างแท็ก แถวที่ก้าวหน้า:

4. ในโฟลเดอร์ css ให้ค้นหาไฟล์ lightbox.css และคัดลอกไปยังโฟลเดอร์ที่มีไฟล์สไตล์

5. เชื่อมต่อไฟล์นี้กับเพจของคุณโดยการเขียนระหว่างแท็ก แถวที่ก้าวหน้า:

6. จากโฟลเดอร์ img ให้คัดลอกไฟล์ต่อไปนี้ไปยังเซิร์ฟเวอร์ไปยังโฟลเดอร์ที่มีรูปภาพการออกแบบเว็บไซต์ของคุณ: ถัดไป.png- ไฟล์เหล่านี้ถูกปรับแต่งจากไฟล์สไตล์ไลท์บ็อกซ์.css -เมื่อเสร็จแล้ว ไฟล์สไตล์จะขยายเป็นรูปภาพ ซึ่งแสดงในโฟลเดอร์ img ซึ่งอยู่ในโฟลเดอร์เดียวกันกับโฟลเดอร์ css หากโฟลเดอร์รูปภาพและโฟลเดอร์สไตล์ของคุณอยู่ในนั้นอย่างแน่นอน

ในโฟลเดอร์ต่างๆ

จากนั้นเปลี่ยนเค้าโครงเป็นรูปภาพในไฟล์ lightbox.css ที่อยู่ด้านนอก ส่วนที่ II: การแทรกรูปภาพบนเพจสคริปต์นี้ขอให้คุณคลิกที่คำขอ ข้อความอาจเป็นข้อความหรือรูปภาพก็ได้ เพื่อที่จะบอกสคริปต์ว่าข้อความอาจถูกประมวลผลได้ จำเป็นต้องเพิ่มคุณลักษณะให้กับข้อความ

ข้อมูลไลท์บ็อกซ์

และเขียนความหมายใดก็ตามลงไป

รูปคนเดียว.

ข้อความคูณ 1 ข้อความคูณ 2 ข้อความคูณ 3

* สามารถกำหนดแอตทริบิวต์ชื่อให้กับป้ายกำกับได้ หากมีรายการใดรายการหนึ่งจะแสดงใต้ภาพเบลอแทน

และเขียนความหมายใดก็ตามลงไป

รูปหมู่ครับ.

สมมติว่าคุณมีกลุ่มรูปภาพที่ถูกกดทีละภาพ และคุณต้องการให้หน้าต่าง Spill สามารถเบิร์นรูปภาพทั้งหมดในกลุ่มนั้นได้โดยไม่ต้องปิดหน้าต่าง Spill

*ก่อนหน้านี้ สำหรับสคริปต์ LiteBox คุณใช้แอตทริบิวต์ rel="lightbox" คุณยังสามารถเปลี่ยนได้พร้อมกัน และคุณยังใช้แอตทริบิวต์ใหม่ที่ให้ความยืดหยุ่นมากขึ้นได้ด้วย คุณได้รับทุกสิ่ง คุณสามารถทำทุกอย่าง และ:หากมีกลุ่มรูปภาพเกิดขึ้นจากรูปภาพ เมื่อคุณดูที่หน้าต่างป๊อปอัปใต้รูปภาพ "ภาพที่ 1 จาก 8".

-

แต่ฉันอยากจะเรียนรู้เพิ่มเติมเกี่ยวกับบางสิ่งบางอย่าง

ในการดำเนินการนี้ในไฟล์ lightbox-2.6.min.js ในแถวที่ 13 คุณต้องเปลี่ยนแกน:

ส่งคืน "รูปภาพ " +b +" ของ " +c

ส่งคืน "รูปภาพ" + b + "z" + c

เนื่องจากเรามีรูปภาพที่แตกต่างกัน 2 กลุ่มบนเพจ ตัวอย่างเช่น รูปภาพกลุ่มแรกมีคำบรรยาย (แทนที่แอตทริบิวต์ title) และในอีกกลุ่มแอตทริบิวต์ title มีค่าว่างหรือไม่มีคำอธิบายเลย แล้วเมื่อดูภาพโดยไม่มีคำอธิบาย (ถ้าขึ้นกับ ใครที่เราดู อย่างน้อยหนึ่งภาพพร้อมคำอธิบาย) เรายังคงเห็นคำอธิบายของภาพที่เหลือที่เราดู จากนั้นสคริปต์ควรจะล้างชื่อเรื่องของหน้าต่างที่ระบายออกและแทนที่ด้วยอันใหม่อย่างเห็นได้ชัด แยกเซวิปราวิติ?

หากต้องการแก้ไขปัญหาการไม่ล้างแอตทริบิวต์ Title ของแทร็กในไฟล์ lightbox-2.6.min.js ในแถวที่ 219 ให้แทนที่ข้อความ:

if (typeof this.album.title !== "unknown" amp;amp;amp;amp;amp;amp; this.album.title !== "") ( this.$lightbox.find(".lb-caption ").html(this.album.title).fadeIn("fast") )

เป็นเรื่องมหัศจรรย์อย่างแท้จริงที่เทคโนโลยีเว็บใหม่ๆ พร้อมให้บริการแก่เรามากขึ้นเรื่อยๆ ซึ่งจะทำให้งานของเราจะง่ายขึ้นมาก หน้าต่างโมดอลเป็นองค์ประกอบการทำงานสำหรับการแสดงเนื้อหา HTML ทุกประเภท การวางแนวตามการออกแบบและอินเทอร์เฟซด้วยตนเอง

จากการตรวจสอบนี้ เราได้รวบรวมรายการไลบรารีและสคริปต์ JQuery สำหรับการสร้างไลท์บ็อกซ์ที่จะช่วยให้นักพัฒนาและนักออกแบบสร้างเว็บไซต์ที่ชัดเจนและเป็นมืออาชีพยิ่งขึ้น

คุณสามารถเพิ่มสคริปต์ด้านล่างลงในเว็บไซต์ของคุณได้อย่างง่ายดาย เพื่อเป็นการไม่ให้เสียเวลา เรามาดู Super JQuery – ไลบรารีไลท์บ็อกซ์ที่คุณสามารถใช้เพื่อขยายคลังแสงของคุณกันดีกว่า

1. โฟโต้สไวป์

PhotoSwipe เป็นแกลเลอรีรูปภาพ HTML ที่ใช้ CSS และ JavaScript ออกแบบมาโดยเฉพาะสำหรับอุปกรณ์มือถือ ในการพัฒนานี้ผู้เขียนได้นำภาพสำหรับโทรศัพท์มือถือมาเป็นตัวอย่างของบริการ อุปกรณ์ iOSฉัน Google PhotoSwipe มีอินเทอร์เฟซที่คุ้นเคยและใช้งานง่าย ซึ่งช่วยให้จัดการรูปภาพบนเว็บไซต์บนมือถือของคุณได้ง่ายขึ้น

รองรับฟังก์ชันพื้นฐานทั้งหมด: การเปลี่ยนไปใช้รูปภาพด้านหน้าหรือด้านหน้า การขยาย การยืด การเปลี่ยนหรือการปิด และอื่นๆ

2. ปัดนิ้ว

Swipebox - JQuery - ปลั๊กอินสำหรับคอมพิวเตอร์เดสก์ท็อป สมาร์ทโฟน และแท็บเล็ต รองรับการนำทางแบบสัมผัสสำหรับอุปกรณ์มือถือ การนำทางสำหรับแป้นพิมพ์เพิ่มเติมสำหรับอุปกรณ์เดสก์ท็อป การเปลี่ยน CSS จากสวิตช์สำรองไปเป็นการนำทาง JQuery และติดตั้งง่าย

ปลั๊กอินสำหรับการประท้วงใน Chrome, Safari, Firefox, Opera, อินเทอร์เน็ตเอ็กซ์พลอเรอร์ 8+, iOS4+, แอนดรอยด์, วินโดว์โฟน-

เผยแพร่ภายใต้ใบอนุญาต MIT

3. ไอไลท์บ็อกซ์ iLightBox ช่วยให้คุณสร้างการ์นีแบบปรับได้ได้อย่างง่ายดายหน้าต่างโมดอล , vikorystyuchi JQuery . ด้วยการรองรับเนื้อหาสื่อที่หลากหลายด้วยสกินที่น่าทึ่งและ API ที่มีประโยชน์ iLightBox มุ่งหวังที่จะสร้างไลท์บ็อกซ์เดสก์ท็อปให้เหมาะสมที่สุดเท่าที่จะเป็นไปได้ iLightBox นำเสนอความสามารถในการดูในโหมดเต็มหน้าจอ สกินขนาด Retina การควบคุมหน้าจอสัมผัส ความสามารถในการรวม YouTube และ Vimeo สำหรับวิดีโอ HTML5 และ JavaScript API ที่แข็งแกร่ง ปลั๊กอินอาจการสนับสนุนที่ปราศจากแมว

และเวอร์ชันที่อัปเดต

4. ไลท์บ็อกซ์รูปภาพ

Image Lightbox เป็นปลั๊กอินที่เรียบง่าย ขยายได้ และปรับแต่งได้สำหรับ IOS, Android และ Windows Phone คุณสามารถใช้แป้นพิมพ์เพื่อเปลี่ยนรูปภาพและเปลี่ยนการเปลี่ยน CSS ได้

5.ป๊อปอัปอันงดงาม ป๊อปอัปอันงดงาม - ไม่มีค่าใช้จ่าย jQuery ที่ตอบสนอง

ปลั๊กอินที่เน้นไปที่การสร้างความมั่นใจในการโต้ตอบที่รวดเร็วที่สุดระหว่างระบบและอุปกรณ์ สำหรับปลั๊กอินไลท์บ็อกซ์ส่วนใหญ่ คุณต้องระบุขนาดหน้าต่างโดยใช้ JS เพิ่มเติม ด้วยป๊อปอัป Magnific คุณสามารถปรับแต่งหน่วยการแสดงผล เช่น EM หรือเปลี่ยนขนาดไลท์บ็อกซ์โดยใช้คำสั่งสื่อ CSS

6. นิโวไลท์บ็อกซ์ Nivo Lightbox เป็นปลั๊กอินไลท์บ็อกซ์ที่ยอดเยี่ยม เมื่อคุณเลือกตัวเลือก จะมีตัวเลือกที่ไม่ใช่ส่วนบุคคล ซึ่งคุณสามารถเปลี่ยนแปลงได้อย่างง่ายดายรูปลักษณ์ภายนอก

ไลท์บ็อกซ์ ตัวอย่างเช่น เปลี่ยนธีม เอฟเฟกต์การเปลี่ยน และวิธีการนำทาง

7.เคสไลท์

Lightcase เป็นปลั๊กอินไลท์บ็อกซ์ที่ยืดหยุ่น ปรับเปลี่ยนได้ และขยายได้ ซึ่งสนับสนุนโดย JQuery มันทำงานได้อย่างน่าอัศจรรย์ในเบราว์เซอร์ยอดนิยมทั้งหมด เช่น Internet Explorer 7+, Firefox, Opera, Webkit และอื่นๆ ปลั๊กอินรองรับการโทรรูปภาพ, วิดีโอ, วิดีโอ HTML5, Iframe, SWF และ AJAX

LightLayer เป็นสคริปต์สำหรับการแสดงไลท์บ็อกซ์แบบปรับได้ซึ่งทำงานได้ดีร่วมกับส่วนประกอบอื่นๆ บนหน้าจอใดก็ได้ จริงๆ แล้วสคริปต์นี้เรียบง่ายมากจาก Vikoristan LightLayer ให้การควบคุมพารามิเตอร์จำนวนหนึ่ง: สีและความมืดของพื้นหลัง ตำแหน่งไลท์บ็อกซ์ การเปิด/ปิดการเปลี่ยนภาพ และฟังก์ชันอื่น ๆ อีกมากมายที่สามารถกำหนดค่าได้

9. Strip.js

Strip ไม่ใช่ไลท์บ็อกซ์ซึ่งจะไหม้ด้านข้างเล็กน้อย รบกวนน้อยกว่าและช่วยให้สามารถโต้ตอบกับองค์ประกอบอื่นๆ ของหน้าได้ หน้าจอที่ยอดเยี่ยม- บนอุปกรณ์เคลื่อนที่ ไลท์บ็อกซ์อาจดูคลาสสิก

-

Strip ขึ้นอยู่กับ JQuery และได้รับการสนับสนุนในเบราว์เซอร์หลักทั้งหมด 10. ฟลูอิดบ็อกซ์ Fluidbox เป็นปลั๊กอิน jQuery ที่ได้รับการขยายเพื่อให้ไลท์บ็อกซ์ตอบสนองที่ไม่รบกวนซึ่งเหมาะสำหรับรูปภาพขนาดใหญ่ มันทำงานได้ดีบนอุปกรณ์พกพาและยังสามารถติดอยู่บนหน้าจอขนาดใหญ่ได้อีกด้วย

อาคารสูงแยก

เพื่อการรับชม พรรณนา 11. ขนนก , 100 Featherlight - ปลั๊กอินน้ำหนักเบามากราคา 400แถวจาวาสคริปต์

แถว CSS

และมีขนาดไม่เกิน 6Kb ไลท์บ็อกซ์อัจฉริยะที่ปรับเปลี่ยนได้ รองรับรูปภาพ, AJAX และ iframe คุณยังสามารถปรับให้เข้ากับความต้องการของคุณได้ Featherlight ใช้งานได้กับ IE8+ เบราว์เซอร์ปัจจุบันและแพลตฟอร์มมือถือทั้งหมด 12. ยาลบ์).

Yalb ถูกถอดรหัสเป็นไลท์บ็อกซ์อีกอันหนึ่ง (Yet Another Lightbox) แต่ก็ไม่เป็นเช่นนั้น Yalb มาพร้อมกับอินเทอร์เฟซที่หลากหลายซึ่งรวมถึงอินเทอร์เฟซผู้ใช้ที่ช่วยให้คุณสามารถกำหนดระบบของคุณได้ (
เปิดปิด

สคริปต์จัดระเบียบการดูภาพในหน้าต่างท่อระบายน้ำ บทวิจารณ์สามารถจัดเรียงตามรูปภาพเดียวหรือตามแกลเลอรีรูปภาพที่แสดงผ่านหน้าต่างป๊อปอัป

І รหัสเอชทีเอ็มเขียนโค้ดบนหน้า
Ostanniy krok

-
รูปภาพของวิดีโอ

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

ดังที่คุณทราบรูปภาพทั้งหมดสามารถดูได้ที่หน้าต่างที่รั่วเป็นเศษเล็กเศษน้อย ส่วนที่ II: การแทรกรูปภาพบนเพจทุกคนมีอันใหม่
หากคุณต้องการแบ่งปันรูปภาพโดยไม่ทำให้เกิดกลิ่นเหม็น ให้ปรับแต่งโค้ดนี้

ตอนนี้ภาพผิวหนังเปิดขึ้น ดังนั้นจึงไม่มีความเป็นไปได้ที่จะเกิดความร้อนสูงเกินไปก่อนเริ่มมีอาการ

เวอร์ชันอัปเกรดมีอะไรบ้าง?

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

สำหรับสคริปต์มาตรฐาน ฟังก์ชันนี้จะป้องกันอันตราย และสามารถใช้ได้เฉพาะในสถานการณ์ที่สิ้นหวังเท่านั้น
ขอแสดงความนับถือ 3 กระทู้ว่างๆ ครับ กลิ่นเหม็นไปปรากฏบนภาพใหญ่ๆ แต่ไม่มีอะไรอยู่ระหว่างแท็ก และ 1 กระทู้ก็เต็มไปด้วยภาพ
เป็นผลให้มีเพียงภาพเดียวเท่านั้นที่มองเห็นได้ในเบราว์เซอร์ เมื่อคลิกภาพนั้น รูปภาพขนาดใหญ่จะเปิดขึ้นและรูปภาพทั้งหมดจะถูกดึงเข้าด้วยกันจากข้อความที่ไม่จำเป็น และคุณสามารถซ่อนได้
และน่าแปลกใจที่ข้อความมีรูปภาพใหม่สองภาพ (เห็นเป็นสีแดง) และหากคุณกำลังพูดอยู่ คุณจะเห็นรูปภาพใหม่สองภาพ

หากในแอปพลิเคชันเฉพาะคุณเปิดใช้งานการเลือกรายการที่ซ้ำกัน รูปภาพที่จะทำซ้ำจะไม่แสดงขึ้นมา

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

ความคิดเห็น
12/11/2014 วิคเตอร์ สคริปต์ยังแย่กว่านี้อีก สำหรับข้อมูลเพิ่มเติม-ชื่อเรื่อง คุณสามารถอธิบายรูปภาพได้ ฉันมีปัญหากับ Windows ฉันมีสคริปต์ที่ด้านข้างซึ่งแขวนบล็อกไว้ด้านข้างเมื่อเชื่อมต่อมอบให้กับสคริปต์

ไวน์ของฉันกำลังจะหายไป นอกจากนี้ค่าจะหายไปเมื่อมีการเชื่อมต่อสคริปต์ js การคิดผ่านเวอร์ชั่นของความขัดแย้งนั้นไม่ได้ผ่านพวกเขา
23/05/2015 วิคเตอร์
ฉันไม่มีงานทำถ้า
href="http://ikk.secrieru.ru/products/Gallery/000039.jpg?ver=20150523142822"
ดูเหมือนว่านี้ ไม่มี?ver=20150523142822

ปราซึตยู
25/05/2558 ครับ

ขอบคุณมาก
29/06/2015 อังเดร

ฉันซาบซึ้งมากสำหรับงานของคุณ! ทุกอย่างได้รับการร้องขอจริงในครั้งแรก)
ได้ลองใช้แอนะล็อกที่หลากหลาย ปราศจากความขัดแย้ง เรื่องนี้ก็ดำเนินไปอย่างตรงไปตรงมา ปรับปรุงให้เป็นต้นฉบับ ขนาดเท่าไส้ เหมือนเป็นพี่น้องกับหมี ทำลายทุ่งนาก็ตกนรก

11.01.2015 อิกอร์
ไปกันเถอะ!
แกลเลอรี่มหัศจรรย์ ขอบคุณมาก.
เพียงเท่านี้:
ณ มุมมอง (3 ภาพ) ภาพจะปรากฏเป็นวงกลม แต่ใน lightbox-2.7.1 เวอร์ชันปัจจุบัน ฟังก์ชันนี้ใช้ไม่ได้ หลังจากดูภาพที่เหลือเป็นเวลาหนึ่งชั่วโมง ปุ่มจะไม่ปรากฏขึ้น
กรุณาบอกฉันหน่อยว่าอะไรคือสาเหตุ?

14/11/2015 แอนตัน

15/11/2015 แอนตัน
บน IOS และ Android หน้าจอที่มืดจะไม่แสดงทั้งด้าน! ปัญหาอาจเกิดจากอะไร? สำหรับ LightBox ดั้งเดิม ทุกอย่างเรียบร้อยดี!

15/11/2015 แอนตัน
บน IOS และ Android หน้าจอที่มืดจะไม่แสดงทั้งด้าน! ปัญหาอาจเกิดจากอะไร? สำหรับ LightBox ดั้งเดิม ทุกอย่างเรียบร้อยดี!

30/03/2016 แอนตัน
ไปกันเถอะ!
จะทำได้อย่างไรให้คนเห็นภาพมากที่สุด?

11/18/2016 ยูรา
ยิ่งใหญ่ยิ่งขึ้น! ทุกอย่างทำงานได้อย่างน่าอัศจรรย์!

05/04/2017 อิกอร์
ขอบคุณมากสำหรับสคริปต์! ฉันมองหาสิ่งที่คล้ายกันมานานแล้วและติดตั้งง่าย
มีเพียงฉันเท่านั้นที่รู้สึกว่าใต้ภาพถ่ายมีข้อความโง่ ๆ ปรากฏขึ้น P 8 8 8 8 8 8 8 8 8 8

จำเป็นต้องมีรหัสที่นี่หรือไม่?

09.12.2017 บาร์สุข
ก่อนหน้านี้คุณอยู่ที่ไหน? ฉันใช้เวลาทั้งวันพยายามสร้างรายการที่ซ้ำกัน))

ฉันแค่ต้อง หน้าหลักการแสดงตัวอย่างภาพหลัก และที่ด้านล่างมีภาพขนาดย่อเพิ่มเติมน้อยลงอีก ซึ่งเกิดจากการซ้ำกันในแกลเลอรี

ไลบรารีที่ได้รับความนิยมมากที่สุดคือ Lightbox Javascript ซึ่งใช้กันอย่างแพร่หลายบนเดสก์ท็อปมากกว่าบนแพลตฟอร์มมือถือ

ฉันขอนำเสนอปลั๊กอินไลท์บ็อกซ์ 14 รายการพร้อมรองรับแพลตฟอร์มมือถือ

PhotoSwipe

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

• ด้วยการเปลี่ยนผ่านที่ราบรื่นห้องสมุดที่จำเป็น:
• เลขที่.รองรับเบราว์เซอร์:
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

ใบอนุญาตเอ็มไอที

ป๊อปอัปอันงดงาม

• ด้วยการเปลี่ยนผ่านที่ราบรื่น Magnific Popup เป็นปลั๊กอินไลท์บ็อกซ์อีกตัวที่พัฒนาโดยผู้เขียนคนเดียวกับ PhotoSwipe, Dmitry Semenov ปลั๊กอินนี้มาพร้อมกับรูปลักษณ์ปลั๊กอิน JQuery/Zepto และยังรองรับเช่นเดียวกับ PhotoSwipe เช่น การสนับสนุนวิดีโอ แผนที่ และ Ajax นี่เป็นทางเลือกที่ยอดเยี่ยมสำหรับผู้ที่ให้ความสำคัญกับพลังที่มีอยู่มากกว่า
• เลขที่. JQuery 1.9.1+ หรือ Zepto.js
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

IE7 (โดยเฉพาะ), .

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

ไลท์บ็อกซ์สำหรับ Bootstrap

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

• ห้องสมุดที่จำเป็น: โมดูล JQuery และ Bootstrap
• เลขที่. IE8+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาตกนู

นิโว ไลท์บ็อกซ์

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

• ห้องสมุดที่จำเป็น: เจเคอรี่
• เลขที่.
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

รูปภาพไลท์บ็อกซ์

ImageLightbox เป็นปลั๊กอินไลท์บ็อกซ์ธรรมดาที่ไม่มีเสียงระฆังและนกหวีด ใช้สำหรับรูปภาพ ชื่อเรื่อง และชื่อเท่านั้น ไม่รองรับวิดีโอหรือประเภทอื่นใด นอกจากนี้ยังไม่ต้องการมาร์กอัป HTML เพิ่มเติม แท็ก เพียงพอแล้ว ปลั๊กอินนี้เรียบง่ายสำหรับโรบ็อต

• ห้องสมุดที่จำเป็น: เจเคอรี่
• เลขที่. IE9+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆไม่ได้รับมอบหมาย

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

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

• ห้องสมุดที่จำเป็น: เลขที่
• เลขที่. Internet Explorer 10+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

ไลท์เคส

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

• ด้วยการเปลี่ยนผ่านที่ราบรื่นเจคิวรี่
• เลขที่. IE9+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต GPL

แสงขนนก

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

• ห้องสมุดที่จำเป็น: เจเคอรี่
• เลขที่. IE8+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

ไลท์เลเยอร์

LightLayer เป็นปลั๊กอินไลท์บ็อกซ์ที่เรียบง่ายและใช้งานง่าย ปลั๊กอินรองรับตัวเลือกที่ไม่ใช่ส่วนตัว วิธีการจาวาสคริปต์และ koristuvalnitskikh podіy ปลั๊กอินใช้งานได้กับรูปภาพ วิดีโอ แผนที่

• ด้วยการเปลี่ยนผ่านที่ราบรื่นเจคิวรี่
• เลขที่. IE9+, Chrome, Firefox, Safari และ Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

ไลท์แกลลอรี่

LightGallery ปลั๊กอินไลท์บ็อกซ์อีกตัวที่มี ปริมาณมากฟังก์ชั่น.

• ห้องสมุดที่จำเป็น: เจเคอรี่
• เลขที่.มันมีตัวเลือกมากกว่า 20 ตัวเลือกสำหรับการปรับแต่งส่วนต่างๆ ของเอฟเฟกต์ไลท์บ็อกซ์
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

IE7+, Chrome, Firefox, Safari, Opera, IOS, Android และ Windows Phone

ปลั๊กอินไลท์บ็อกซ์ Fluidbox ใช้งานได้กับรูปภาพ รวมการรองรับมุมมองที่หลากหลาย รวมถึงรูปภาพลอย รูปภาพตำแหน่งที่แน่นอน รูปภาพขอบและขอบ และแกลเลอรี นี่เป็นปลั๊กอิน WordPress ด้วย

• ด้วยการเปลี่ยนผ่านที่ราบรื่นเจคิวรี่
• เลขที่. IE9+, Chrome, Firefox, Safari, Opera
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาต:

สตริปJS

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

• ห้องสมุดที่จำเป็น: เจเคอรี่
• เลขที่. IE7+, Chrome, Firefox, Safari, Opera, IOS 5+ และ Android 3+
• IE8+, Chrome, Firefox, Safari, Opera และเบราว์เซอร์มือถืออื่นๆใบอนุญาตครีเอทีฟคอมมอนส์ BY-NC-ND 3.0