I'm using require to load in a number of files, including the jQuery plugin Slick Carousel and a separate plugin that adds a lightbox to the carousel. The carousel and lightbox both load correctly and work about 10% of the time. About 90% of the time, the carousel loads and works fine, but I get this error when I try to call the lightbox:
Uncaught TypeError: $(...).slickLightbox is not a function
And that's it. It looks to me like require is somehow loading the lightbox out of order, but I can't imagine why. Here is my code:
var myRequire = require.config({
baseUrl: './',
appDir: './',
context: 'mypost',
shim: {
slick:{
deps: ['jquery'],
exports: 'slick'
},
slickLightbox:{
deps: ['slick','jquery'],
exports: 'slickLightbox'
}
},
paths: {
jquery: myPost.url.assets + 'js/lib/jquery.min',
jqueryMigrate: 'http://code.jquery.com/jquery-migrate-1.2.1.min',
slick: myPost.url.assets + 'js/lib/slick.min',
slickLightbox: myPost.url.assets + 'js/lib/slick-lightbox',
TimelineMax: myPost.url.assets + 'js/lib/TimelineMax',
TweenMax: myPost.url.assets + 'js/lib/TweenMax.min',
ScrollMagic: myPost.url.assets + 'js/lib/jquery.scrollmagic'
}
});
myRequire(['jquery','slick','slickLightbox','TweenMax', 'TimelineMax', 'ScrollMagic'], function ($, slick,slickLightbox,TweenMax, TimelineMax, ScrollMagic) {
'use strict';
After a few attempt this bellow will fix your code above.