โฮมเพจ » ออกแบบเว็บไซต์ » สไลด์โชว์ Lightbox แบบเต็มหน้าจอด้วย Lightgallery.js

    สไลด์โชว์ Lightbox แบบเต็มหน้าจอด้วย Lightgallery.js

    บล็อกหรือเว็บไซต์ผลงานยอดเยี่ยมใด ๆ สามารถได้รับประโยชน์จาก สไลด์โชว์ Lightbox ที่เป็นกิริยาช่วย. นี่อาจเป็นสิ่งที่ดีสำหรับ การจัดแสดงภาพถ่ายที่เกี่ยวข้อง หรือปล่อยให้ผู้เยี่ยมชม เรียกดูผลงาน (การออกแบบศิลปะการถ่ายภาพ).

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

    ฉันชอบปลั๊กอินนี้มากกว่าสไลด์โชว์อื่น ๆ ที่ใช้เวลาเพียงบางส่วนของหน้าจอ ด้วย lightgallery.js, โฟกัสทั้งหมดจะเข้าสู่สไลด์โชว์ และภาพแรกที่มองเห็นได้.

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

    ที่มุมบนขวาคุณจะเห็น ชุดของปุ่ม สำหรับ คุณสมบัติเพิ่มเติม. ในการสั่งซื้อพวกเขาไปเช่นนี้:

    • เล่นสไลด์โชว์
    • ซูมเข้า / ออก
    • เบราว์เซอร์เต็มหน้าจอ
    • การแบ่งปันทางสังคม
    • ดาวน์โหลดรูปภาพ
    • ปิดสไลด์โชว์

    คุณสามารถเลือกและเลือกปุ่มเหล่านี้ที่คุณต้องการให้แสดง การแก้ไขตัวเลือก เมื่อคุณเรียกใช้ปลั๊กอิน.

    ในความเป็นจริงฉันปลิวไปตามรายละเอียดเท่าไหร่ลงในเอกสาร มันมีรายละเอียดสำหรับ ตัวเลือก และ วิธีการโทรกลับ. แต่คุณจะพบข้อมูลสำหรับ แอตทริบิวต์ข้อมูลที่กำหนดเอง, ตัวแปร Sass, และแม้กระทั่ง API ปลั๊กอิน เพื่อสร้างโมดูลบน Lightgallery.

    โอ้และฉันก็พูดถึงมัน เป็นมิตรกับมือถืออย่างสมบูรณ์? คุณสามารถปัดภาพถ่ายผ่านแกลเลอรีด้วยนิ้วของคุณหรือแม้กระทั่งด้วยเมาส์.

    เป็นตัวเลือกที่สมบูรณ์แบบสำหรับนักออกแบบหรือช่างภาพที่ต้องการวิธีการที่ยอดเยี่ยมในการแสดงผลงานของพวกเขาบนเว็บไซต์ของพวกเขา.

    คุณสามารถทำได้ ฝัง iframes หรือวิดีโอ จากเว็บไซต์เช่น YouTube หรือ Vimeo นี่คือปลั๊กอินแกลเลอรีไลท์บ็อกซ์ที่ดีที่สุดที่นำเสนอประสบการณ์การใช้งานที่ดีที่สุด.

    ห้องสมุดนี้คือ ฟรีจากการอ้างอิงทั้งหมด และมัน ทำงานบน JavaScript ที่แท้จริง. แต่มัน เล่นได้ดีกับห้องสมุดขนาดใหญ่ เช่น jQuery หรือ Bootstrap เช่นกัน.

    หากคุณต้องการสิ่งนี้ เป็นปลั๊กอิน jQuery มีปลั๊กอิน lightgallery.js ที่พอร์ตสำหรับผู้ใช้ jQuery คุณสามารถดู การสาธิตเต็มรูปแบบ บน หน้าสาธิต หรือตรวจสอบ ปากกาด้านล่าง. และถ้าคุณต้องการ รหัสแหล่งที่มา ตรงไปที่ GitHub repo และ คว้าสำเนา เพื่อตัวคุณเอง.