Usage of yepnope (relative paths, css and js)

Question

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:

• Can I load the js file with this relative path?
• Where does my relative path starts? From the path where yepnope lies?
• How can I conditionally load a JS and a CSS file?

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?

Answer 1

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>

Answer 2

Q: Can I load the js file with this relative path?

Yes, provided you have a structure similar to :

 index.html
--js/
----lib/
------modernizr.custom.js
--------fancybox/
----------jquery.fancyboxy.pack.js

See next answer to explain this...

Q: Where does my relative path starts? From the path where yepnope lies?

Modernizr takes the path from the position of the html page, not from the position of the modernizr load script (since it creates that script reference with that path in the html).

Q: How can I conditionally load a JS and a CSS file?

Pass in an array to nope instead of the single string for just the JavaScript :

nope : ['./js/lib/fancybox/jquery.fancybox.pack.js', './styles/fancybox/jquery.fancybox.pack.css']

Take a look at the docs, they're pretty good on this... http://modernizr.com/docs/#load