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>	
	

Image Title

Image Title

Image Title

Image Title

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" title="Image caption goes here"><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" title="Image caption goes here"><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" title="Image caption goes here"><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: {
	titleSrc: 'title',
	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.

0 Like 0 Dislike 0 Comment Share Tweet