Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di kursus Web Design. Pembahasan sebelumnya saya sudah membahas cara membuat tab gallery gambar dengan menggunakan javascript dan kali ini saya akan membahas tentang cara Membuat Tab Galeri Gambar dengan Menggunakan Jquery.

Yang dimaksud dengan tab galeri gambar adalah sebuah kotak yang berisi kumpulan gambar lalu disini ketika kita mengklik gambar tersebut maka akan muncul gambar dengan ukuran versi besarnya.

Oke langsung saja untuk langkah pertama dalam Membuat Tab Galeri Gambar Dengan Menggunakan Jquery adalah membuat struktur htmlnya terlebih dahulu ya teman-teman. Dan berikut scriptnya.

Oke jika sudah selesai maka kita masuk ke style cssnya dan berikut scriptnya.

Oke teman-teman, untuk langkah terakhir dalam Membuat Tab Galeri Gambar Dengan Menggunakan Jquery adalah kita buat script jquerynya.

Teman-teman bisa perhatikan script di atas. Script pertama adalah source file jquery yang saya punya disini teman-teman bisa langsung ke halaman website jquery.com untuk mendapatkannya. Bisa pasang versi online atau di download (offline). Jika sudah baru teman-teman buat script jquerynya dimana teman-teman bisa perhatikan script di atas langkah pertama saya melakukan hide kepada kelas display. Kemudian ketika gambar yang dibungkus a href yang ada di dalam kelas left di klik maka gambar versi ukuran besar yang ada di dalam kelas right akan tampil melalui variable aktif yang ada pada script jquerynya.Jika teman-teman lihat di browser maka akan tampil seperti pada gambar di bawah ini.

Membuat Tab Galeri Gambar Dengan Menggunakan Jquery

Demikian artikel tentang cara Membuat Tab Galeri Gambar Dengan Menggunakan Jquery. Semoga bermanfaat dan selamat mencoba ya teman-teman.