How to get Magnific Popup working with Browserify

Question

I'm trying to get Magnific Popup to work alongside Browserify and I can't seem to get it to work. I don't have an in depth knowledge of the Browserify setup. All I keep getting is the following error:

Uncaught TypeError: cache.$btn_enlarge.magnificPopup is not a function

Any help would be gratefully received!

Thanks, Tom

Answer 1

I tried everything possible with the dist files — even with a shim. I ended up realising that the code it's wrapped in (see Gruntfile.js) makes it incompatible with Gulp and Browserify. Instead concat (either manually or with Gulp) the files in the src/js folder in this order:

core.js

inline.js

ajax.js

image.js

zoom.js

iframe.js

gallery.js

retina.js

It will work then. I've packaged the files for the latest release here if you want them: https://github.com/texelate/magnificPopupGulpBrowserify/blob/master/README.md

Answer 2

You can use browserify-shim

npm install browserify-shim --save-dev

package.json

"browserify": {
  "transform": ["browserify-shim"]
},
"browserify-shim": {
  "./path/to/magnific-popup.js": "magnific-popup",
}