Image Gallery with thumbnail using Vanilla JavaScript

you can create a simple Thumbnail Image Gallery with using Vanilla JavaScript.

Video tutorial of Image Gallery with thumbnail using Vanilla JavaScript

you can create a simple Thumbnail Image Gallery with using Vanilla JavaScript.

Image Gallery with thumbnail using Vanilla JavaScript [Source Codes]

This source code can help you to create Image Gallery with thumbnail using Vanilla JavaScript.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!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>
<link rel="stylesheet" type="text/css" href="css/style.css">



</head>
<body>

<div class="container">
	<figure>
		<img id="mainImg" src="images/pic1.jpg">
	</figure>

	<ul>
		<li><img id="thumb1" src="images/pic1.jpg"></li>
		<li><img id="thumb2" src="images/pic2.jpg"></li>
		<li><img id="thumb3" src="images/pic3.jpg"></li>
		<li><img id="thumb4" src="images/pic4.jpg"></li>
	</ul>

</div>

<script src="js/custom.js"></script>
</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	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;
}
ul{
	list-style: none;
	margin: 0;
	text-align: center;
}
ul li{
	margin: 0 5px;
	display: inline-block;
	width: 100px;
	border:1px solid #fff;
	cursor: pointer;
}
ul li img{
	display: block;
}

JavaScript Code

Copy

var thumb1 =  document.getElementById("thumb1");
var thumb1Src =  document.getElementById("thumb1").src;
var thumb2 =  document.getElementById("thumb2");
var thumb2Src =  document.getElementById("thumb2").src;
var thumb3 =  document.getElementById("thumb3");
var thumb3Src =  document.getElementById("thumb3").src;
var thumb4 =  document.getElementById("thumb4");
var thumb4Src =  document.getElementById("thumb4").src;

thumb1.addEventListener("click",function(){
	document.getElementById("mainImg").src = thumb1Src
})
thumb2.addEventListener("click",function(){
	document.getElementById("mainImg").src = thumb2Src
})
thumb3.addEventListener("click",function(){
	document.getElementById("mainImg").src = thumb3Src
})
thumb4.addEventListener("click",function(){
	document.getElementById("mainImg").src = thumb4Src
})

Build a Stop-Watch Web App Using JavaScript

Build Loan EMI Calculator DIY Finance Tool using JavaScript

Navigation Menu Click to Single Page Website Smooth Scrolling Using jQuery