This is my requirejs-config.js in theme folder
var config = {
deps: [
"js/main",
],
map: {
'*': {
'flexslider': 'js/jquery.flexslider-min',
'typing': 'js/typed.min',
'fancybox': 'js/jquery.fancybox'
}
},
shim: {
"flexslider": ["jquery"],
"fancybox": ["jquery"],
"typing": ["jquery"]
}
};
And this is my main.js file in themfolder/web/js
define([
"jquery",
"flexslider",
"typing",
"fancybox"
],
function($,flexslider) {
"use strict";
$('.normalslider').flexslider({
animation: "slide",
initDelay:200,
});
$('.carousel').flexslider({
animation: "slide",
animationLoop: false,
initDelay:200,
itemWidth: 150,
itemMargin: 5
});
$(".lightbox").fancybox({
maxWidth : 800,
maxHeight : 600,
fitToView : false,
width : '90%',
height : '90%',
autoSize : false,
closeClick : false,
openEffect : 'none',
closeEffect : 'none'
});
return;
});
However, sometimes the script is loaded correctly and sometimes I got this error message
ReferenceError: jQuery is not defined[Learn More] jquery.fancybox.js:46:1
TypeError: $(...).fancybox is not a function[Learn More] main.js:128:2
Especially on the product catalogue page, it always give me that error message. My Magento is still in developer mode and all cache have been disabled.
If anyone know how to fix the issue, please help me. Thank you very much.