ファンシーボックスのトラブル

StackOverflow https://stackoverflow.com/questions/1452012

  •  12-09-2019
  •  | 
  •  

質問

ファンシーボックスを実装しようとしています。 http://fancybox.net/howto

要素に対してこの関数を呼び出したいと考えています。完全な JS ファイル。 http://fancybox.net/js/fancybox/jquery.fancybox-1.2.1.js

$.fn.fancybox = function(settings) {

私はこれを行いました:

$(document).ready(function() { 
    $("a#inline").fn.fancybox();  
});

ただし、(firebug 経由で) このエラーが発生し続けます。

$("a#inline").fn is undefined
[Break on this error] $("a#inline").fn.fancybox();

これはどういう意味ですか？基本的にインスタンス化に問題があります。

助けてください。

編集

HTML ファイル:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Technologies</title>
<link href="style.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="fancy/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="fancy/jquery.fancybox-1.2.1.js"></script> 
<link rel="stylesheet" href="fancy/fancybox.css" type="text/css" media="screen" />
<script type="text/javascript">
$(document).ready(function() { 
    $("a#inline").fancybox();  
}); 
</script>
</head>
<body>
<?php
include_once ("header.php");
?>
<div id="channel_calc">
How many Channels do I need?
<span id="yellow"><a id="inline" href="#ddm">Channel Calculator</a></span>
</div>
役に立ちましたか？

解決 

$('#inline').fancybox();

の.Fnプロトタイプを指す。

他のヒント

ディエラーを見つけますか？同じ問題を抱えていました。ソリューションではなく、私は二回jquery.jsファイルが含まれて、私は二回のJavaScriptファイルが含まれていたことだった。

私もこの問題を抱えて、私は二回jquery.jsを含めていたことが判明しました。第二の基準は、

私はfancybox呼び出しからなっていたエラーを修正削除
。

$（ "＃インライン"）fn.fancybox（）; $（ "＃インライン"）である必要がありfancybox（）;

あなたはjqueryのAFTER fancyboxロードすることを確認する必要があり、そうでなければ、エラー「fancyboxは関数ではありません」と、あなたの他のJavaScriptが同様に破壊されるでしょう。

BROKENます：

<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>
<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>

GOODます：

<script type="text/javascript" src="/js/jquery-1.6.1.js"></script>
<script type="text/javascript" src="/js/fancybox/jquery.fancybox-1.3.4.js"></script>

HTML と JS のフラグメントを jsfiddle 内にコピーしました。

  • にダウングレードしたとき jQuery 1.3.2, [フレームワークの下の左側のサイドバーを参照してください。 JSフィドル 例] コードは機能しません。
  • 1.4.4 以降のバージョンにアップグレードすると、機能しました。

解決

  • jQueryを次のようにアップグレードしてみてください 1.4.4 以降のバージョンを使用して再度テストしてください。
  • また、外部を含めていることに気づきました header.php, したがって、このファイルに他の jquery スクリプトが含まれていないことを確認してください。含まれていないと、js コードが破損します。

を使用した独自のコードの実例については、このリンクを参照してください。 jQueryバージョン1.4.4: http://jsfiddle.net/Ca6N5/

私はあなたにもjQueryの自分自身を含めるのを忘れてだと思います。 Fancyboxはjqueryのに依存します。

<script type="text/javascript" src="path-to-file/jquery.js"></script>

ベンは言ったように、jQueryの事故によって2回含まれていないことを確認してください。 

$("a#inline").fn.fancybox();
  1. 最新のjqueryとfancyboxを使用

  2. $("a#inline").fancybox();-> これは正しいです

  3. 以下に例を示します。 http://softm.org.ua/google-map-jquery-plugins/
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top