Hallo sahabat, bertemu lagi bersama saya yang akan membahas tentang membuat tampilan gallery. Gallery disini tentu berhubungan gambar-gambar, dalam kasus kali ini saya akan membuat tabs pada gallery. Bagaimana cara membuatnya yuk jangan kemana-mana tetap stay disini.Sebelum dimulai buat persiapan bahan atau gambar yang pasti untuk membuat gallery, silahkan sahabat donwload gambar atau ambil gambar dari folder yang sahabat miliki. Langsung saja yuk simak langkah-langkah berikut:

Langkah Pertama

Sahabat buka text editornya lalu buat file html kemudian ketikkan code seperti dibawah ini:

Pada code diatas terdapat event click pada tag img dan tag i .Jika pada event yang ada pada tag disini memiliki style css display none karena digunakan menutup atau juga diberikan sebuah icon close. Kemudian pada class=box1 sebagai tampilan image yang memiliki ukuran besar yang memiliki id=gmb.

Langkah Kedua

Jika code pada html sudah sekarang tambahakan style untuk CSS agar terlihat rapi ,silahkan ketikkan code CSS berikut ini:

Pada code CSS ini saya gunakan import icon untuk menampilkan icon close yang berada pada class=box1 yang nanti berfungsi untuk close tampilan gambar. Baiklah selanjutnya tinggal menambahkan script dari Javascript.

script diatas berisi fungsi changeimg sahabat bisa perhatikan pada setiap gambar terdapat event onclick=changeimg(this) pada class=box.

Langkah Ketiga

Coba sahabat jalankan pada broswer masing-masing jika benar maka akan seperti tampilan berikut ini :

Membuat Tampilan Gallery Dengan Tabs Menggunakan Javascript

Demikian pembahasan artikel kali ini Membuat Tampilan Gallery Dengan Tabs Javascript, semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.

terima kasih