How to Create Thumbnail Click Image Slideshow Gallery using CSS and JavaScript
Image Gallery
How To, for Front End and Web Applications
By: Chrysanthus Date Published: 23 Apr 2025
This tutorial explains How to Create Thumbnail Click Image Slideshow Gallery using CSS and JavaScript. For this teaching project, there are six thumbnail images. The images are in a horizontal row. When a thumbnail is clicked, a bigger form of the thumbnail image appears in a large pane above the row. In between this large pane and the row of thumbnails, is a horizontal bar. This bar indicates the name (short description) of the image that appears in the large pane.
The complete webpage code is at the end of this tutorial. The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Click some thumbnails to see their corresponding large image appear above, in the large pane. The reader is advised to do that before carrying on to read the rest of this tutorial.
The Webpage Skeleton Code
The skeleton code for the webpage to which more useful code will be added is:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Gallery from Thumbnails</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
</style>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>
Any modern professional webpage should have at least the first four tags in the HTML head element above. The HTML style element will have quit some good amount of code. The JavaScript code will respond to the click of a thumbnail, to show its much larger image in the large pane. The HTML body element will have the HTML divs for the images.
HTML body Element Content
The content of the HTML body element is:
<h2 style="text-align:center">Slide Show Gallery</h2>
<div class="container">
<div class="mySlide" style='display: block;'>
<p class="numbertext">1 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">2 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">3 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">4 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">5 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">6 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow_wide.jpg" style="width:100%">
</div>
<div class="caption-container">
<p id="caption">The Woods</p>
</div>
<div class="row">
<div class="cell">
<img class="demo cursor active" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_woods_wide.jpg" style="width:100%" onclick="showSlide(1)" alt="The Woods">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre_wide.jpg" style="width:100%" onclick="showSlide(2)" alt="Cinque Terre">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains_wide.jpg" style="width:100%" onclick="showSlide(3)" alt="Mountains and fjords">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights_wide.jpg" style="width:100%" onclick="showSlide(4)" alt="Northern Lights">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature_wide.jpg" style="width:100%" onclick="showSlide(5)" alt="Nature and sunrise">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow_wide.jpg" style="width:100%" onclick="showSlide(6)" alt="Snowy Mountains">
</div>
</div>
There is one principal div element, with class-name "container". The first six inner div elements in this div, each has class-name "mySlide" . Each of these six divs has a image tag that downloads one of the six images. Each of these divs is the large pane.
After those six inner divs is another inner div with class-name "caption-container". This inner div is the bar between the large pane and the row of thumbnails. The name (short description) of the image in the large pane will appear in this bar.
After that in the principal div, is an inner div whose class-name is "row" It is for the row of thumbnails. Each thumbnail is a different div, having an image tag. Each image tag downloads one of the six images. The image for a thumbnail, is the same image for the large pane. CSS simply reduce the size of the image in the thumbnail. The class-name for each thumbnail div is "cell". Consider each thumbnail div as a cell.
Content for the HTML Style Element
Apart from the attribute, "style='display: block;' " to display the first image, in the large pane, when the webpage is loaded (for the first time), and the "style='width:100%' " 's in all the image tags, the rest of the styling is within the start and end tags of the HTML style element, in the HTML head element.
The box-sizing Property
At the top within the style element content, is the CSS rule:
* {
box-sizing: border-box;
}
This is called the box-sizing property. The asterisk, * in front of the rule, means that it is applied to all the containers, such as the div element. The box-sizing property means that the width of each element is measured from the left edge of the left border, to the right edge of the opposite border, instead of from the left edge of the element's content, to the right edge of the element's content. The box-sizing property also means that the height of each element is measured from the top edge of the top border, to the bottom edge of the opposite border, instead of from the top edge of the element's content, to the bottom edge of the element's content. The box-sizing property makes coding convenient for projects like this one.
Styling the body Element
The CSS rule for the body element is:
body {
font-family: Arial;
margin: 0;
}
The font the browser should use is Arial. The gap for all the four margins is 0px. This means that the left edge of the main content will align with the left edge of the webpage; the top edge of the main content will align with the top edge of the webpage; and the right edge of the main content will align with the right edge of the webpage.
Styling the Principal Div
The class-name of the principal div is "container". It has all the inner and innermost divs mentioned above. The CSS rule for it is:
div.container {
position: relative;
}
Remember that each large pane is a div with class-name "mySlide". The divs simply replace one another for the large pane.
If the reader had tested the complete code, he/she would have noticed that at the top left corner of the large pane, is the number-text, 1/6, 2/6, 3/6, etc. for each of the six images. Such number-text is in a paragraph element and the paragraph element is in another layer, placed in front of the image. The paragraph element will have a CSS absolute position property; so its parent element, the div.container, needs to have a position property. In this case, it is the relative position property (for the parent).
Styling the divs for the Large Pane
The first six inner divs, for the principal div.container, is each a large pane. To change the image, change the inner div. Each of these inner div has the class-name "mySlide". The CSS rule for each of these divs is:
div.mySlide {
display: none;
}
So, all the inner divs are not displayed initially. However, when the webpage loads (for the first time), the first div (with first image) is displayed. If the reader looks carefully at the content of the body element again, he/she will notice that the first inner div has the attribute, "style='display: block;' " . With that the first inner div (with its first image) is displayed, when the webpage loads (for the first time).
Styling the Number Text
At the top left corner of the large pane, is the number-text, 1/6, 2/6, 3/6, etc. for each of the six images. Each of these is in a paragraph element in each of the six (first) inner divs. The class-name for these six paragraphs is numbertext. The CSS rule for each of these paragraphs is:
p.numbertext {
position: absolute;
top: 0;
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
}
Each of these paragraphs, has the absolute position property, as each will be in a layer in front of the large pane div. Each will be at the top of the large pane div (inner div with "top: 0;"). Since text in a paragraph element starts on the left, so each number-text will be on the left of the paragraph, putting the number-text at the top-left corner of the image (large pane div). It is assumed at this point, that the reader knows the meanings of the rest of the CSS properties in the p.numbertext CSS rule.
Styling the Bar In-between
Between the large pane and the row of thumbnails, is a horizontal bar. This bar is a div (inner div) and its content is always the text name (or short description) of the image in the large pane. By code, the content of this div is: "The Woods". This is the name or description of the first image (inner div) that will appear as a large pane. The CSS rule is:
div.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
The text is at the horizontal center of the bar. The background color is, #222 (rather black). The top and bottom padding is 2px and the left and right padding is 16px. The text color is white.
Styling the Thumbnails
The thumbnails are the smaller size images in a row below the bar for the caption (name of image) bar. Each thumbnail is a div with class-name "cell". Each large pane is a div with class-name "mySlide" . The image in a highlighted thumbnail and the large pane is the same in size, and in fact, are the same image. However, CSS is used to make the thumbnail image much smaller than that of the large pane. The CSS rule is:
div.cell {
float: left;
width: 16.66%;
}
Each thumbnail div (div.cell) is floated left. With that they become inline-block elements. Now, the width of the div of the image in the large pane is 100% that of its parent container, which is the div.container . There are six thumbnail divs. 100% divided by 6, equals 16.66% . And so, the width of each div.cell is made 16.66% of the width of the parent div.row, which in this situation, happens to be the same as the width of its parent, div.container, since this div.row has not been given any width (neither in the body element nor in the CSS sheet). With the float effect and the size of the div for each thumbnail, all the thumbnail divs are in one horizontal row. It is the size of the div (be it for thumbnail or large pane) that determines the size of the image and not the image tag.
If the reader looked carefully in the code in the HTML body, he/she would have noticed that the width of each image in the image tag is made 100%. This 100% refers to the width of the container, which for the large pane or the thumbnail is still a div (class.mySlide and class.cell respectively).
Cursor for Thumbnail On-hover
When the mouse pointer goes over a thumbnail image, it becomes a hand. It is fashionable today to have it like that. The CSS rule for this is:
img.cursor {
cursor: pointer;
}
Thumbnail Image Dullness
In order to make an image dull, give it some degree of transparency. The image tags for the large pane have no class (no class-name). The class-name for each of the thumbnail images is "demo cursor", where "demo" and "cursor" refer to two different CSS rules in the style-sheet in the HTML style element. The "demo" CSS rule is:
img.demo {
opacity: 0.6;
}
By default, all thumbnail images are made dull, with "opacity: 0.6;". No transparency means an opacity of 1.
Highlighting a Thumbnail and Active Thumbnails
The CSS rule for this is:
img.active, img.demo:hover {
opacity: 1;
}
These are two different causes with one CSS rule (common body). Notice in the body element, that the first thumbnail image has the attribute, class='demo cursor active' . When the webpage loads (for the first time), this thumbnail image is given the opacity property "opacity: 1;" , which means brightness and no transparency.
When the mouse pointer goes over any thumbnail image, the thumbnail gets the "opacity: 1;" property, meaning, brightness and no transparency. Do not forget that the rest of the thumbnail images have the attribute, class='demo cursor' without 'active'.
Webpage On-load
When the webpage is loaded (for the first time), the image of the first thumbnail has to be displayed in the large pane; the caption bar needs to have the description (name) of the first image; and the first thumbnail has to be highlighted. These three features are obtained as follows:
Give the first inner div.mySlide the attribute, "style='display: block;' " . As coded in the style-sheet in the head element, the display value for each div.mySlide is none, and so no div.mySlide should appear in the large pane. However, having the attribute "style='display: block;' ", for the first div.mySlide overrides the none value effect for the first div.mySlide and its first image.
Secondly, the description (name) of "The Woods", for the first image is typed as paragraph content for the div.caption-container .
Thirdly, the first thumbnail image tag is given the attribute, "class='demo cursor active' " while the rest of the thumbnail image tags are given the attribute, "class='demo cursor' ", without the active feature. So, when the webpage loads, the first thumbnail image is highlighted (active). This means it is bright with no transparency, of the CSS property, "opacity: 1;" .
JavaScript
When a thumbnail is clicked, it should become highlighted and its image should appear in the large pane. JavaScript does that. The script code is:
<script type="text/javascript">
function showSlide(no) {
let slides = document.getElementsByClassName("mySlide");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[no-1].style.display = "block";
captionText.innerHTML = dots[no-1].alt;
dots[no-1].className += " active";
}
</script>
Basically, the script first turns all the values of the display property for all the large pane div.mySlide's, to none. Next it makes all the div.cell's inactive.
After that, it displays the particular div.mySlide for the large pane; then copies the alt value of the particular thumbnail image's tag, to the paragraph of the caption div. And finally the JavaScript makes the clicked thumbnail active. All that happens within a small fraction of the second, and the user would not even notice. Read through the code if that has not already been done.
The Complete Webpage Code
And there you have it: the complete webpage code is:
<!DOCTYPE html>
<html>
<head>
<title>Slideshow Gallery from Thumbnails</title>
<link rel='icon' href='https://www.examplee.com/images/logo.jpg' type='image/x-icon'>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Description of the Web Page.">
<style>
* {
box-sizing: border-box;
}
body {
font-family: Arial;
margin: 0;
}
/* Position the image container (needed to position the left and right arrows) */
div.container {
position: relative;
}
/* Hide the images by default */
div.mySlide {
display: none;
}
/* Number text (1/6 etc) */
p.numbertext {
position: absolute;
top: 0;
color: #f2f2f2;
font-size: 12px;
padding: 8px 12px;
}
/* Container for image text */
div.caption-container {
text-align: center;
background-color: #222;
padding: 2px 16px;
color: white;
}
/* Six cells side by side */
div.cell {
float: left;
width: 16.66%;
}
/* Add a pointer when hovering over the thumbnail images */
img.cursor {
cursor: pointer;
}
/* Add a transparency effect for thumnbail images */
img.demo {
opacity: 0.6;
}
img.active, img.demo:hover {
opacity: 1;
}
</style>
<script type="text/javascript">
function showSlide(no) {
let slides = document.getElementsByClassName("mySlide");
let dots = document.getElementsByClassName("demo");
let captionText = document.getElementById("caption");
for (let i = 0; i < slides.length; i++) {
slides[i].style.display = "none";
}
for (let i = 0; i < dots.length; i++) {
dots[i].className = dots[i].className.replace(" active", "");
}
slides[no-1].style.display = "block";
captionText.innerHTML = dots[no-1].alt;
dots[no-1].className += " active";
}
</script>
</head>
<body>
<h2 style="text-align:center">Slide Show Gallery</h2>
<div class="container">
<div class="mySlide" style='display: block;'>
<p class="numbertext">1 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_woods_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">2 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">3 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">4 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">5 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature_wide.jpg" style="width:100%">
</div>
<div class="mySlide">
<p class="numbertext">6 / 6</p>
<img src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow_wide.jpg" style="width:100%">
</div>
<div class="caption-container">
<p id="caption">The Woods</p>
</div>
<div class="row">
<div class="cell">
<img class="demo cursor active" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_woods_wide.jpg" style="width:100%" onclick="showSlide(1)" alt="The Woods">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_5terre_wide.jpg" style="width:100%" onclick="showSlide(2)" alt="Cinque Terre">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_mountains_wide.jpg" style="width:100%" onclick="showSlide(3)" alt="Mountains and fjords">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_lights_wide.jpg" style="width:100%" onclick="showSlide(4)" alt="Northern Lights">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_nature_wide.jpg" style="width:100%" onclick="showSlide(5)" alt="Nature and sunrise">
</div>
<div class="cell">
<img class="demo cursor" src="https://www.broad-network.com/Internet/articles/_general/dir0/images/img_snow_wide.jpg" style="width:100%" onclick="showSlide(6)" alt="Snowy Mountains">
</div>
</div>
</div>
</body>
</html>
The reader should copy the complete code into a text editor. Save the file with any name, but with the extension, .html . Open the file in the browser. Click some thumbnails to see their corresponding large image appear above, in the large pane.
Chrys