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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Membuat Tampilan Gallery Dengan Tabs Menggunakan Javascript</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="container"> <div class="box"> <img onclick="changeimg(this)" src="images/Desert.jpg" alt=""> <img onclick="changeimg(this)" src="images/Hydrangeas.jpg" alt=""> <img onclick="changeimg(this)" src="images/Jellyfish.jpg" alt=""> <img onclick="changeimg(this)" src="images/Lighthouse.jpg" alt=""> </div> <div class="box1"> <i onclick="this.parentElement.style.display='none'" class="far fa-times-circle"></i> <img src="images/Lighthouse.jpg" id="gmb"> </div> </div> </body> </html> |
Pada code diatas terdapat event click pada tag img dan tag i .Jika pada event yang ada pada tag i 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:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 |
@import "https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.css"; .box{ overflow: hidden; text-align: center; } .box img{ width: 300px; height: 300px; margin:10px; cursor: pointer; transition: 0.4s; } .box img:hover{ opacity: 0.8; } .box1{ width: 900px; height: 520px; overflow: hidden; position: relative; margin:auto; } .box1 img{ width: 100%; height: 100%; } .box1 i{ position: absolute; top:0; right: 0; color:#fff; font-size: 24px; padding: 10px; cursor: pointer; text-decoration: none; } |
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.
|
1 2 3 4 5 6 7 |
<script> function changeimg(image){ var pic = document.getElementById('gmb'); pic.src = image.src; pic.parentElement.style.display = "block"; } </script> |
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 :
Demikian pembahasan artikel kali ini Membuat Tampilan Gallery Dengan Tabs Javascript, semoga bermanfaat dan sampai jumpa dengan pembahasan lainnya.
terima kasih