I want to include fancybox only when there is no touch device involved. This is my code so far:
<script>
yepnope([{
test : Modernizr.touch,
nope : './js/lib/fancybox/jquery.fancybox.pack.js',
callback : {
"jquery.fancybox.pack.js": function () {
console.log("fancybox loaded!");
}
}
}]);
</script>
This code is placed before the closing body tag. I get the error TypeError: k.apply is not a function
but this doesn't help me.
My questions:
Update:
Now I tried a different way:
<script>
Modernizr.load([
{
test : Modernizr.mq('screen and (max-width: 31.25em)'),
yep : {
'photoswipe' : ['/js/klass.min.js', '/js/code.photoswipe-3.0.5.min.js']
},
nope : {
'fancybox' : ['/js/lib/fancybox/jquery.fancybox.pack.js', '/js/lib/fancybox/jquery.fancybox.css']
},
callback : {
'photoswipe': function (url, result, key) {
var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
},
'fancybox': function (url, result, key) {
$('a.fancy').fancybox();
}
}
}
]);
</script>
I get the following error TypeError: a.split is not a function
. What I'm doing wrong?
Relative paths with ./folder
are possible (with /
at the beginning not). You also cannot use a key with an array. Either array or separate keys as shown here:
<script>
Modernizr.load({
test: Modernizr.mq('screen and (max-width: 31.25em)'),
yep: {
'photoswipe-klass' : './js/klass.min.js',
'photoswipe-js' : './js/code.photoswipe-3.0.5.min.js'
},
nope: {
'fancybox-js' : './js/lib/fancybox/jquery.fancybox.pack.js',
'fancybox-css' : './js/lib/fancybox/jquery.fancybox.css'
},
callback: {
'photoswipe-js': function (url, result, key) {
var myPhotoSwipe = $("a.fancy").photoSwipe({ enableMouseWheel: false , enableKeyboard: false });
},
'fancybox-js' : function (url, result, key) {
$('a.fancy').fancybox();
}
}
});
</script>