How to make gallery images popup and slide with magnific popup jquery?


Magnific pop up is a light weight jquery that allows us to create gallery pages with great convenience. The only thing you'll need is the css and js files that the magnific popup requires and a few lines of additional js script in the page itself to connect the desired contents to its js class.

		<link rel="stylesheet" type="text/css" href="css/popup.css">
		<script type="text/javascript" src="js/popup.js"></script>	
	

Now, you can create your own custom div to define the width of the image container while adding the class popup-gallery to it. Wrap the image with the HTML <a> where the path of the image from the current file is needed to be added.

		<div class="col-sm-3 popup-gallery">
		<a href="images/image1.jpg"><img src="images/image1.jpg" width="100%"></a>
		<h3>Image Title</h3>
		</div>
		<div class="col-sm-3 popup-gallery">
		<a href="images/image2.jpg"><img src="images/image2.jpg" width="100%"></a>
		<h3>Image Title</h3>
		</div>
		<div class="col-sm-3 popup-gallery">
		<a href="images/image3.jpg"><img src="images/image3.jpg" width="100%"></a>
		<h3>Image Title</h3>
		</div>	
	

Finally, add the additional script required to activate the magnificent popup plugin right before the closing HTML </body>.

		<script>
		$('.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.',			
}
});
</script>	

Refresh your page and you'll see the beauty of this magnificent popup jquery plugin.

Download Magnificent Popup zip file from here.