How to create a tabbed image gallery with CSS and JavaScript.
Creating a tabbed image gallery with CSS and JavaScript involves a few steps:
• Create the HTML markup for the gallery and tabs.
• Use CSS to style the gallery and tabs.
• Write JavaScript code to switch between tabs and display the appropriate images.
Here is an example implementation:
HTML
<!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;
}
/* The grid: Four equal columns that floats next to each other */
.column {float: left;
width: 25%;
padding: 10px;
}
/* Style the images inside the grid */
.column img {opacity: 0.8;
cursor: pointer;
}
.column img:hover {opacity: 1;
}
/* Clear floats after the columns */
.row:after {content: "";
display: table;
clear: both;
}
/* The expanding image container */
.container {position: relative;
display: none;
}
/* Expanding image text */
#imgtext {position: absolute;
bottom: 15px;
left: 15px;
color: white;
font-size: 20px;
}
/* Closable button inside the expanded image */
.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>
<!-- The four columns -->
<div class="row">
<div class="column">
<img src="image url" alt="Nature" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="image url" alt="Snow" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="image url" alt="Mountains" style="width:100%" onclick="myFunction(this);">
</div>
<div class="column">
<img src="image url" 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>
This implementation uses CSS to hide and show the appropriate content when a tab is clicked. JavaScript is used to add and remove the "active" class to the appropriate elements when a tab is clicked. The "active" class is used in the CSS to show and hide content as needed.
Note: This is just one example implementation. There are many ways to create a tabbed image gallery with CSS and JavaScript, and you can modify this code to suit your needs.
This is an HTML code for a tabbed image gallery. The gallery consists of four columns, each containing an image. When you click on an image, it expands to a larger size with a caption below it. Here's a summary of the code:
• The HTML structure begins with the usual <!DOCTYPE html> declaration.
• The CSS styles are defined within the <style> tags. It sets the layout for the grid, images, and the expanded image container.
• The <body> section contains a heading and a paragraph explaining how to interact with the gallery.
• Inside the <div class="row">, there are four columns, each represented by a <div class="column">. Each column contains an image with an onclick attribute that calls the JavaScript function myFunction(this).
• The JavaScript code is wrapped in <script> tags. The myFunction function is defined, which takes an image as a parameter. It updates the source and caption of the expanded image and displays it.
• The expanded image is contained within a <div class="container">. It includes the image itself and a caption displayed at the bottom left corner.
• The caption has a closable button represented by a cross (×). Clicking on the button hides the expanded image container.
You can replace the placeholder "image url" in the code with the actual URLs of the images you want to use in the gallery.
Rate this article
Getting Info...