เพิ่มผลการขยายในหน้าเว็บของคุณด้วย jfMagnify

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

ถ้าคุณทำได้ เพิ่มเอฟเฟกต์การขยาย ไปยังทุกส่วนของหน้าเว็บของคุณหรือไม่ ขอบคุณ jfMagnify, คุณสามารถ.

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

โปรดทราบว่าปลั๊กอินนี้สามารถรู้สึกหนักเล็กน้อยเพราะมัน อาศัยสองการพึ่งพา: jQuery ปกติ และ jQuery UI. ทั้งสองอย่างนี้จำเป็นต่อการทำให้ jfMagnify ทำงานได้อย่างถูกต้อง ไม่ต้องพูดถึง สคริปต์ jfMagnify จริง คุณจะต้องรวมไว้ในหน้าของคุณ.

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

นี่คือวิธี jQuery บรรทัดเดียว จะมีลักษณะ:

 $ ( "ขยาย") jfMagnify (). 

เป้าหมายนี้ องค์ประกอบทั้งหมดภายใน .ขยายความ ภาชนะ ซึ่งมักจะเป็น div ธาตุ.

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

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

คุณสามารถ ค้นหากฎสไตล์เริ่มต้นทั้งหมด ใน repo ของ GitHub แต่อาจจะลำบากในการปรับแต่งถ้าเลย์เอาต์ของคุณถูกสร้างขึ้นแล้วและทำงานอยู่ ประโยชน์ของ jfMagnify นั้นคุ้มค่ากับความพยายาม จริง ๆ แล้วมันขึ้นอยู่กับความต้องการของคุณและไม่ว่าคุณจะชอบอินเทอร์เฟซ.

ดูเอกสารที่ GitHub เพื่อดูว่าคุณคิดอย่างไร และคุณยังสามารถ ดูตัวอย่างอินเตอร์เฟส บน CodePen หากคุณต้องการดูห้องสมุดก่อนที่จะทำการติดตั้ง.