goit js hw 07

اقرأ بلغات أخرى: الأوكرانية ، الإنجليزية.

معايير القبول

• تم إنشاء مستودع goit-js-hw-07 .
• يحتوي الواجب المنزلي على رابطين: في ملفات الإخراج وصفحة عمل على GitHub Pages .
• تفتقر وحدة التحكم إلى الأخطاء والتحذيرات عند فتح صفحة معيشة للمهمة.
• أسماء المتغيرات والوظائف واضحة وصفية.
• تتم صياغة الرمز باستخدام Prettier .

بدء الملفات

• في مجلد SRC ، ستجد ملفات البدء بتوصيف أساسي وأنماط جاهزة. نسخها في المشروع. للقيام بذلك ، قم بتنزيل هذا المستودع كأرشيف أو استخدم خدمة Downgit لتنزيل مجلد منفصل من المستودع.
• يحتوي ملف gallery-items.js على مجموعة galleryItems ، والتي تحتوي على كائنات تحتوي على معلومات الصورة: صغيرة (معاينة) ، أصلية (كبيرة) والوصف. لقد قمنا بالفعل بتوصيله بكل من ملفات مشروع JS.

المهمة 1 - معرض الصور

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

معرض dmo.mp4

أكمل هذه المهمة في 01-gallery.html و 01-gallery.js . اقسمها إلى عدد قليل من الدرجات الفرعية:

1. يتم إنشاء وتصميم علامة على صفيف بيانات galleryItems وعنصر المعرض.
2. تنفيذ التفويض على div.gallery وتلقي url صورة كبير.
3. توصيل البرنامج النصي وأنماط نافذة BasicLightbox Modal. استخدم JSDelivr CDN وأضف ملف مكتبة ( .min ) إلى المشروع.
4. فتح نافذة مشروطة على عنصر معرض. للقيام بذلك ، تعرف على الوثائق والأمثلة.
5. استبدال قيمة سمة عنصر src <img> في النافذة المشروطة قبل فتح. استخدم نافذة مشروطة جاهزة مصنوعة مع أمثلة على مكتبة BasicLightbox.

وضع علامة على عنصر المعرض

يجب تخزين مرجع الصورة الأصلي في سمة بيانات source على العنصر <img> والمشار إليه في رابط href . لا تضيف علامات HTML الأخرى أو فئات CSS باستثناء تلك الموجودة في هذا القالب.

 < div class =" gallery__item " >
  < a class =" gallery__link " href =" large-image.jpg " >
    < img
      class =" gallery__image "
      src =" small-image.jpg "
      data-source =" large-image.jpg "
      alt =" Image description "
    />
  </ a >
</ div >

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

إغلاق من لوحة المفاتيح

️ الوظيفة التالية غير مطلوبة لهذه المهمة ، ولكن ستكون ممارسة إضافية جيدة.

أضف إغلاق النافذة المشروطة بعد الضغط على مفتاح Escape . اجعل لوحة المفاتيح تستمع فقط طالما أن النافذة المشروطة مفتوحة. تحتوي مكتبات BasicLightbox على طريقة لإغلاق البرامج للنافذة المشروطة.

المهمة 2 - مكتبة SimpleLightbox

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

SimpleLightbox- demo.mp4

من الضروري تغيير علامة بطاقة المعرض قليلاً ، استخدم هذا القالب.

 < a class =" gallery__item " href =" large-image.jpg " >
  < img class =" gallery__image " src =" small-image.jpg " alt =" Image description " />
</ a >

أكمل هذه المهمة في 02-lightbox.html و 02-lightbox.js . اقسمها إلى عدد قليل من الدرجات الفرعية:

1. يتم إنشاء وتصميم علامة على صفيف بيانات galleryItems وعنصر المعرض. استخدم رمزًا جاهزًا من المهمة الأولى.
2. توصيل أنماط البرنامج النصي والمكتبة باستخدام CDNJS. تحتاج إلى إضافة روابط إلى ملفين: simple-lightbox.min.js و simple-lightbox.min.css .
3. تهيئة المكتبة بعد إنشاء وإضافة عناصر من المعرض في div.gallery . للقيام بذلك ، تعرف على وثائق SimpleLightbox - أولاً وقبل كل شيء ، أقسام الاستخدام والارتياح.
4. انظر إلى قسم التوثيق "خيارات" وأضف عرضًا من التوقيعات إلى الصور من السمة alt . دع التوقيع من الأسفل ويظهر في 250 ميلي ثانية بعد فتح الصورة.