كيفية انشاء العرض المبسط للصور المستجيبة باستخدام HTML CSS و JavaScript

ستتعلم اليوم في هذه المدونة كيفية إنشاء عرض مبسط للصور المتجاوبة باستخدام HTML CSS وجافا سكريبت

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

 

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

 

في هذا البرنامج [Respire Image Lightbox] ، توجد ست صور على صفحة الويب وعندما تنقر على صورة معينة يظهر صندوق الضوء بالصورة المحددة. في العرض المبسط ، يوجد إجمالي للصورة ورقم الصورة الحالي في أعلى الجانب الأيسر وأيقونة متقاطعة في الجانب الأيمن العلوي. هناك أيضًا أيقونات سابقة وتالية لتغيير الصورة. عند النقر فوق رمز التقاطع ، سيختفي العرض المبسط وبعد النقر مرة أخرى على الصورة المعينة ، يظهر الصندوق المبسط.

 

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

 

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

 

العرض المبسط للصور المستجيبة

لإنشاء هذا البرنامج [Respire Image Lightbox]. أولاً ، تحتاج إلى إنشاء ثلاثة ملفات ، ملف HTML ، ملف CSS ، و ملف جافا سكريبت. بعد إنشاء هذه الملفات ، قم فقط بلصق الرموز التالية في ملفاتك. يمكنك أيضًا تنزيل ملفات التعليمات البرمجية المصدر الخاصة بصندوق الضوء للصورة من زر التنزيل المحدد.

الملفات

ما هو رد فعلك؟

like

dislike

love

funny

angry

sad

wow