goit js hw 07

อ่านในภาษาอื่น ๆ : ยูเครน, อังกฤษ

เกณฑ์การยอมรับ

• ที่เก็บ goit-js-hw-07 ถูกสร้างขึ้น
• การบ้านมีสองลิงก์: บนไฟล์เอาต์พุตและหน้างานใน GitHub Pages
• คอนโซลขาดข้อผิดพลาดและคำเตือนเมื่อเปิดหน้าชีวิตของงาน
• ชื่อของตัวแปรและฟังก์ชั่นมีความชัดเจนและอธิบาย
• รหัสถูกกำหนดโดยใช้ Prettier

ไฟล์เริ่มต้น

• ในโฟลเดอร์ SRC คุณจะพบไฟล์เริ่มต้นด้วยมาร์กอัปพื้นฐานและสไตล์พร้อม คัดลอกพวกเขาในโครงการ ในการทำเช่นนี้ให้ดาวน์โหลดที่เก็บนี้เป็นที่เก็บถาวรหรือใช้บริการ DOWGIT เพื่อดาวน์โหลดโฟลเดอร์แยกต่างหากจากที่เก็บ
• ไฟล์ gallery-items.js มีอาร์เรย์ galleryItems ซึ่งมีวัตถุที่มีข้อมูลรูปภาพ: เล็ก (ดูตัวอย่าง), ต้นฉบับ (ใหญ่) และคำอธิบาย เราได้เชื่อมต่อกับไฟล์โครงการ JS แต่ละไฟล์แล้ว

ภารกิจที่ 1 - แกลเลอรี่ภาพ

สร้างแกลเลอรี่ที่มีความเป็นไปได้ที่จะคลิกที่องค์ประกอบและดูภาพขนาดเต็มในหน้าต่างโมดอล ดูวิดีโอสาธิตของแกลเลอรี่

Gallery-dmo.mp4

ทำงานนี้ให้เสร็จใน 01-gallery.html และ 01-gallery.js แบ่งออกเป็นไม่กี่สายย่อย:

1. การสร้างและแสดงมาร์กอัปตามอาร์เรย์ข้อมูล galleryItems และองค์ประกอบแกลเลอรี่มีให้
2. การดำเนินการของคณะผู้แทนเกี่ยวกับ div.gallery และรับ url ภาพขนาดใหญ่
3. การเชื่อมต่อสคริปต์และรูปแบบของหน้าต่าง Modal BasicLightbox ใช้ 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 ทำให้คีย์บอร์ดฟังเพียงตราบเท่าที่หน้าต่างโมดัลเปิดอยู่ Libraries 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. การเชื่อมต่อรูปแบบสคริปต์และไลบรารีโดยใช้ CDN CDNJS คุณต้องเพิ่มลิงก์ไปยังสองไฟล์: simple-lightbox.min.js และ simple-lightbox.min.css
3. การเริ่มต้นของห้องสมุดหลังจากสร้างและเพิ่มองค์ประกอบของแกลเลอรี่ใน div.gallery ในการทำเช่นนี้ทำความคุ้นเคยกับเอกสาร SimpleLightBox - ก่อนอื่นส่วนการใช้งานและมาร์กอัป
4. ดูที่ส่วนเอกสาร "ตัวเลือก" และเพิ่มการแสดงผลลายเซ็นไปยังภาพจากแอตทริบิวต์ alt ปล่อยให้ลายเซ็นมาจากด้านล่างและปรากฏใน 250 มิลลิวินาทีหลังจากเปิดรูปภาพ