デモコードのようにfancyBox3を使用すると、ライトボックスを表示できません。なぜですか？

次のコードはデモコードhttp://fancyapps.com/fancybox/3/docs/#usageに基づいていますが、イメージ用のライムボックスを表示したいのですが、コードが機能しません、なぜですか？デモコードのようにfancyBox3を使用すると、ライトボックスを表示できません。なぜですか？

To：Rick、自分のコードでコードを修正しましたが、まだ動作しません。なぜですか？

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My page</title> 

    <!-- CSS --> 
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> 
</head> 
<body> 

    <!-- Your HTML content goes here --> 


    <a href="bmp/logo.png" data-fancybox data-caption="My caption"> 
     <img src="bmp/logo.png" alt="" /> 
    </a> 

    <!-- JS --> 
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="jquery.fancybox.min.js"></script> 
</body> 
</html>

改変コードも機能しません。

<!DOCTYPE html> 
<html> 
<head> 
    <meta charset="utf-8"> 
    <title>My page</title> 

    <!-- CSS --> 
    <link rel="stylesheet" type="text/css" href="jquery.fancybox.min.css"> 
</head> 
<body> 

    <!-- Your HTML content goes here --> 


    <a href="bmp/logo.png" data-fancybox data-caption="My caption"> 
     <img src="bmp/logo.png" alt="" /> 
    </a> 

    <!-- JS --> 
    <script src="//code.jquery.com/jquery-3.1.1.min.js"></script> 
    <script src="jquery.fancybox.min.js"></script> 

    <script type="text/javascript"> 
     $("[data-fancybox]").fancybox({ 
      // Options will go here 
     }); 
    </script> 

</body> 
</html>

出典

2017-03-18 HelloCW

をあなたはおそらく –

あなたがconsole.log' 'ですべてのエラーを取得してくださいオプションを設定する必要がありますか？ –

このフィーを試してくださいhttps://jsfiddle.net/uy5hjntv/ –

あなたが常に最初にやるべきこと...

<script type="text/javascript"> 
    $("[data-fancybox]").fancybox({ 
     // Options will go here 
    }); 
</script>

出典

2017-03-18 06:20:30 Rick

ありがとう！ To：Rick、自分のコードでコードを修正しましたが、まだ動作しません、なぜですか？ – HelloCW

実際のコンテンツを追加する必要があります。 ' '。それを単純な "テスト"に置き換えるとうまくいきます.. https://jsfiddle.net/x91343ru/ – Rick

申し訳ありませんが、まだ動作しません！あなたは私のための完全なサンプルコードを書くことができますか？ありがとう！ – HelloCW

それを初期化していない開発ツールを開き、任意のメッセージのコンソールをチェックすることです。手掛かりがあるはずです。私はあなたがjsとcssファイルを正しく読み込んでいないと思います - それらが存在するかどうかを確認し、必要に応じてファイルパスを調整します。

ところで、あなたも、CSDNからfancyBoxを使用することができます -

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

出典

2017-03-19 11:23:24 Janis

デモコードのようにfancyBox3を使用すると、ライトボックスを表示できません。なぜですか？

答えて

関連する問題