How to create a Tab Image Gallery – HTML, CSS, and JavaScript
What is Tab Gallery
HTML CSS JavaScript to create tab image gallery
- Get the expanded image.
- Get the image text.
- Use the same source in the expanded image as the image is clicked on from the grid.
- Use the value of the alt attribute of the clickable image as text inside the expanded image.
- Show the container element.
Also, get to know,
- Free cool 3d image hover effect source code download
- 3D Photo/Image Gallery (on space) Using HTML5 CSS JS
Code to create Tab Gallery using HTML CSS JavaScript
<html> <head> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> 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>
Run this HTML CSS JavaScript code to create a tab image gallery.
Leave a Reply