En este artículo, vemos con qué facilidad podemos crear una galería de imágenes con una función de vista previa usando HTML, CSS y algo de JavaScript.
HTML:
- Cree un div con un contenedor de clase.
- Cree dos div más dentro del primer div, uno para la vista principal y el otro para la vista lateral con las clases main_view y side_view.
- Dentro de la vista principal, inserte una etiqueta de imagen con id principal.
- Dentro de la vista lateral, inserte todas las demás imágenes de la galería con el cambio de función y pase el src de la imagen a la función.
HTML
<!DOCTYPE html> <html> <body> <!-- Container for our gallery --> <div class="container"> <!-- Main view of our gallery --> <div class="main_view"> <img src="one.jpg" id="main" alt="IMAGE"> </div> <!-- All images with side view --> <div class="side_view"> <img src="one.jpg" onclick="change(this.src)"> <img src="two.jpg" onclick="change(this.src)"> <img src="three.jpg" onclick="change(this.src)"> <img src="four.jpg" onclick="change(this.src)"> </div> </div> </body> </html>
CSS:
- Dar ancho y margen a un contenedor.
- Dale la altura y el ancho a una vista_principal.
- Establezca las dimensiones de la imagen en main_view.
- Configure side_view para mostrar todas las imágenes en las dimensiones adecuadas usando flex.
HTML
<style type="text/css">
/*Setting Basic Dimensions to give
gallery view */
.container{
margin: 0 auto;
width: 90%;
}
.main_view{
width: 80%;
height: 25rem;
}
.main_view img{
width: 100%;
height: 100%;
object-fit: cover;
}
.side_view{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.side_view img{
width: 9rem;
height: 7rem;
object-fit: cover;
cursor: pointer;
margin:0.5rem;
}
</style>
JavaScript: usando la función de cambio, simplemente reemplazaremos el src de main_view por la fuente de la imagen en la que se hizo clic.
Javascript
const change = src => {
document.getElementById('main').src = src
}
Código definitivo:
HTML
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
/*Setting Basic Dimensions to give
gallery view */
.container{
margin: 0 auto;
width: 90%;
}
.main_view{
width: 80%;
height: 25rem;
}
.main_view img{
width: 100%;
height: 100%;
object-fit: cover;
}
.side_view{
display: flex;
justify-content: center;
flex-wrap: wrap;
}
.side_view img{
width: 9rem;
height: 7rem;
object-fit: cover;
cursor: pointer;
margin:0.5rem;
}
</style>
</head>
<body>
<!-- Container for our gallery -->
<div class="container">
<!-- Main view of our gallery -->
<div class="main_view">
<img src="one.jpg" id="main" alt="IMAGE">
</div>
<!-- All images with side view -->
<div class="side_view">
<img src="one.jpg" onclick="change(this.src)">
<img src="two.jpg" onclick="change(this.src)">
<img src="three.jpg" onclick="change(this.src)">
<img src="four.jpg" onclick="change(this.src)">
</div>
</div>
<script type="text/javascript">
const change = src => {
document.getElementById('main').src = src
}
</script>
</body>
</html>
Producción:
Publicación traducida automáticamente
Artículo escrito por NANDINIJAIN y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA