es6 import - fancybox is not a function

Question

Im trying to use fancybox in a project, however when importing it, I still get an error (fancybox is not a function) - This is what im doing:

import $ from 'jquery';
import jQuery from 'jquery'; 
import 'fancybox'; 

And later on, im trying to do:

// export jQuery for others scripts to use /inline scripts in some controls
window.$ = $;
window.jQuery = jQuery;

$(".list__item--img").fancybox({
'titlePosition': 'inside',
'transitionIn': 'none',
'transitionOut': 'none',
"padding": 0,
"overlayOpacity": 0.8,
"overlayColor": "#000",
"autoDimensions": false,
"width": 355,
"height": 190,
"showCloseButton": false
});

Answer 1

If you are using the fancybox npm module it looks like you need to pass your jquery object to it.

fancybox($) // or fancybox(jQuery)

This is where fancybox attaches itself to the jquery object.

Otherwise there is always the old fashion of way of including the second script tag on the page.