วิธีใช้ปลั๊กอิน WordPress Lightbox ที่ตอบสนองต่อ

เผยแพร่แล้ว: 2022-10-03

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

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

ฉันจะใช้ไลท์บ็อกซ์และคลังภาพที่ตอบสนองบน WordPress ได้อย่างไร

เครดิต: justfreewpthemes.com

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

ด้วย ปลั๊กอิน Responsive Lightbox และ Gallery คุณสามารถสร้างแกลเลอรีของคุณเองได้อย่างรวดเร็ว ปลั๊กอินนี้ทำให้ไซต์ WordPress ทุกแห่งใส่รูปภาพ วิดีโอ และเนื้อหา HTML ในรูปแบบอื่นๆ ได้อย่างง่ายดาย ทำให้เป็นส่วนเสริมในอุดมคติ คุณสามารถสร้างแกลเลอรี่ที่สวยงามและเปลี่ยนสไตล์ที่คุณต้องการได้ทันทีโดยใช้ตัวสร้างแกลเลอรีแบบลากและวาง คุณสามารถใช้ปลั๊กอินนี้เพื่อทำให้รูปภาพโดดเด่น เนื่องจากใช้งานง่าย กำหนดค่า และไม่มีค่าธรรมเนียมแอบแฝง แอปนี้มีคุณสมบัติที่น่าทึ่ง เช่น Drag-and-Drop Gallery Builder ซึ่งคุณก็ยังใช้ได้ ด้วยปลั๊กอิน Responsive Lightbox และ Gallery คุณสามารถสร้างแกลเลอรีแบบไดนามิกได้อย่างรวดเร็วและง่ายดายด้วยเครื่องมือที่มีประสิทธิภาพ ไลท์บ็อกซ์และแกลเลอรี Respive เข้ากันได้อย่างสมบูรณ์กับเครื่องมือสร้างเพจ เช่น Visual Composer, Divi, Elementor, Beaver Builder และอื่นๆ อีกมากมาย

คุณสามารถเพิ่มเอฟเฟกต์ไลท์บ็อกซ์ลงในองค์ประกอบใดๆ ใน WordPress ได้โดยอัตโนมัติ เช่น รูปภาพ ลิงก์วิดีโอ และอื่นๆ เมื่อใช้ WordPress Media Manager คุณสามารถดูรูปภาพ CC0 ฟรีนับล้านจากแหล่งต่างๆ เช่น Unsplash, Pixabay, Flickr และ Instagram ปลั๊กอิน Responsive Lightbox and Gallery เป็นปลั๊กอินแกลเลอรี WordPress น้ำหนักเบาที่ออกแบบมาเพื่อประสิทธิภาพและความเร็ว ตัวสร้างแกลเลอรีในตัวทำให้ง่ายต่อการสร้างแกลเลอรีแบบโต้ตอบแบบมืออาชีพที่ทุกคนสามารถเข้าถึงได้ด้วยเว็บเบราว์เซอร์ เราได้ลดราคาของชุดรวมนี้เหลือ 70% ดังนั้นคุณจึงสามารถรับส่วนขยายพรีเมียมทั้งหมด การสนับสนุนโดยตรง 1 ปี และอัปเดตได้ฟรี

วิธีใช้ไลท์บ็อกซ์และแกลเลอรีที่ตอบสนองใน WordPress

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

ฉันจะเชื่อมโยงไลท์บ็อกซ์กับ WordPress ได้อย่างไร

เครดิต: WordPress

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

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


ไลท์บ็อกซ์ที่ตอบสนอง Html

เครดิต: www.codingnepalweb.com

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

วิธีสร้างไลท์บ็อกซ์ด้วยป๊อปอัปอันงดงาม

โปรดระบุข้อมูลต่อไปนี้ในส่วนหัวของไฟล์ HTML: *br. สไตล์ชีตคือชีตที่แสดงในเมนูสไตล์ (rel=stylesheet) type=text/css ตามด้วยชื่อ วางบรรทัดต่อไปนี้ใน 'body' ของเอกสารของคุณ
div id=magnific-คอนเทนเนอร์. เพิ่มข้อมูลต่อไปนี้ในแถบประเภท div: br. Adiv class=”magnific-popup” โปรดป้อน URL ต่อไปนี้ในแท็ก *div>: ต่อไปนี้เป็นคลาส div div=”magnific-slide-show”; นอกจากนี้ ต่อไปนี้คือ div class div เพิ่มสิ่งต่อไปนี้ในตัวจัดการเหตุการณ์สำหรับไลท์บ็อกซ์: *br $(document).ready(function()br>). (*) ('.magnific-slide-show').magnific(); (*) br>. นั่นแหละ! ตอนนี้เสร็จเรียบร้อยและใช้งานได้แล้ว

การสาธิตแกลเลอรีไลท์บ็อกซ์ที่ปรับเปลี่ยนตามอุปกรณ์

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

ไลท์บ็อกซ์ประกอบด้วยแอนิเมชั่น Stroke หน้าต่างแสดงตัวอย่างรูปภาพ และเลย์เอาต์แกลเลอรีสองหน้า นอกจากนี้ยังช่วยในการปรับขนาดภาพตามความละเอียดหน้าจอ คุณยังสามารถอัปโหลดแกลเลอรีไลท์บ็อกซ์ไปยังหน้าหรือโพสต์ใดก็ได้โดยใช้รหัสย่อ [SLGF id=xx] บนไซต์ WordPress ของคุณ [ 23-07-2021]. การทดสอบทำงานบน WordPress เวอร์ชัน 5.6 ส่วนการเพิ่มประสิทธิภาพโค้ดและการแก้ไขจุดบกพร่องของกระบวนการนี้ [ 05-03-2020] ห้องสมุดของ Bootstrap เพิ่งได้รับการปรับปรุง

เพิ่มตัวเลือกใหม่ในการปรับแต่งสีของชื่อแกลเลอรีและปุ่มคัดลอกรหัสย่อ หากคุณต้องการเพิ่มป้ายสี ให้ไปที่เมตาบ็อกซ์ ต้องอัปเดตไลบรารี Bootstrap ที่ส่วนหน้า โปรดอัปเดตลิงก์การตรวจสอบ เวอร์ชันนี้เข้ากันได้กับการอัปเดตและทดสอบปลั๊กอิน WP 4.9.6 - 1.5.16 คุณสามารถใช้ Custom Css Editor เพื่อแก้ไขได้ ควรเพิ่มข้อมูลต่อไปนี้ลงในหน้าผลิตภัณฑ์และคำแนะนำ ลิงก์ดูการสาธิตได้รับการอัปเดตแล้ว หลังจากอัปเกรด คุณจะสามารถใช้ปุ่ม Pro ได้

แกลเลอรีไลท์บ็อกซ์: ปลั๊กอินแกลเลอรีที่ง่ายที่สุดในการใช้งาน

ทุกวันนี้ เป็นการยากที่จะประเมินค่าพลังของ ปลั๊กอินแกลเลอรี สูงเกินไป พวกเขาทำให้ง่ายต่อการสร้างแกลเลอรีที่สวยงามและเต็มไปด้วยคุณลักษณะที่น่าสนใจและดึงดูดสายตาสำหรับผู้เยี่ยมชมของคุณ Lightbox Gallery เป็นปลั๊กอินที่ยอดเยี่ยมสำหรับ WordPress ที่ใช้งานง่ายและใช้เวลาตั้งค่าเพียงเล็กน้อยหรือไม่มีเลย

ตัวเลื่อนพร้อมไลท์บ็อกซ์ — ปลั๊กอิน WordPress

มีตัวเลื่อนสองสามตัวพร้อม ปลั๊กอินไลท์บ็อกซ์ สำหรับ WordPress แต่ละรายการมีคุณลักษณะเฉพาะของตัวเอง แต่ทั้งหมดช่วยให้คุณสามารถสร้างตัวเลื่อนที่สวยงามและตอบสนองได้พร้อมเอฟเฟกต์ไลท์บ็อกซ์

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

ไลท์บ็อกซ์ของ Nextend รองรับการเล่นทั้งวิดีโอ MP4 และ YouTube อุปกรณ์มือถือไม่สามารถแสดงเนื้อหา iframe ได้เนื่องจากข้อจำกัด ความสามารถของ Smart Slider 3 ในการเปิดวิดีโอ YouTube แบบไลท์บ็อกซ์จะเป็นการเปิดแอป YouTube โดยอัตโนมัติ วิดีโอจะไม่แสดงจนกว่าจะเปิดตัวไลท์บ็อกซ์ ทำให้เวลาในการโหลดสั้นลงมาก