2017-03-14 7 views
1

私はReqire.JSを初めて使用しており、Google CDN jQueryでfancyboxを動作させることができません。CDN jQueryとファンシーボックスでJSが必要

マイファイル構造は次のとおりです。

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"]); 

main.js

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が定義されていないというエラーが発生しています。私はfancyboxライブラリとjQueryをDOMで見ることができますが、何も起こりません。

+0

私はこのようにすべきだと思います: 'jquery:" //ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min "、'。ドキュメントから 'jquery'で' ''括弧 - "" 'を削除してください:http://requirejs.org/docs/jquery.html – vanloc

+0

@vanlocどういたしましてですか?それを試して、動作していない。 btw両方の状況(大括弧の有無にかかわらず)、私はDOMでjqueryを見ることができます。ドキュメントでは、角かっこは表示されていませんが、例では角かっこで表示されています。 – Cromwell

+0

私はあなたのコードを正しく見ます。私はこの文書で '' ''は必要ないことを発見しました。だから、私はそれを取り除くべきだと思う。 – vanloc

答えて

1

文書化されたhereのように、ファンシーボックスファイルをシムにする必要があります。

ような何か:

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

requirejs(["app/index"]); 

あなたが取得しているエラーは、一つの第一の(それが小さいほど)とできないfancyboxを受け、恐らく非同期jQueryとfancyboxファイルの両方をロードしようとしている必要が原因であるにjQueryファイルがまだロードされておらず、エラーが発生しているので、これを使用する。

関連する問題