En este artículo, vamos a aprender a crear una galería de fotos personalizada con miniaturas utilizando HTML, CSS y JQuery. Crearemos las miniaturas para todas las imágenes y cuando el usuario haga clic en cualquier miniatura, debería mostrarse como una imagen grande.
Al final de este artículo, los usuarios podrán crear la galería de fotos personalizada que se muestra en la imagen de arriba, que consta de miniaturas a los lados y la imagen seleccionada en el medio.
Enfoque: en este enfoque, cuando el usuario hace clic en cualquier miniatura, obtendremos la URL de la imagen de esa miniatura y reemplazaremos la URL de la imagen principal con la URL de la imagen de la miniatura en la que se hizo clic.
- Agregue un evento de clic a todas las imágenes en miniatura usando JQuery.
$('thumbnail_selector').on({
click: function () {
// Code to take action with onClick event
}
});
- Cuando el usuario hace clic en cualquier imagen en miniatura, obtenga la URL de la imagen de esa miniatura para representarla en el div principal.
let thumbnailURL = $(this).attr('src');
- Reemplace el valor del atributo src de la imagen principal con la thumbnailURL.
$('mainimage_selector').fadeOut(200, function () {
$(this).attr('src', thumbnailURL);
}).fadeIn(200);
- El código final de la función de devolución de llamada onClick se ve así.
$('thumbnail_selector').on({
click: function () {
var thumbnailURL = $(this).attr('src');
$('mainimage_selector').fadeOut(200, function () {
$(this).attr('src', thumbnailURL);
}).fadeIn(200);
}
});
Ejemplo: En el siguiente ejemplo, hemos implementado el código para el enfoque anterior.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<style>
* {
margin: 0;
}
body {
background: lightgreen;
min-height: 100vh;
}
.thumbnails {
display: flex;
flex-direction: column;
width: 200px;
height: 200px;
position: absolute;
left: 10%;
top: 5%;
}
.thumbnails img {
margin: 0 20px 20px;
opacity: 1;
transition: 0.3s;
}
img {
max-width: 100%;
max-height: 100%;
}
.mainDiv {
padding: 40px 0;
display: flex;
flex-direction: row;
}
.figure {
max-width: 800px;
margin: 0 auto 40px;
position: absolute;
left: 28%;
top: 5%;
}
.figure img {
max-width: 100%;
min-width: 100%;
height: 650px;
width: 650px;
}
</style>
<script src=
"https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js">
</script>
</head>
<body>
<div class="mainDiv">
<!--div for left thumbanails-->
<div class="thumbnails">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214418/galaryImage1-300x211.jpg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214418/galaryImage2-300x300.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214419/galaryImage3-300x300.jpg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214420/galaryImage4-300x300.jpg">
</div>
<!--div for main image-->
<div class="figure">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214418/galaryImage1-300x211.jpg">
</div>
<!--div for right thumbanails-->
<div class="thumbnails" style="left:75%;">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214420/galaryImage5-300x300.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214421/galaryImage6-300x300.jpg">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214421/galaryImage7-200x200.png">
<img src=
"https://media.geeksforgeeks.org/wp-content/uploads/20220608214422/galaryImage8-200x133.png">
</div>
</div>
<script>
// When webpage will load, everytime below
// function will be executed
$(document).ready(function () {
// If user clicks on any thumbanil,
// we will get it's image URL
$('.thumbnails img').on({
click: function () {
let thumbnailURL = $(this).attr('src');
// Replace main image's src attribute value
// by clicked thumbanail's src attribute value
$('.figure img').fadeOut(200, function () {
$(this).attr('src', thumbnailURL);
}).fadeIn(200);
}
});
});
</script>
</body>
</html>
Salida: los usuarios pueden ver que cuando hacen clic en cualquier imagen en miniatura, se representa en el cuadro de imagen principal.
Publicación traducida automáticamente
Artículo escrito por shubhamvora05 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA