Cara Membuat Tab Galeri Gambar Menggunakan Javascript
Hallo teman-teman Source Code Aplikasi. Kembali lagi dengan saya Shelli Ripati di kursus Situs. Kali ini saya akan membahas mengenai Cara Membuat Tab Galeri Gambar Menggunakan Javascript. Dimana ketika tab galeri gambar di klik karenanya gambar pada versi berukuran besar akan muncul di sampingnya sesuai gambar yang kita klik.
Langkah pertama-tama Cara Membuat Tab Galeri Gambar Menggunakan Javascript yaitu kita bikin struktur htmlnya terlebih dahulu.
<!DOCTYPE html>
<html>
<head>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>Cara Membangun Tab Di Galeri Gambar Menggunakan Javascript</title>
</head>
<body>
<div class=container style=text-align:center>
<h2>Tab Galeri Gambar</h2>
<p>Ketika mengklik gambar karenanya akan tampil gambar yang berukuran besar di sampingnya</p>
</div>
<div class=container>
<div class=gambar>
<ul>
<li><img src=img/css.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript style=width:50px onclick=myFunction(this);></li>
<li><img src=img/js.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript style=width:50px onclick=myFunction(this);></li>
<li><img src=img/htmlcss.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript style=width:50px onclick=myFunction(this);></li>
<li><img src=img/mysql.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript style=width:50px onclick=myFunction(this);></li>
<li><img src=img/php.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript style=width:50px onclick=myFunction(this);></li>
<li><img src=img/ifelse.png alt= Kembali lagi dengan saya Shelli Ripati di kursus Situs Cara Membangun Tab Galeri Gambar Menggunakan Javascript 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>
Seandainya telah selesai karenanya teman-teman bias seketika merancang style cssnya. Dan letakan di pada 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 bagi merancang Membangun Tab Galeri Gambar Menggunakan Javascript yakni teman-teman bikin javascriptnya selaku 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 sekiranya dijalankan di browser masing-masing karenanya tampilannya akan tampak seperti di gambar di bawah ini.
Disini teman-teman dapat lihat ketika gambar di sebelah kiri kita klik karenanya akan muncul gambar pada versi ukuran besarnya di sebelah kanan sesuai gambar yang kita pilih. Demikian artikel mengenai Cara Membuat Tab Galeri Gambar Menggunakan Javascript. Semoga bermanfaat dan selamat mencoba ya teman-teman.
Sumber https://kursuswebsite.org
