Cómo - Galería de pestañas
Aprenda a crear una galería de imágenes con pestañas con CSS y JavaScript.
Pestaña Galería
Haga clic en una imagen para expandirla:
Naturaleza
Crear una galería de pestañas
Paso 1) Agregar HTML:
Ejemplo
<!-- The grid: four columns -->
<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>
<!-- The expanding
image container -->
<div class="container">
<!-- Close the
image -->
<span onclick="this.parentElement.style.display='none'"
class="closebtn">×</span>
<!-- Expanded image -->
<img id="expandedImg" style="width:100%">
<!-- Image text -->
<div id="imgtext"></div>
</div>
Usa imágenes para expandir la imagen específica. La imagen en la que se hace clic dentro de la columna se muestra en un contenedor debajo de las columnas.
Paso 2) Agregar CSS:
Crea cuatro columnas y dale estilo a las imágenes:
Ejemplo
/* 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 (positioning is needed to position the close button and the text) */
.container {
position: relative;
display: none;
}
/* Expanding image text */
#imgtext {
position: absolute;
bottom: 15px;
left: 15px;
color:
white;
font-size: 20px;
}
/* Closable button inside the image */
.closebtn
{
position: absolute;
top: 10px;
right: 15px;
color: white;
font-size: 35px;
cursor: pointer;
}
Paso 3) Agregar JavaScript:
Ejemplo
function myFunction(imgs) {
// Get the expanded image
var
expandImg = document.getElementById("expandedImg");
// Get the image
text
var imgText = document.getElementById("imgtext");
//
Use the same src in the expanded image as the image being clicked on from the
grid
expandImg.src = imgs.src;
// Use the value of the alt
attribute of the clickable image as text inside the expanded image
imgText.innerHTML = imgs.alt;
// Show the container element (hidden with
CSS)
expandImg.parentElement.style.display = "block";
}