Create Fancy Image gallery using HTML CSS and jQuery

This blog to learn how to create image gallery with popup using only jQuery without any plugin.

Video tutorial of Image Gallery with Popup box using jQuery

This video to learn how to create image gallery with popup using only jQuery without any plugin.

Image Gallery with Popup box using jQuery [Source Codes]

This source code can help you to create Image Gallery with Popup box using jQuery

jQuery library source

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="gallery-wrap">
	<div class="gallery-box">
		<a href="images/pic1.jpg" ><img src="images/pic1.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic2.jpg" ><img src="images/pic2.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic3.jpg" ><img src="images/pic3.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic4.jpg" ><img src="images/pic4.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic5.jpg" ><img src="images/pic5.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic6.jpg" ><img src="images/pic6.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic1.jpg" ><img src="images/pic1.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic2.jpg" ><img src="images/pic2.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic3.jpg" ><img src="images/pic3.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic4.jpg" ><img src="images/pic4.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic1.jpg" ><img src="images/pic1.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic2.jpg" ><img src="images/pic2.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic3.jpg" ><img src="images/pic3.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic4.jpg" ><img src="images/pic4.jpg" alt=""></a>
	</div>
	<div class="gallery-box">
		<a href="images/pic5.jpg" ><img src="images/pic5.jpg" alt=""></a>
	</div>




</div>



<script type="text/javascript" src="js/jquery-3.1.1.min.js"></script>
<script type="text/javascript" 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;
	color: #000;
}

.gallery-wrap{
	width: 100%;
	padding: 15px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}
.gallery-box{
	flex:0 0 calc(20% - 30px);
	margin:15px;
}
.gallery-box img{
	max-width: 100%;
	min-width: 100%;
}

.pop_img_wrap{
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: 100vh;
	background:rgba(0,0,0,0.4);
	display: flex;
	align-items: center;
	justify-content: space-around;
	opacity: 0;
}
.active{
	animation: fadeIn 0.3s;
	animation-fill-mode: forwards;
}
.dactive{
	animation: fadeOut 0.3s;
	animation-fill-mode: forwards;
}
@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
@keyframes fadeOut{
	0%{
		opacity: 1;
	}
	100%{
		opacity: 0 !important;
	}
}
.pop_img{
	width: 70vw;
	max-height: 80vh;
	overflow:hidden;
	border:1px solid #fff;
}
.pop_img img{
	max-width: 100%;
	min-width: 100%;
}

JavaScript Code

Copy

$(".gallery-box a").click(function(event) {
	pop_img = $(this).attr('href');
	$("body").append('<div class="pop_img_wrap"><div class="pop_img"><img src="'+pop_img+'"></div></div>')
	$(".pop_img_wrap").addClass('active');
	$(".pop_img_wrap").click(function(event) {
		$(".pop_img_wrap").addClass('dactive');
		setTimeout(function(){
			$(".pop_img_wrap").remove()
		},300)
	});
	$(".pop_img").click(function(event) {
		return false
	});
	return false	

});

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