Create image lightbox gallery using magnific popup


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.

Below is an Example of image gallery:

<!DOCTYPE html>
<html lang="en">
	<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="">
	 <script type="text/javascript" src=""></script>
	 <script type="text/javascript" src=""></script>
	 		width: 100%;
	 	.popup-gallery img{
	 		width: 200px;
	 		height: 200px;

<div class="popup-gallery">
	<a href="" title="Gray">
		<img src="" width="75" height="75">
	<a href="" title="Red">
		<img src="" width="75" height="75">
	<a href="" title="Yellow">
		<img src="" width="75" height="75">
	<a href="" title="Voilet">
		<img src="" width="75" height="75">
	<a href="" title="Blue">
		<img src="" width="75" height="75">
	<a href="" title="Brown">
		<img src="" width="75" height="75">

<script type="text/javascript">
$(document).ready(function() {
		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>';


Image Gallery

Leave a Reply

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