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.