In this article, we are going to learn to create a custom photo gallery with thumbnails using HTML, CSS, and JQuery. We will create the thumbnails for all images and when the user clicks on any thumbnail, it should render as a large image.
By the end of this article, users will be able to create the custom photo gallery shown in the above image which consists of thumbnails at both the side and the selected image in the middle.
Approach: In this approach, when the user clicks on any thumbnail, we will get the image URL of that thumbnail and replace the main image’s URL with clicked thumbnail’s image URL.
- Add click event to all thumbnail images using JQuery.
$('thumbnail_selector').on({
click: function () {
// Code to take action with onClick event
}
});- When the user clicks on any thumbnail image, get the image URL of that thumbnail to render it in the main div.
let thumbnailURL = $(this).attr('src');- Replace the main image’s src attribute value with the thumbnailURL.
$('mainimage_selector').fadeOut(200, function () {
$(this).attr('src', thumbnailURL);
}).fadeIn(200);- The final onClick callback function code looks like this.
$('thumbnail_selector').on({
click: function () {
var thumbnailURL = $(this).attr('src');
$('mainimage_selector').fadeOut(200, function () {
$(this).attr('src', thumbnailURL);
}).fadeIn(200);
}
});Example: In the below example, we have implemented the code for the above approach.
<!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=
</script>
</head>
<body>
<div class="mainDiv">
<!--div for left thumbanails-->
<div class="thumbnails">
<img src=
<img src=
<img src=
<img src=
</div>
<!--div for main image-->
<div class="figure">
<img src=
</div>
<!--div for right thumbanails-->
<div class="thumbnails" style="left:75%;">
<img src=
<img src=
<img src=
<img src=
</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>
|
Output: Users can see that when they click on any thumbnail image, It renders in the main image box.