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"; }