Cara Membuat Gallery Gambar Pada Javascript Part 1

Pada artikel kali ini kita akan membuat sebuah gallery gambar yang dimana ketika salah satu gambar kita klik maka akan berubah berdasarkan gambar yang dipilih dan kita juga akan membuat sebuah tombol next dan prev untuk merubah gambar sebelumnya atau berikutnya tentu kita akan buat dengan kode dari javascript. Oke kita akan memulainya disini saya sudah siapkan gambar-gambar yang akan ditampilkan misalnya kita akan buat struktur seperti ini

Pada gambar pertama kita akan atur id dengan nama target_gambar agar dapat kita atur dengan javascript. Lalu pada gambar masing masingnya kita akan berikan satu fungsi dengan event onclick dan kita akan berikan satu parameter yakni this. This ini akan mengacu pada gambar tersebut. Contohnya sebagai berikut

Dan saya melakukan hal yang sama pada gambar berikutnya. Jika sudah kita akan membuat fungsi javacript yakni nama fungsinya ganti_gambar() dan akan menerima this tersebut yakni gambar itu sendiri.

Pertama kita akan buat variabel yang dibutuhkan dimana kita ambil id pada gambar utamanya contohnya sebagai berikut

Pada bagian fungsi ganti_gambar() caranya sangat simple. Jadi kita akan mengambil nilai src pada gambarnya masing-masing dengan metode getAttribute dan kita pindahkan ke bagian targetgambar tadi dan saya mau mengubahnya. Cara mengubahnya kita gunakan metode src contohnya seperti berikut

Penjelasannya jadi source pada targetgambar kita akan ubah berdasarkan source gambar yang kita pillih atau yang kita klik. Sangat mudah prinsipnya kita akan melihatnya di browser ketika kita pilih salah satu gambarnya maka gambar utama akan berubah sesuai dengan gambar yang dipilih. Oke cukup jelas semoga bermanfaat.

4 Januari 2016

Webinar Gratis 2024


Selanjutnya Pada Bulan Maret 2024

Sabtu, 09 Maret 2024


10 Bahasa Rekomendasi Untuk Dipelajari di 2024

Python Developer, Data Science, Web Application

Kursus Python Django Web Application 2024 di DUMET School Mini Bootcamp Backend Laravel 11 Bulan Mei 2024 di DUMET School
Webinar Selanjutnya Mei 2024

Minggu, 26 Mei 2024, 09.00-13.00 WIB

(4 Jam Membuat Backend di Laravel 11)

chat