1

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

Tom
  • 101
  • 1
  • 1
  • 7
  • How do you add magnific-popup.js to the project? – Dmitriy Nevzorov Mar 19 '16 at 11:18
  • 1
    Magnific Popup has been added via NPM and is included using: `modal = require('magnific-popup')` – Tom Mar 19 '16 at 11:19
  • Are you sure that you initialized jQuery before and `cache.$btn_enlarge` is a jQuery element? – Dmitriy Nevzorov Mar 19 '16 at 11:38
  • Yeah the entire module is: '// #Begin banner.js var $ = require('jquery'), modal = require('magnific-popup'), cache = require('./cache'); function init() { uiBinding(); } function uiBinding() { cache.$btn_enlarge.magnificPopup({ preloader: true, items: { src: $(this).parent().find('img').attr('src') }, type: 'image', callbacks: { open: function() { } } }) } module.exports = function() { return init(); }; // #End banner.js' – Tom Mar 19 '16 at 11:51
  • Is `$(document).ready` ? when you call this module? – Dmitriy Nevzorov Mar 19 '16 at 11:56
  • Yeah within app.js document ready is fired to init the modules. I have other plugins working fine, I can't seem to get this or Photoswipe to work with Browserify. I found this on stack overflow: http://stackoverflow.com/questions/32616028/browserify-shim-jquery-expose-doesnt-process-a-lib-while-working-fine-on-anothe#_=_ Which suggests there could be a problem with Magnific Popup, but I could barking up the wrong tree! Just trying to get to the bottom of what the problem is, doesn't seem straight forward! – Tom Mar 19 '16 at 12:25
  • Anyone able to shed any light on this? @DmitriyNevzorov – Tom Mar 21 '16 at 10:49

2 Answers2

2

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

texelate
  • 2,460
  • 3
  • 24
  • 32
0

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",
}
Dmitriy Nevzorov
  • 6,042
  • 1
  • 20
  • 28