How to use jQuery FancyBox on CMS in Magento 2.3?

[Alldo Group]

Hello,

I'm trying to use FancyBox on CMS pages in Magento 2.3 (fresh install without extensions).

I load the following through default_head_blocks.xml using <link src="js/custom.js"/>.

require(['jquery', 'fancybox', 'domReady!'], function($, fancybox, doc) {
var fancyboxExample = {    
openModal: function() {        
$.fancybox.open(this.$modal);
    },
closeModal: function() {
$.fancybox.close(true);
    }
};fancyboxExample.init();
});

jQuery is loaded through requirejs-config.js

var config = {
    map: {
        '*': {
            fancybox: 'js/jquery.fancybox.min',
        }
    }
};

But im getting these errors:

 

1. Uncaught ReferenceError: jQuery is not defined 
2. Uncaught TypeError: fancyboxExample.init is not a function

Note that I'm using latest Infortis Ultimo Theme.

Thanks, 

[Sunil Patel]

Hello,

don't use the default.xml file, just add into inline js and try it

like just go to that static block and page and add it

Hope it will help you to solve your issue..

[Alldo Group]

Thanks Sunil,

I have moved the js content to the footer, and now there's only one error left:

Uncaught ReferenceError: jQuery is not defined

And the error is only thrown on first page load, then disappears, if I reload (using cache)?!

Any clues?

[Sunil Patel · Accepted solution]

Hello @Alldo Group 

you need to use shim for that

more info you can found into https://magento.stackexchange.com/questions/102113/requirejs-shim-option-not-working

hope it will help you.

[Alldo Group]

I think it's working right now, I'll do some more tests and then confirm