شروحات برمجة ووردبريس وسيو وتطوير المواقع العربية

شرح اضافة Lightbox لموقعك من مكتبة uikit 2020

شرح اضافة Lightbox لموقعك من مكتبة uikit

0

شرح اضافة Lightbox لموقعك من مكتبة uikit

هذا الدرس مخصص لجميع اصحاب المواقع علي جميع المنصات , اليوم شرح بسيط جدا من مكتبة UIKIT وهي Framework مثل البوتستراب وهي البديل للبوتستراب ومن مميزات هذه المكتبة انها تتميز بالسرعة وتدعم الاتجاه العربي RTL ومتجاوبة ايضا مع جميع الشاشات تستطيع ان تحمل المكتبة او تضعها داخل موقعك عن طريق الموقع الرسمي لمكتبة UIKIT , اليوم سنضع داخل موقعك اضافات عديدة من بينها اضافة Lightbox والاضافة عبارة عن زر يتم الضغط عليه ليقوم بعمل صورة منبثقة داخل الموقع ، قبل الدخول في شرح الاضافة ساقولك لك كيفية وضع أكواد المكتبة داخل موقعك

كيفية وضع اكواد مكتبة UIKIT

مقال حصري :- أفضل استراتيجية لـ قبول موقعك في ادسنس في 3 خطوات

لجميع المنصات سواء ووردبريس أو بلوجر أو غيرهم ضع هذه الأكواد أسفل <head > وبالنسبة لمنصة بلوجر ستجد هذا الكود داخل مظهر المدونة , وبالنسبة للمنصة الحرة ووردبريس ستجد هذا الكود في محرر القوالب مثل Header.php تبحث عن <head> وتضع هذه الأكواد أسفله

<!– UIkit CSS –>
<link rel=”stylesheet” href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/uikit.min.css” />

<!– UIkit JS –>
<script src="data:image/svg+xml,%3Csvg%20xmlns%3D%27http://www.w3.org/2000/svg%27%20viewBox%3D%270%200%203%202%27%3E%3C/svg%3E" data-src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit.min.js”></script>
<script src=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/uikit-icons.min.js”></script>

ثم تقوم بحفظ الاكواد وتكون بهذه الطريقة اضفت اكواد مكتبة uikit التي بها العديد من الاضافات التي سنشرح في المستقبل كيفية اضافتها . نأتي لشرح اضافة اليوم وهو

اضافة Lightbox لموقعك

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

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

Lightbox

وبطريقة بسيطة جدا لوضع الاضافة بطريقة بسيطة في موقعك ضع هذا الكود في المقالة في ال HTML او في خانة النص في الووردبريس

<div uk-lightbox>
<a href=”url.jpg”></a>
</div>

فقط كل ماهو عليك تغيير url.jpg لرابط الصورة الذي تريد وضعها

اضافة سمة Alt

لإضافة سمة alt للصورة في الاضافة، اضبط سمة alt-data داخل الاضافة مثل هذا الكود تماما.

<div uk-lightbox>
<a href=”image.jpg” data-alt=”Image”></a>
</div>

اضافة Caption

لكي تضيف Caption بمعني اضافة شرح للصورة وتظهر أسفل الصورة وكلي تضيفها فقط اضف وسم data-caption مثل هذا الكود تماما

<div uk-lightbox>
<a href=”image.jpg” data-caption=”Caption”></a>
</div>

التأثيرات – Animation

بشكل افتراضي ، يستخدم معرض Lightbox حركة تاثير للاضافة يمكنك تعيين خيار الرسوم المتحركة لاستخدام خيار مختلف. القيم المحتملة هي slide, fade and scale.

مصادر المحتوى!

العرض المبسط لا يقتصر على الصور. يمكن أيضًا عرض وسائط أخرى ، مثل مقاطع الفيديو. سيتوقف الفيديو مؤقتًا عندما لا يكون مرئيًا ويستأنف بمجرد أن يصبح مرئيًا مرة أخرى. لعرض صورة ملصق للفيديو ، قم بتعيين سمة data-poster. ويمكنك معاينة كل هذه الاضافة في رابط الاضافة الرسمي في اعلي المقاله في بداية فقرة شرح الاضافة.

<div uk-lightbox>
<a class=”uk-button” href=”video.mp4″ data-poster=”image.jpg”></a>
<a class=”uk-button” href=”https://www.youtube.com/watch?v=c2pz2mlSfXA”></a>
<a class=”uk-button” href=”https://vimeo.com/1084537″></a>
<a class=”uk-button” href=”https://www.google.com/maps”></a>
</div>

كما ترون في الاكواد يمكنك اضافة فيديو من يوتيوب او عرض خرائط من خرائط جوجل Google Maps او فيديو من Vimeo

نوع المحتوى اليدوي

يستخدم Lightbox السمة href لمعرفة نوع المحتوى المرتبط. إذا لم يتم تحديد امتداد اسم الملف في المسار ، فما عليك سوى إضافة سمة نوع البيانات إلى العلامة <a>.

سيتم التعامل مع تلميح YouTube و Vimeo  تلقائيًا.


السمات المخصصة

يمكنك إضافة سمات مخصصة لعناصر محتوى العرض المبسط باستخدام السمة data-attrs. يتم تمرير السمات مثل خيارات المكونات المعتادة ، مثل data-attrs = “width: 1280؛ height: 720؛”

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

اترك رد

لن يتم نشر عنوان بريدك الإلكتروني.