goit js hw 07

Baca dalam bahasa lain: Ukraina, Inggris.

Kriteria penerimaan

• Repositori goit-js-hw-07 dibuat.
• Pekerjaan rumah berisi dua tautan: pada file output dan halaman kerja di GitHub Pages .
• Konsol ini tidak memiliki kesalahan dan peringatan saat membuka halaman hidup dari tugas tersebut.
• Nama -nama variabel dan fungsi jelas dan deskriptif.
• Kode ini diformulasikan menggunakan Prettier .

File awal

• Di folder SRC Anda akan menemukan file awal dengan markup dasar dan gaya siap. Salin dalam proyek. Untuk melakukan ini, unduh repositori ini sebagai arsip atau gunakan layanan downgit untuk mengunduh folder terpisah dari repositori.
• File gallery-items.js berisi array galleryItems , yang berisi objek dengan informasi gambar: kecil (pratinjau), asli (besar) dan deskripsi. Kami telah menghubungkannya ke masing -masing file proyek JS.

Tugas 1 - Galeri Gambar

Buat galeri dengan kemungkinan klik pada elemen -elemennya dan lihat gambar ukuran penuh di jendela modal. Lihat video demo galeri.

galeri-dmo.mp4

Selesaikan tugas ini di 01-gallery.html dan 01-gallery.js . Memecahnya menjadi beberapa sub -calls:

1. Membuat dan membuat markup berdasarkan array data galleryItems dan elemen galeri disediakan.
2. Implementasi delegasi pada div.gallery dan menerima url gambar besar.
3. Menghubungkan skrip dan gaya jendela modal BasicLightBox. Gunakan CDN JSDELIVR dan tambahkan file pustaka ( .min ) ke proyek.
4. Membuka jendela modal pada klik pada elemen galeri. Untuk melakukan ini, berkenalan dengan dokumentasi dan contoh.
5. Mengganti nilai atribut elemen src <img> di jendela modal sebelum membuka. Gunakan penandaan jendela modal yang siap dengan contoh -contoh perpustakaan BasicLightBox.

Tanda elemen galeri

Referensi gambar asli harus disimpan dalam atribut data source pada item <img> dan ditunjukkan di tautan href . Jangan menambahkan tag HTML atau kelas CSS lainnya kecuali yang terkandung dalam templat ini.

 < 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 >

Harap dicatat bahwa gambar dibungkus dalam tautan, sehingga pengguna akan diarahkan ke halaman lain secara default. Larangan perilaku default ini.

Menutup dari keyboard

️ Fungsionalitas berikut tidak diperlukan untuk tugas tersebut, tetapi akan menjadi praktik tambahan yang baik.

Tambahkan penutupan jendela modal setelah menekan tombol Escape . Buat keyboard hanya mendengarkan selama jendela modal terbuka. Perpustakaan BasicLightBox berisi metode untuk penutupan perangkat lunak dari jendela modal.

Tugas 2 - Perpustakaan SimpleLightbox

Buat galeri yang sama seperti pada tugas pertama, tetapi menggunakan perpustakaan SimpleLightBox, yang akan mengambil klik pada gambar, menemukan dan menutup jendela modal, serta mengguncang gambar dengan keyboard.

SimpleLightBox- demo.mp4

Penting untuk mengubah tanda kartu galeri sedikit, gunakan template ini.

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

Selesaikan tugas ini di 02-lightbox.html dan 02-lightbox.js . Memecahnya menjadi beberapa sub -calls:

1. Membuat dan membuat markup berdasarkan array data galleryItems dan elemen galeri disediakan. Gunakan kode siap siap dari tugas pertama.
2. Menghubungkan skrip dan gaya perpustakaan menggunakan CDNJS CDN. Anda perlu menambahkan tautan ke dua file: simple-lightbox.min.js dan simple-lightbox.min.css .
3. Inisialisasi perpustakaan setelah membuat dan menambahkan elemen galeri di div.gallery . Untuk melakukan ini, berkenalan dengan dokumentasi SimpleLightBox - pertama -tama, bagian penggunaan dan markup.
4. Lihatlah bagian Dokumentasi "Opsi" dan tambahkan tampilan tanda tangan ke gambar dari Atribut alt . Biarkan tanda tangan dari bawah dan muncul dalam 250 milidetik setelah gambar dibuka.