ฝัง Animated GIFs เช่น Facebook ด้วย jqGifPreview

Twitter และ Facebook มีผู้คนมากมาย การแชร์ GIF แบบเคลื่อนไหว ประจำวัน หากสิ่งเหล่านี้เล่นอัตโนมัติสิ่งเหล่านี้อาจน่ากลัวในฟีด.

ทั้งสองเครือข่ายได้รับสิ่งนี้ด้วย คุณลักษณะคลิกเพื่อดูตัวอย่าง สำหรับ GIF ทั้งหมด สิ่งนี้ช่วยให้ผู้ใช้เลือก ภาพเคลื่อนไหวที่พวกเขาต้องการเห็น โดยเลือกว่าจะเริ่ม / หยุดภาพเคลื่อนไหวเมื่อใด.

กับ ปลั๊กอิน jqGifPreview, คุณสามารถนำฟังก์ชั่นนี้มาใช้กับเว็บไซต์ของคุณ.

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

GIF ที่หยุดชั่วคราวเป็นเพียงแค่จริงๆ เฟรมหนึ่งของภาพเคลื่อนไหว, ปรากฏบนหน้า.

น่าเสียดายปลั๊กอินนี้ ไม่ ดึงรูปคงที่จาก GIF โดยอัตโนมัติ สำหรับคุณ. แต่คุณสามารถทำสิ่งนี้ได้โดยใช้ PHP หรือภาษาแบ็กเอนด์อื่น ๆ ดังนั้นเมื่อมีโค้ดเพียงเล็กน้อย.

ปลั๊กอินนี้ใช้คุณลักษณะ data- * เพื่อ จัดเก็บตำแหน่งภาพ GIF. เมื่อผู้ใช้คลิกที่ภาพมันจะโหลดโดยอัตโนมัติ src คุณลักษณะของภาพและแสดงบนหน้าจอ.

เรียบง่ายมีประสิทธิภาพและเอฟเฟกต์ที่ประณีต! สิ่งที่คุณต้องมีก็คือไฟล์ CSS / JS สำหรับปลั๊กอินนี้ที่คุณสามารถทำได้ ดึงโดยตรงจาก GitHub. และแน่นอนคุณจะ ต้องการสำเนาของ jQuery, เกินไป.

จากนั้นคุณตั้งค่าภาพของคุณเช่นนี้:

หลัก src คุณลักษณะควร มีภาพคงที่. คุณสามารถสร้างสคริปต์เพื่อสร้างหรือคุณสามารถแก้ไขและอัปโหลดช็อตคงที่สำหรับ GIF แต่ละอัน.

ข้อมูล GIF คุณลักษณะ ถือ GIF ภาพเคลื่อนไหวที่แท้จริง และพวกเขาจะสลับเมื่อคลิกถ้าคุณ กำหนดเป้าหมายคลาสภาพหลัก (ในกรณีนี้มันคือ .myImg) ตอนนี้สิ่งที่คุณต้องมีคือหนึ่งบรรทัดของ jQuery เพื่อให้ทุกอย่างทำงาน:

 $ ( "myImg.") jqGifPreview (). 

แน่นอนหนึ่งในปลั๊กอิน jQuery ที่เจ๋งที่สุดที่ฉันเคยเห็นในเดือนนี้และมันค่อนข้างง่ายในการตั้งค่า.

คุณสามารถเรียนรู้เพิ่มเติมได้โดยไปที่ หน้า GitHub และยังมี ตัวอย่างการสาธิตสด โฮสต์บนเว็บไซต์ของผู้พัฒนา.