Belajar cara membuat galeri gambar tab dengan CSS dan JavaScript.
Section Artikel
Galeri Tab
Klik pada gambar untuk meluaskannya.
Contoh:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> * { box-sizing: border-box; } body { margin: 0; font-family: Arial; } .column { float: left; width: 25%; padding: 10px; } .column img { opacity: 0.8; cursor: pointer; } .column img:hover { opacity: 1; } .row:after { content: ""; display: table; clear: both; } .container { position: relative; display: none; } #imgtext { position: absolute; bottom: 15px; left: 15px; color: white; font-size: 20px; } .closebtn { position: absolute; top: 10px; right: 15px; color: white; font-size: 35px; cursor: pointer; } </style> </head> <body> <div style="text-align:center"> <h2>Tabbed Image Gallery</h2> <p>Click on the images below:</p> </div> <div class="row"> <div class="column"> <img src="img_nature.jpg" alt="Nature" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_snow.jpg" alt="Snow" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_mountains.jpg" alt="Mountains" style="width:100%" onclick="myFunction(this);"> </div> <div class="column"> <img src="img_lights.jpg" alt="Lights" style="width:100%" onclick="myFunction(this);"> </div> </div> <div class="container"> <span onclick="this.parentElement.style.display='none'" class="closebtn">×</span> <img id="expandedImg" style="width:100%"> <div id="imgtext"></div> </div> <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> </body> </html>
Buat Galeri Tab
Langkah 1) Tambahkan HTML
Contoh:
<!-- Grid: empat kolom -->
<div class="row">
<div class="column">
<img src="img_nature.jpg" alt="Nature" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_snow.jpg" alt="Snow" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_mountains.jpg" alt="Mountains" onclick="myFunction(this);">
</div>
<div class="column">
<img src="img_lights.jpg" alt="Lights" onclick="myFunction(this);">
</div>
</div>
<!-- Penampung gambar yang membesar -->
<div class="container">
<!-- Tutup gambar -->
<span onclick="this.parentElement.style.display='none'" class="closebtn">×</span>
<!-- Gambar yang diperluas -->
<img id="expandedImg" style="width:100%">
<!-- Image text -->
<div id="imgtext"></div>
</div> Gunakan gambar untuk memperluas gambar tertentu. Gambar yang diklik di dalam kolom, ditampilkan dalam wadah di bawah kolom.
Langkah 2) Tambahkan CSS:
Buat empat kolom dan beri style pada gambar.
Contoh:
/* Grid: Empat kolom sama yang mengapung di samping satu sama lain*/
.column {
float: left;
width: 25%;
padding: 10px;
}
/* Atur style gambar di dalam grid */
.column img {
opacity: 0.8;
cursor: pointer;
}
.column img:hover {
opacity: 1;
}
/* Bersihkan floats setelah kolom*/
.row:after {
content: "";
display: table;
clear: both;
}
/* Penampung gambar yang meluas (pemosisian diperlukan untuk memosisikan tombol tutup dan teks) */
.container {
position: relative;
display: none;
}
/* Memperluas teks gambar */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Tombol yang dapat ditutup di dalam gambar */
.closebtn {
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
} Langkah 3) Tambahkan JavaScript
Contoh:
function myFunction(imgs) {
// Dapatkan gambar yang diperluas
var expandImg = document.getElementById("expandedImg");
// Dapatkan teks gambar
var imgText = document.getElementById("imgtext");
// Gunakan src yang sama pada gambar yang diperluas seperti gambar yang diklik dari grid
expandImg.src = imgs.src;
// Gunakan nilai atribut alt dari gambar yang dapat diklik sebagai teks di dalam gambar yang diperluas
imgText.innerHTML = imgs.alt;
// Tampilkan elemen penampung (disembunyikan dengan CSS)
expandImg.parentElement.style.display = "block";
} 