javascriptcssfancybox-2modernizryepnope

Usage of yepnope (relative paths, css and js)


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?


Solution

  • 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>