How to integrate Magnific Popup Javascript Library with Shopify
Isn’t it amazing to be able to zoom images in with a click and exit out in split second?
It is a great feature indeed when you’re trying to build a good user-friendly site to showcase a great product or a product in a blog or just code a picture of your dog.
But it is a hassle to implement huge blocks of code like using Bootstrap Modal or Zurb Foundation Reveal Modal.
Here is how you can easily integrate the Magnific Popup library with over 11K+ Stars on its GitHub repository as of now. It is a very popular and efficient library with good documentation.
Step 1: Some Shopify themes already have this feature built-in. So before you spend time coding this feature out yourself, please check your theme files or contact support to check if you already have this feature in your theme.
Step 2: Next you are going to the GitHub repository of Magnific Popup and download the required JS and CSS files from the /dist folder.
Step 3: You are going to download the files and host them in your assets folder of the theme where you will most probably have the theme’s CSS and JS files already.
Step 4: Call the files in your theme.liquid file.
<link rel=”stylesheet” href=”{{ ‘magnific-popup.css’ | asset_url }}”><script src=”{{ ‘jquery.magnific-popup.js’ | asset_url }}” defer></script><script src=”{{ ‘jquery.magnific-popup.min.js’ | asset_url }}” defer></script>
Step 5: In your JS file (if you do not have it already, create one custom.js file and call it in your theme), initialize your popup feature as given in the documentation:
$(document).ready(function() {
$('.image-link').magnificPopup({type:'image'});
});If you do not want to have an “image-link” class on every image tag and and but you have the image wrapped in the <div> tag with some class like “library” class which was also my case, you can try this code.
// Magnific Popup Code Start$(document).ready(function() {$('div.library').magnificPopup({delegate: 'a', type: 'image' });});// Magnific Popup Code End
Now go to the homepage or blog page and try the code something like:
// Magnific Popup Code Start<div class="library">
<a href="[big img src]">
<img src="[img src]" alt=""/>
</a>
</div>// Magnific Popup Code End
And enjoy!
