Hallo teman-teman Dumet School. Kembali lagi dengan saya Shelli Ripati di kursus Website. Kali ini saya akan membahas tentang Cara Membuat Tab Galeri Gambar Menggunakan Javascript. Dimana ketika tab galeri gambar di klik maka gambar dalam versi berukuran besar akan muncul di sampingnya sesuai gambar yang kita klik.
Langkah pertama Cara Membuat Tab Galeri Gambar Menggunakan Javascript yaitu kita buat struktur htmlnya terlebih dahulu.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Cara Membuat Tab Pada Galeri Gambar Menggunakan Javascript</title>
</head>
<body>
<div class="container" style="text-align:center">
<h2>Tab Galeri Gambar</h2>
<p>Ketika mengklik gambar maka akan tampil gambar yang berukuran besar di sampingnya</p>
</div>
<div class="container">
<div class="gambar">
<ul>
<li><img src="img/css.png" alt="CSS" style="width:50px" onclick="myFunction(this);"></li>
<li><img src="img/js.png" alt="Javascript" style="width:50px" onclick="myFunction(this);"></li>
<li><img src="img/htmlcss.png" alt="HTML CSS" style="width:50px" onclick="myFunction(this);"></li>
<li><img src="img/mysql.png" alt="Mysql" style="width:50px" onclick="myFunction(this);"></li>
<li><img src="img/php.png" alt="PHP" style="width:50px" onclick="myFunction(this);"></li>
<li><img src="img/ifelse.png" alt="If Else" style="width:50px" onclick="myFunction(this);"></li>
</ul>
</div>
<div class="display">
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<img id="expandedImg" style="width:70%;">
<div id="imgtext"></div>
</div>
</div>
</div>
</body>
</html>
Jika sudah selesai maka teman-teman bias langsung membuat style cssnya. Dan letakan di dalam tag head. Dan berikut scriptnya ya teman-teman.
<style>
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
font-family: Arial;
}
.container{
margin: auto;
width: 500px;
background: salmon;
padding: 10px;
overflow: hidden;
}
.gambar img {
opacity: 0.8;
cursor: pointer;
}
.gambar img:hover {
opacity: 1;
}
.display{
float: right;
width: 400px;
padding: 10px;
text-align: center;
position: relative;
display: none;
}
.gambar {
float: left;
width: 73px;
padding: 10px;
}
.gambar ul{
list-style: none;
}
#imgtext {
position: absolute;
bottom: -10px;
left: 70px;
color: white;
font-size: 20px;
}
.closebtn {
position: absolute;
top: 3px;
right: 40px;
color: white;
font-size: 35px;
cursor: pointer;
}
</style>
Dan langkah terakhir untuk membuat Membuat Tab Galeri Gambar Menggunakan Javascript adalah teman-teman buat javascriptnya sebagai berikut dan letakkan didalam body.
<script>
function myFunction(imgs) {
var expandImg = document.getElementById("expandedImg");
var imgText = document.getElementById("imgtext");
expandImg.src = imgs.src;
imgText.innerHTML = imgs.alt;
expandImg.parentElement.style.display = "block";
}
</script>
Jangan lupa teman-teman simpan dengan format html. Lalu jika dijalankan di browser masing-masing maka tampilannya akan tampak seperti pada gambar di bawah ini.
Disini teman-teman bisa lihat ketika gambar di sebelah kiri kita klik maka akan muncul gambar dalam versi ukuran besarnya di sebelah kanan sesuai gambar yang kita pilih. Demikian artikel tentang Cara Membuat Tab Galeri Gambar Menggunakan Javascript. Semoga bermanfaat dan selamat mencoba ya teman-teman.
The post Cara Membuat Tab Galeri Gambar Menggunakan Javascript appeared first on Kursus Website Terbaik.