โฮมเพจ » UI / UX » วิธีการขยายรูปขนาดย่อเช่น Google รูปภาพ

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

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

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

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

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

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

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

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

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

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

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

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

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

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