إضافة تأثير مكبّر على صفحة الويب الخاصة بك مع jfMagnify

يوجد العديد من التكبير الإضافات الحرة هذا العمل بشكل جيد بشكل لا يصدق. ومع ذلك ، فإن معظم هذه بنيت للصور ويحددون التوجيهات ل محتوى الصورة فقط.

ماذا لو استطعت إضافة تأثير مكبرة إلى كل جزء من صفحة الويب الخاصة بك؟ شكرا ل jfMagnify, يمكنك.

انه البرنامج المساعد jQuery مجانا لا يدعم فقط تكبير الصورة ، ولكن أيضًا تكبير الصفحة بأكملها. انها واحدة من المكونات القليلة التي تتيح لك أيضا اختيار مستوى التكبير و يدعم أحداث اللمس لمستخدمي المحمول.

لاحظ هذا البرنامج المساعد يمكن أن يشعر قليلا الثقيلة لأنه يعتمد على اثنين من التبعيات: مسج العادية و مسج واجهة المستخدم. كلاهما ضروري للحصول على jfMagnify يعمل بشكل صحيح. ناهيك عن jfMagnify الفعلي النصي ستحتاج إلى تضمين في صفحتك.

الإعداد صعب بعض الشيء لأنه يمكنك فقط استهداف العناصر المكبرة داخل حاوية. إذا كنت تريد استهداف الصفحة بأكملها ، فستحتاج إلى تشمل فئة على موقع الويب الخاص بك بأكمله.

إليك كيف سطر واحد من مسج ستبدو:

 $ ( ". تضخيم") jfMagnify ()؛ 

هذه الأهداف جميع العناصر داخل .كبر حاوية وهو عادة ما يكون شعبة جزء.

يمكن أن تكون هذه العناصر الداخلية صورًا ، لكن يمكن أن تكون أيضًا تشمل طباعة صغيرة, على سبيل المثال على شروط الموقع أو صفحات سياسة الخصوصية. جميع الوثائق هي متوفر في GitHub repo, لذلك بمجرد إعداده ، تصبح العملية برمتها أسهل كثيرًا.

أيضا ، هذا البرنامج المساعد متقلب جدا ويأتي مع الكثير من قواعد الحاويات. على سبيل المثال ، عنصر الحاوية لا يمكن أن يكون لها موقف CSS ثابت, لذلك يجب أن تكون إما نسبية أو مطلقة أو ثابتة.

يمكنك العثور على جميع قواعد النمط الافتراضي في GitHub repo ، لكن قد يكون من المألوف تخصيصه إذا كان التصميم بالفعل قيد التشغيل. فوائد jfMagnify هي ، بالنسبة لي ، يستحق كل هذا الجهد. حقا ، يعتمد على احتياجاتك وما إذا كنت ترغب في الواجهة.

ألقِ نظرة سريعة على مستندات GitHub لترى رأيك. و يمكنك كذلك معاينة الواجهة على CodePen إذا كنت تريد أن ترى المكتبة تعمل قبل تثبيتها.