Back to: jQuery Tutorials
jQuery Image Slideshow with Thumbnails
In this article, I am going to discuss jQuery Image Slideshow with Thumbnails with Examples. Please read our previous article, where we discussed How to Optimized jQuery Image Gallery.
jQuery Image Slideshow with Thumbnails
In this article, we are going to transform the image gallery into an image slide show. Let’s see how to build that image slide show. Following is the complete source code of the image slide show.
<!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 {
font-family: Verdana, Geneva, Tahoma, sans-serif;
font-style: italic;
background: #fff;
min-height: 100vh;
background: linear-gradient(to right bottom, #273c75, #079992);
background-repeat: no-repeat;
}
.container {
padding: 40px 0;
}
#mainImg {
margin: 0 auto 40px;
display: block;
height: 500px;
width: 800px;
border: 2px solid #fff;
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;
border: 1px solid #fff;
cursor: pointer;
}
ul li img {
display: block;
width: 150px;
height: 100px;
opacity: 0.4;
transition: 0.4s;
box-shadow: 0 12px 16px 0 rgba(0, 0, 0, 0.24), 0 17px 50px 0 rgba(0, 0, 0, 0.19)
}
ul li img:hover {
opacity: 1;
}
.toolbox {
position: fixed;
right: 0;
top: 0;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
height: 100%;
width: 200px;
}
select {
padding: 5px 8px;
margin: 10px auto;
width: 130%;
border: none;
font-size: 20px;
width: 80px;
cursor: pointer;
font-style: italic;
}
select:focus {
outline: none;
}
label {
font-size: 24px;
color: #fff;
}
input[type="button"] {
background-color: #e0e0e0;
border: none;
color: black;
padding: 10px 20px;
margin: 10px;
text-align: center;
text-decoration: none;
display: block;
font-size: 24px;
font-weight: 800;
border-radius: 50px;
cursor: pointer;
transition: 0.4s;
box-shadow: 0 10px 12px 0 rgba(0, 0, 0, 0.20), 0 15px 40px 0 rgba(0, 0, 0, 0.15)
}
input[type="button"]:hover {
box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30), 0 15px 12px rgba(0, 0, 0, 0.22);
}
input[type="button"]:disabled {
opacity: 0.4;
}
</style>
</head>
<body>
<div class="toolbox">
<input id="btnStartSlideShow" type="button" value="Start" />
<input id="btnStopSlideShow" type="button" value="Stop" />
</div>
<div class="container">
<img id="mainImg" src="D:\Images\PIC1.jpg">
<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 () {
var imageURLs = new Array();
var intervalId;
var btnStart = $('#btnStartSlideShow');
var btnStop = $('#btnStopSlideShow');
$('ul img').each(function () {
imageURLs.push($(this).attr('src'));
});
function setImage() {
var mainImageElement = $('#mainImg');
var currentImageURL = mainImageElement.attr('src');
var currentImageIndex = $.inArray(currentImageURL, imageURLs);
if (currentImageIndex == (imageURLs.length - 1)) {
currentImageIndex = -1;
}
mainImageElement.attr('src', imageURLs[currentImageIndex + 1])
}
btnStart.click(function () {
intervalId = setInterval(setImage, 500);
$(this).attr('disabled', 'disabled');
btnStop.removeAttr('disabled');
});
btnStop.click(function () {
clearInterval(intervalId);
$(this).attr('disabled', 'disabled');
btnStart.removeAttr('disabled');
}).attr('disabled', 'disabled');
});
</script>
</body>
</html>
Steps:
- First, we are making a new array “imageURLs” in which we are storing the ‘src’ attribute values of all thumbnail images.
- Then we have created our function setImage(). In that, we are retrieving the src attribute of the current image that is displayed on the #mainImg. And then we are finding the index number of that in imageURLs array. If that current image index is matching the index of the last element, then we are deliberately setting the current image index to -1 so that when it will be increased by 1 it will have the index 0 i.e. the first element. And then we are setting the src attribute value of the main image element to the next indexed element of the array.
- In the “Start” button we’re attaching a click event handler to execute setInterval() method. And simultaneously we are disabling the “start” button and enabling the “stop” button
- In the “Stop” button we’re attaching a click event handler to execute clearInterval() method. And simultaneously we are disabling the “stop” button and enabling the “start” button.
Output:
Now run the above code and you will get the following output. Click on the Start button to start the Image slideshow and click on the stop button to stop the image slideshow.
In the next article, I am going to discuss jQuery Animate Function with Examples. Here, in this article, I try to explain jQuery Image Slideshow with Thumbnails with Examples and I hope you enjoy this jQuery Image Slideshow with Thumbnails 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.