Back to: jQuery Tutorials
jQuery Image Gallery with Examples
In this article, I am going to discuss jQuery Image Gallery with Examples. Please read our previous article, where we discussed the jQuery Scroll Event.
jQuery Image Gallery
Let’s see how to make Image Gallery using jQuery. First, create a folder with the name Images within the D drive and then put any 4 images with the name PIC1.jpg, PIC2.jpg, PIC3.jpg, and PIC4.jpg within the Images folder. The image gallery should look as shown in the image below. When we click on the thumbnail image, that image should be displayed in the main image gallery.
Following is the complete source code of the image gallery using jQuery. Let us write the code first and then we will understand how it will work.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<style>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background: #fff;
min-height: 100vh;
background: linear-gradient(to right bottom, #273c75, #079992);
background-repeat: no-repeat;
}
img {
max-width: 100%;
}
.container {
padding: 40px 0;
}
figure {
max-width: 800px;
margin: 0 auto 40px;
border: 2px solid #fff;
}
figure img {
max-width: 100%;
min-width: 100%;
display: block;
height: 500px;
width: 540px;
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
ul {
list-style: none;
margin: 0;
text-align: center;
}
ul li {
margin: 0 5px;
display: inline-block;
width: 150px;
border: 1px solid #fff;
cursor: pointer;
}
ul li img {
display: block;
opacity: 0.4;
transition: 0.4s;
height: 100px;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
}
</style>
</head>
<body>
<div class="container">
<figure>
<img id="mainImg" src="D:\Images\PIC1.jpg">
</figure>
<ul>
<li><img src="D:\Images\PIC1.jpg"></li>
<li><img src="D:\Images\PIC2.jpg"></li>
<li><img src="D:\Images\PIC3.jpg"></li>
<li><img src="D:\Images\PIC4.jpg"></li>
</ul>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('ul img').on({
mouseover: function () {
$(this).css({
'opacity': 1,
});
},
mouseout: function () {
$(this).css({
'opacity': 0.4
});
},
click: function () {
var imageURL = $(this).attr('src');
$('#mainImg').fadeOut(500, function () {
$(this).attr('src', imageURL);
}).fadeIn(500);
}
});
});
</script>
</body>
</html>
How this Image Gallery is Working?
Notice the HTML. We have an id “mainImg” where the actual image will be shown. And inside the <ul> element we have 4 <li> elements in which the thumbnails are present. Then notice the jQuery. We have bound 3 events to each image in the <ul> i.e. mouseover, mouseout, and click.
When the event is ‘mouseover’ we are increasing the opacity. When the event is ‘mouseout’ we are decreasing the opacity again (This can be using hover in CSS easily but here we are using just jQuery). When the event is ‘click’ you can see that we are doing 3 steps
- Retrieving the “src” attribute value on which thumbnail image is clicked
- In the <img> element of id “mainImg”, fading out the present image and setting the src attribute value
- Again, fading in the clicked image
Thus, our image gallery is ready
Output:
Now run the above code and you will get the following output.
Now mouse hovers over any thumbnail images and you will see that the opacity is increasing as shown in the below image.
When we mouse out from the thumbnail, the opacity is decreasing as shown in the below image.
Now when we click on any of the thumbnail images, that will be shown in the main image gallery as shown in the below image.
In the next article, I am going to discuss how to Optimize jQuery Image Gallery with Examples. Here, in this article, I try to explain jQuery Image Gallery with Examples and I hope you enjoy this jQuery Image Gallery article.
About the Author: Pranaya Rout
Pranaya Rout has published more than 3,000 articles in his 11-year career. Pranaya Rout has very good experience with Microsoft Technologies, Including C#, VB, ASP.NET MVC, ASP.NET Web API, EF, EF Core, ADO.NET, LINQ, SQL Server, MYSQL, Oracle, ASP.NET Core, Cloud Computing, Microservices, Design Patterns and still learning new technologies.
For some reason, when I use this, it stacks the images at the right side of the main image, not below it. And I can’t add more than four images in total. Any ideas?
Thanks