วิธีการขยายรูปขนาดย่อเช่น Google รูปภาพ

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

มันเป็นหนึ่งในคุณสมบัติแกลเลอรี่ภาพที่ดีที่สุดที่ฉันเคยใช้และตอนนี้, คุณสามารถโคลนด้วย Gridder.js.

ปลั๊กอิน jQuery ฟรีดังต่อไปนี้ตามรอยเท้าของ UX ที่เหลือเชื่อของ Google โดยการสร้างปลั๊กอินที่ตรงกับเอฟเฟกต์นี้ คุณสามารถ เปลี่ยนแกลเลอรี่รูปภาพให้เป็นแกลเลอรีสไตล์ของ Google Images ด้วยภาพเคลื่อนไหวและคุณสมบัติการแสดงผลเดียวกันทั้งหมด.

ฉันประหลาดใจด้วยความเร็วและความสะดวกในการใช้งานที่มาพร้อมกับปลั๊กอินนี้ เพียงคลิกรูปขนาดย่อ แสดงภาพขนาดใหญ่ทันที และอนิเมชั่นนั้นสะอาดมาก.

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

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

คลิกแต่ละเหตุการณ์ เสนอวิธีการโทรกลับ, เพื่อให้คุณสามารถเรียกใช้ปลั๊กอินหรือฟังก์ชั่น JavaScript อื่น ๆ พร้อมกับ Gridder ด้วยตัวเลือกมากมายมันให้ความรู้สึกเหมือนเป็นกรอบกริดทั้งหมด!

ตั้งแต่ Gridder วิ่งบน jQuery, มันต้องใช้รุ่นใหม่ล่าสุดเป็นการอ้างอิง แต่นั่นคือทั้งหมดที่คุณต้องการ (พร้อมกับไฟล์ Gridder.js) และด้วย HTML เพียงไม่กี่บรรทัดคุณสามารถทำให้กริดของคุณทำงานได้อย่างราบรื่น.

คุณควรตรวจสอบหน้า GitHub สำหรับ คำแนะนำการตั้งค่าแบบเต็ม แต่นี่คือ ตัวอย่างรวดเร็ว สิ่งที่ HTML ดูเหมือน:

  
 
  
  
  
 
  
 เนื้อหาไปที่นี่ ... 
 

เนื้อหาทั้งหมด ถูกดึงผ่าน JavaScript, เพื่อให้คุณสามารถโหลดทุกอย่างที่คุณต้องการ.

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

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