Fancybox3 fix js library

この基本コードをfancybox3で動作させることができません。 jsライブラリをロードしていませんか？Fancybox3 fix js library

オリジナルサイトはこちら：http://fancyapps.com/fancybox/3/

<!doctype html> 
<html><head> 
<meta charset="UTF-8"> 
<script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> 
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> 

</head> 

<body> 

<a data-fancybox="gallery" href="big_1.jpg"> 
<img src="small_1.jpg"> 
</a> 


</body> 
</html>

出典

2017-03-17 sahusky

docsの例では、動作するはずのHTML要素の後にfancyboxスクリプトを明示的に埋め込みます。これを前もって組み込む場合は、代わりにJSの初期化メソッドを使用する必要があります。 – CBroe

終了bodyタグの前にスクリプトを入れてください。

<!doctype html> 
 
<html> 
 

 
<head> 
 
    <meta charset="UTF-8"> 
 
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.css" /> 
 
</head> 
 

 
<body> 
 

 
    <a data-fancybox="gallery" href="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg"> 
 
    <img src="https://i.ytimg.com/vi/yaqe1qesQ8c/maxresdefault.jpg"> 
 
    </a> 
 
    
 
    
 
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
 
    <script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.0.47/jquery.fancybox.min.js"></script> 
 
</body> 
 

 
</html>

出典

2017-03-17 12:50:12 dschu

まだこのバージョンを正常に動作させることができませんでした。これはあなたのために働きますか？ご協力いただきありがとうございます！ – sahusky

完璧に動作します。 [デモビデオ]（http://webm.land/media/AsbF.webm） – dschu

奇妙な。なぜこれがクロームとFirefoxで動作するのか知っていますが、私がサファリで実行すると、このエラーが表示されます：{ "message"： "Script error"、 "filename"： ""、 "lineno"： 0, "colno"：0 } – sahusky

追加することで素晴らしい仕事：

<link rel="stylesheet prefetch" href="jquery.fancybox.min.css">

を他人

みんなありがとうでお勧めのように身体終了タグの上にスクリプトを追加することで。

出典

2017-03-17 14:23:49 sahusky

答えて

関連する問題