كيفية تكبير الصور مثل متوسطة
منصة التدوين المتوسطة تستخدم أ صورة مخصصة تأثير التكبير على صفحات بلوق الخاصة بهم. كلما نقر المستخدم على صورة ، فسيتم تكبيرها تلقائيًا بحجم أكبر.
إنه تأثير رائع وفريد من نوعه إلى متوسط ، لكنه لم يكن شيئًا يمكن نسخه بسهولة.
الآن ، مع MediumLightbox النصي ، هو أسهل من أي وقت مضى. هذا البرنامج النصي JS خفيف الوزن وسهل الإضافة إلى أي موقع ويب أو مدونة.
إذا كنت تريد أن ترى كيف يعمل هذا يمكنك زيارة الصفحة التجريبية الحية استضافته المبدع دافيدي كاليانو.
قضى بعض الوقت في تضييق نطاق الانتقال الدقيق وتأثير الرسوم المتحركة المخصص ل إنشاء صورة طبق الأصل من تكبير الصورة المتوسطة. المكتبة بأكملها هي مكتوب في جافا سكريبت النقي, لذلك لا يعتمد على أي 3الثالثة نصوص حفلة مثل jQuery.
سوف تحتاج إلى معرفة JS قليلاً لإعداده ولكنك بالتأكيد لا تحتاج إلى أن تكون خبيراً.
كل صورة يمكن أن تتخذ سمات البيانات * لتحديد الطول والعرض بالحجم الكامل ، وكلها سحبت بشكل حيوي من البرنامج المساعد مفضلتي. رمز الإعداد بسيط للغاية ويمكن استهداف الصور بأنفسهم, أو حاويات مثل
إليك مقتطف الشفرة الوحيد الذي تحتاجه لتشغيل المكون الإضافي:
MediumLightbox ( 'figure.zoom تأثير')؛
داخل الوظيفة ، سوف تمرير محدد لجميع العناصر (على سبيل المثال. .التكبير تأثير صف دراسي. هذه الفئة هي محددة تحديدا في ورقة أنماط MediumLightbox ، لذلك من الأفضل استخدام هذا على صفحتك أيضًا.
وبمجرد الانتهاء من الإعداد ، فأنت جاهز تمامًا!
في منطقة محتوى صفحتك ، يمكنك التفاف جميع الصور في
لتنزيل نسخة من هذا البرنامج النصي والبدء ، ما عليك سوى زيارة GitHub repo الرئيسي. هنا ، ستجد أيضًا الوثائق جنبا إلى جنب مع قصاصات التعليمات البرمجية يمكنك نسخ للحصول على الإعداد بسرعة.
