إنشاء Lightbox مستجيبة وجميلة في صفحة كاملة باستخدام BaguetteBox.js

هناك العشرات من الإضافات مفضلتي وكلهم رائعون لأسباب مختلفة. يعمل البعض بشكل أفضل على مواقع المحافظ بينما يكون البعض الآخر أفضل للتخطيطات سريعة الاستجابة.

ولكن ، أحد الإضافات الجديدة المفضلة لدي هي baguetteBox.js, التي أنشأتها المطور جافا سكريبت ماريك Grzybek.

بالطبع ، هذا البرنامج المساعد مجاني تمامًا للاستخدام ومفتوح المصدر على GitHub إذا كنت تريد الحفر في الشفرة يدويًا.

المكتبة ليس لديه أي تبعيات, حتى تتمكن من تشغيله دون مسج ، Zepto ، أو أي شيء آخر. انه مكتبة جافا سكريبت نقية مع إعداد بسيط حقا.

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

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

 baguetteBox.run ( '. baguetteBoxOne')؛ 

إذا هذا يستهدف عنصر الحاوية مع الفصل .baguetteBoxOne ومعرض كامل يعمل قبالة ذلك.

يمكنك ضبط الخيارات المخصصة إذا كنت ترغب في أشياء مثل التسميات التوضيحية وأنماط الأزرار وميزات التحميل المسبق وطرق رد الاتصال لأحداث onclick / onchange. كل هذه الخيارات هي جيد التوثيق على جيثب إذا كنت تريد الغوص في.

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

أنت يكون السيطرة الكاملة على الرسوم المتحركة وأحجام الصور وتأثيرات التمرير ومحتوى المعرض مثل العناوين / التسميات التوضيحية. هذه لا يتطلب جافا سكريبت, لذلك ليس لديه بديل CSS خالص للشرطي. ولكن نظرًا لأن معظم المتصفحات تدعم JavaScript ، فلا ينبغي أن تكون مشكلة.

لمعرفة المزيد ، تفضل بزيارة صفحة baguetteBox.js الرئيسية ويمكنك أيضًا مشاركة أفكارك مع المنشئ على Twitterfeimosi.