Image Gallery (Bootstrap 4 + Magnific Popup

<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>CodePen - Image Gallery (Bootstrap 4 + Magnific Popup)</title>
  <meta name="viewport" content="width=device-width, initial-scale=1"><link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css">
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Fira+Sans:400,700'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.min.css'>

<style>

/* Only for demo purposes. */
body {
	font-family: "Fira Sans", sans-serif;
	background-color: #f1f1f1;
	margin: 85px 0;
}
/* Start Gallery CSS */
.thumb {
	margin-bottom: 15px;
}
.thumb:last-child {
	margin-bottom: 0;
}
/* CSS Image Hover Effects: https://www.nxworld.net/tips/css-image-hover-effects.html */
.thumb 
figure img {
  filter: grayscale(100%);
  transition: .3s ease-in-out;
}
.thumb 
figure:hover img {
  filter: grayscale(0);
}

</style>

</head>
<body>

<section class="container">
	<h1 class="my-4 text-center text-lg-left">Image Gallery</h1>
	<div class="row gallery">
		<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=1">
				<figure><img alt="Random Image" class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=1"></figure>
			</a>
		</div>

<div class="col-lg-3 col-md-4 col-xs-6 thumb">
			<a href="https://picsum.photos/940/650?random=8">
				<figure><img alt="Random Image" class="img-fluid img-thumbnail" src="https://picsum.photos/940/650?random=8"></figure>
			</a>
		</div>
	</div>
</section>

  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.5/popper.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js'></script><script>
$(document).ready(function() {
	$(".gallery").magnificPopup({
		delegate: "a",
		type: "image",
		tLoading: "Loading image #%curr%...",
		mainClass: "mfp-img-mobile",
		gallery: {
			enabled: true,
			navigateByImgClick: true,
			preload: [0, 1] // Will preload 0 - before current, and 1 after the current image
		},
		image: {
			tError: '<a href="%url%">The image #%curr%</a> could not be loaded.'
		}
	});
});

</script>

</body>
</html>

demo

Code Preview

Popular Posts

Pages

Image Gallery (Bootstrap 4 + Magnific Popup