In this article we will discuss how to create jQuery image gallery with thumbnails.
The jQuery image gallery should be as shown in the image below. When you click on the image thumnail, the respective image should be displayed in the main section of your page.
jquery Image Gallery
Step 1 : Open Visual Studio and create a empty asp.net web application project and write the name of pproject jqueryImageGallery.
Step 2 : Right click on Name of your project in Solution Explorer in Visual Studio and create a new folder with name = Images.
Step 3 : Copy images from system and paste to Images folder in your project.
Step 4 : Right click on the Project Name in Solution Explorer in Visual Studio and add a new HTML Page.
Step 5 : Add a jQuery library link in html page.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Add this Css at html page for jQuery Image Gallery
<style>
.rg-image-wrapper {
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 39px;
min-height: 20px;
width: 108px;
height: 104px;
}
</style>
Html Code
<body>
<img id="mainImage" style="border:3px solid grey; border-radius: 39px;
"
src="/Images/download.jpg" height="500" width="540" />
<br />
<div id="div1">
<img class="rg-image-wrapper" src="/Images/download.jpg" />
<img class="rg-image-wrapper" src="/Images/download (1).jpg" />
<img class="rg-image-wrapper" src="/Images/download (2).jpg" />
<img class="rg-image-wrapper" src="/Images/download (3).jpg" />
<img class="rg-image-wrapper" src="/Images/download (4).jpg" />
</div>
</body>
jQuery Code
<script>
$(document).ready(function () {
$('#div1 img').on({
mouseover: function () {
$(this).css({
'cursor': 'hand',
'border-Color': 'blue'
});
},
mouseout: function () {
$(this).css({
'cursor': 'default',
'border-Color': 'powderblue'
});
},
click: function () {
var imageURL = $(this).attr('src');
$('#mainImage').fadeOut(2000, function () {
$(this).attr('src', imageURL);
}).fadeIn(2000);
}
});
});
</script>
Finally Copy and paste the following HTML and jQuery code in own HTML page.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#div1 img').on({
mouseover: function () {
$(this).css({
'cursor': 'hand',
'border-Color': 'blue'
});
},
mouseout: function () {
$(this).css({
'cursor': 'default',
'border-Color': 'powderblue'
});
},
click: function () {
var imageURL = $(this).attr('src');
$('#mainImage').fadeOut(2000, function () {
$(this).attr('src', imageURL);
}).fadeIn(2000);
}
});
});
</script>
<style>
.rg-image-wrapper {
position: relative;
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 39px;
min-height: 20px;
width: 108px;
height: 104px;
}
</style>
</head>
<body>
<img id="mainImage" style="border:3px solid grey; border-radius: 39px;"
src="/Images/download.jpg" height="500" width="540" />
<br />
<div id="div1">
<img class="rg-image-wrapper" src="/Images/download.jpg" />
<img class="rg-image-wrapper" src="/Images/download (1).jpg" />
<img class="rg-image-wrapper" src="/Images/download (2).jpg" />
<img class="rg-image-wrapper" src="/Images/download (3).jpg" />
<img class="rg-image-wrapper" src="/Images/download (4).jpg" />
</div>
</body>
</html>
