Javascript 需要带CDN jQuery和Fancybox的JS_Javascript_Jquery_Requirejs

Javascript 需要带CDN jQuery和Fancybox的JS

javascript jquery requirejs

Javascript 需要带CDN jQuery和Fancybox的JS,javascript,jquery,requirejs,Javascript,Jquery,Requirejs,我是Reqire.JS新手，我无法让fancybox与Google CDN jQuery一起工作我的文件结构是： index.html/ ├── js/ │ ├── app.js │ ├── app/ │ | ├── main.js │ ├── lib/ │ | ├── require.js │ | ├── jquery.fancybox.js │ | ├── jquery.fancybox-thumbs.js │ | ├── jquery.

我是Reqire.JS新手，我无法让fancybox与Google CDN jQuery一起工作

我的文件结构是：

index.html/
├── js/
│   ├── app.js
│   ├── app/
│   |   ├── main.js
│   ├── lib/
│   |   ├── require.js
│   |   ├── jquery.fancybox.js
│   |   ├── jquery.fancybox-thumbs.js
│   |   ├── jquery.fancybox-media.js
│   |   ├── jquery.mousewheel-3.0.6.pack.js

app.js

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jquery.fancybox": "jquery.fancybox",
      "jquery.fancybox-thumbs": "jquery.fancybox-thumbs",
      "jquery.fancybox-media": "jquery.fancybox-media",
      "jquery.mousewheel-3.0.6.pack": "jquery.mousewheel-3.0.6.pack"
    }
});

requirejs(["app/main"]);

define(["jquery", "jquery.fancybox-media", "jquery.fancybox-thumbs", "jquery.fancybox", "jquery.mousewheel-3.0.6.pack"], function ($) {
    $(function() {
        $('.fancybox').fancybox();
    });
});

main.js

requirejs.config({
    "baseUrl": "js/lib",
    "paths": {
      "app": "../app",
      "jquery": "//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min",
      "jquery.fancybox": "jquery.fancybox",
      "jquery.fancybox-thumbs": "jquery.fancybox-thumbs",
      "jquery.fancybox-media": "jquery.fancybox-media",
      "jquery.mousewheel-3.0.6.pack": "jquery.mousewheel-3.0.6.pack"
    }
});

requirejs(["app/main"]);

define(["jquery", "jquery.fancybox-media", "jquery.fancybox-thumbs", "jquery.fancybox", "jquery.mousewheel-3.0.6.pack"], function ($) {
    $(function() {
        $('.fancybox').fancybox();
    });
});

HTML

<head>
        <script data-main="js/app" src="js/lib/require.js"></script>
    </head>
    <body>
        <a class="fancybox" href="myImage.jpg" data-fancybox-group="gallery" title="">
            <h5>Click</h5>
        </a>
    </body>

我仍然得到jQuery未定义的错误。我可以在DOM上看到我的fancybox库和jQuery，但什么都没有发生。

您可能需要按照文档中的说明填充fancybox文件

比如：

requirejs.config({
    baseUrl: 'Scripts',
    paths: {
        "app": "../App",
        "jquery": 'jquery-3.1.1' //Or use cdn
    },
    shim: {
        "jquery.fancybox": ["jquery"]
    }
});

requirejs(["app/index"]);

您遇到的错误很可能是因为需要尝试异步加载jQuery和fancybox文件，首先接收fancybox文件（因为它较小），然后无法使用它，因为jQuery文件尚未加载，因此会出错。

我认为应该是这样的：

jQuery:“//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min”，

。从文档中删除

括号-”

位于

jquery

：@vanloc您确定吗？已经尝试过了，但不起作用。顺便说一句，在这两种情况下（带括号或不带括号），我可以在DOM中看到jquery。在文档中，它显示没有括号，但在示例中，它使用了括号。我只是正确地看到了您的代码。我在文档中发现不需要

“”

。因此，我认为应该删除它。@vanloc我已经删除了括号，但不起作用。有什么建议吗？