ファンシーボックスの基本的な実装

私は基本的なjqueryファンシーボックスを動作させることができませんでした。別のWebサイト（http://www.websitecodetutorials.com/code/jquery-plugins/jquery-fancybox.php）のチュートリアルであるfancyboxのWebサイト（http://fancybox.net/howto）のドキュメントから作業を試み、一般的な問題（Basic "jquery fancybox"）、（Fancybox not working）、（FancyBox not working at all）を確認するためにいくつかの関連記事を参照しようとしました。ファンシーボックスの基本的な実装

シンプルなものがあると私は見落としています。私はfancyboxを呼び出す前にCDNでjqueryを呼び出します。私はfancyboxのCSSファイルへのリンクを持っています。私はheadとbodyタグの中でfancyboxにスクリプト呼び出しを移動しようとしました。

jqueryが正常に起動したアラート関数で動作することをテストしました。 fancyboxのcssファイルとjsファイルは、私のhtmlファイルと画像と同じディレクトリにあります。以下は私が現在テストしているHTMLの整理されたHTMLです。

HTML：

<!DOCTYPE Html> 
<html> 
    <head>  
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> 
     <link href="jquery.fancybox.css" /> 
     <script src="jquery.fancybox.js"></script> 
    </head> 
    <body>  
     <a data-fancybox="gallery" href="BigNewLogo.png"><img src="newLogo.PNG"></a> 
     <a data-fancybox="gallery" href="BigNewLogo.png"><img src="newLogo.PNG"></a> 
    </body> 
</html>

結果はfancyboxを除くと同じ動作です。小さな画像が表示され、クリックするとページから離れて大きな画像が表示されます。

アップデート：次のエラーがコンソールログに表示されます。

Uncaught TypeError: $(...).on is not a function 
    at jquery.fancybox.js:2659 
    at jquery.fancybox.js:2661 
(anonymous) @ jquery.fancybox.js:2659 
(anonymous) @ jquery.fancybox.js:2661

どのような援助が大幅に高く評価されます。ありがとうございました！

出典

2017-03-21 Lothar

コンソールにエラーがありますか？ –

私はそれを見ると思っていたはずです。はい、それはエラーを示しました：jquery.fancybox.js：2659 Uncaught TypeError：$（...）。onは関数ではありません jquery.fancybox.js：2659 jquery.fancybox.js：2661 – Lothar

jQueryの最新バージョンを使用していますか？ –

このような状況では、常に開発者向けのコンソールを見てください。あなたの場合、メッセージには：

TypeError: $(...).on is not a function

というメッセージが表示されます。「オン」機能は存在しません。 jQueryのドキュメント - http://api.jquery.com/on/は -

version added: 1.7

だから、あなたはそれを動作させるために1.7よりも高いjQueryのバージョンが必要であろうと述べています。

出典

2017-03-21 19:41:29 Janis

問題は、jquery v1.4（fancybox Webサイトのガイドに似ています）を使用していたことでした。これをjquery 3.1.1に変更することで問題は解決しました。

出典

2017-03-21 18:44:00 Lothar

ファンシーボックスの基本的な実装

答えて

関連する問題