Create image lightbox gallery using magnific popup

Lightbox-image-gallery

In this tutorial, We are going to use magnific popup Jquery Library which is fully responsive and it supports all major browsers.

You can see its full documentation on below link Or Continue this short tutorial.

https://dimsemenov.com/plugins/magnific-popup/documentation.html

Below is an Example of image gallery:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title>Image Gallery</title>

	 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css">
	 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	 <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/jquery.magnific-popup.min.js"></script>
	 <style>
	 	.popup-gallery{
	 		width: 100%;
	 	}
	 	.popup-gallery img{
	 		width: 200px;
	 		height: 200px;
	 	}
	 </style>
</head>
<body>

<div class="popup-gallery">
	<a href="https://dummyimage.com/600X600/a5a5a5/000.jpg&text=image1" title="Gray">
		<img src="https://dummyimage.com/200X200/a5a5a5/000.jpg&text=image1" width="75" height="75">
	</a>
	<a href="https://dummyimage.com/600X600/e15b5b/000.jpg&text=image2" title="Red">
		<img src="https://dummyimage.com/200X200/e15b5b/000.jpg&text=image2" width="75" height="75">
	</a>
	<a href="https://dummyimage.com/600X600/f8e43a/000.jpg&text=image3" title="Yellow">
		<img src="https://dummyimage.com/200X200/f8e43a/000.jpg&text=image3" width="75" height="75">
	</a>
	<a href="https://dummyimage.com/600X600/4f2e8b/000.jpg&text=image4" title="Voilet">
		<img src="https://dummyimage.com/200X200/4f2e8b/000.jpg&text=image4" width="75" height="75">
	</a>
	<a href="https://dummyimage.com/600X600/2e83c6/000.jpg&text=image5" title="Blue">
		<img src="https://dummyimage.com/200X200/2e83c6/000.jpg&text=image5" width="75" height="75">
	</a>
	<a href="https://dummyimage.com/600X600/a15133/000.jpg&text=image6" title="Brown">
		<img src="https://dummyimage.com/200X200/a15133/000.jpg&text=image6" width="75" height="75">
	</a>
</div>

<script type="text/javascript">
$(document).ready(function() {
	$('.popup-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.',
			titleSrc: function(item) {
				return item.el.attr('title') + '<small>by Marsel Van Oosten</small>';
			}
		}
	});
});
</script>
	
</body>
</html>

Output:

Image Gallery

Leave a Reply

Your email address will not be published. Required fields are marked *