Cara Membuat Gallery Gambar Pada Javascript Part 2

Oke kembali lagi dalam pembahasan javascript tentang bagaimana cara membuat sebuah gallery gambar dengan kode javascript. Tugas yang pertama kita sudah berhasil dan saya sudah buat pada pertemuan sebelumnya pada link tersebut link

Sekarang kita akan lanjut berikutnya yakni mengaktifkan tombol untuk gambar sebelumnya dan berikutnya. Jadi pada HTMLnya sendiri kita akan tambahkan event onclick pada tombol-tombol tersebut tetapi kita gunakan metode yang berbeda sebagai berikut

dan tidak cukup sampai disitu karena nanti kita akan bermain main dengan array maka pada masing masing gambarnya kita tambahkan class dengan nomor dimulai dari 0 sebagai berikut

lalu kita akan tambahkan variabel untuk array gambarnya dimana mengambil nilai id dari thumbnail tersebut. Dan kita berikan nama metodenya children yakni kita akan mengambil semua isi dari id thumbnail

selanjutnya kita tambahkan lagi variabel untuk nomor yang sedang aktif dan kita mau ketika user ganti gambarnya maka nomor yang aktif akan berubah berdasarkan nama classnya pada gambar yang dipilih sebagai berikut

pada fungsi ganti_sebelum() kita tambahkan nomor yang sedang aktif akan kita kurangi dengan satu. Lalu kita akan mengubah gambar tersebut dengan metode yang sama yakni pada target gambar kita ubah dengan array gambar yang di ambil sesuai dengan urutannya yaitu dari nomor yang aktif

satu hal yang akan kita cegah nilainya tidak boleh lebih kecil dari 0 untuk itu kita bisa berikan validasi sederhana contohnya sebagai berikut

sedangkan untuk fungsi ganti_berikut() prinsipnya sama tetapi bedanya nomor yang aktif akan ditambah dengan satu sebagai berikut

oke cukup jelas itu dia contoh sederhana dalam membuat gallery pada gambar. Selamat mencoba sampai jumpa pada artikel berikutnya.

demo