fancyboxでボックスが展開しない

Question

以下のコードで、fancyboxが展開しません。
consoleでエラーを見てもfancyboxはちゃんと読み込まれています。
何が原因か分かりますでしょうか？

コード
<ul class="banner">
	<div class="buttons clear">
		<a href="modal/xxx.html" class="modal">
			<img align="left" src="common/img/xxx.png" alt="" >
		</a>
		<a href="modal/yyy.html" class="modal">
			<img align="right" src="common/img/yyy.png" alt="">
		</a>
	</div>
</ul>
<style>
.buttons{
	text-align: center;
	margin-top: 30px;
}
.buttons a{
	display: inline-block;
	margin: 0 10px;
}
	
</style>
<script>
    $(document).ready(function($) {
      $("a.modal").fancybox({
        'width'          : 760,
        'height'         : 450,
        'padding'        : 1,
        'autoScale'      : false,
        'transitionIn'   : 'elastic',
        'transitionOut'  : 'none',
        'speedIn'        : 250,
        'overlayColor'   : '#ccc',
        'easingIn'       : 'swing',
        'overlayOpacity' : 0.8,
        'type'           : 'iframe',
        'scrolling'      : 'no',
		'autoSize' : false
        });
    });
</script>

このようなエラーがあるのは関係ありますか？

Answer 1

同設定で正常に展開するのを確認できました。
jqueryとかバージョンとかは大丈夫ですかね？

僕の方は公式サイト
Version 1.3.4 (2010/11/11)
の同梱ファイル一式（jquery,cssも）で動作確認しました。

Comments

[退会済みユーザー]

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
jQはこちらです。。。
私も公式の物をDLして読み込みました

[m.ts10806]

やはりそうですね。jqueryのそのバージョンではfancybox本体のjsから呼び出そうとしている幾つかの関数が動かないようです。
「Uncaught TypeError: Cannot read property 'msie' of undefined」が出ます。
同梱のjQueryを利用するか、googleapisを使いたいのであれば同じかそれ以上のバージョンを指定しましょう。

[退会済みユーザー]

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js" type="text/javascript" ></script>
こちらにしてみたのですが駄目でした。。。

[m.ts10806]

ごめんなさい。新しいのもだめですね。たぶん同梱のバージョン（jquery-1.4.3.min.js）だけです。それより新しいバージョンでは削除された機能（$.browser）を利用しているようです。

[m.ts10806]

さらにごめんなさい。fancybox3ですよね・・・2で確認してました。。ご提示のエラーは関係ありそうです。再検証してみます。

[m.ts10806]

公式サイトのドキュメント（http://fancyapps.com/fancybox/3/docs/）を見ると「jquery-3.2.1.js」を利用しているようです。

[m.ts10806]

fancybox2の場合→同梱のjquery（jquery-1.4.3.min.js）を利用
fancybox3の場合→jquery-3.2.1.jsを利用

[Lhankor_Mhy]

ソースコード調べてみました。
fancybox3にはmsieという文字列を含むコードがありません。
fancyboxの方では$.browser.msieというコードがありました。
jQuery.browser は1.3で非推奨、1.9で削除です。参考までに。

[m.ts10806]

FancyBox2じゃなくでFancyBoxですね。表記ミスです。失礼しました。

> MakotoHoshiさん
プラグインのバージョンにより適切なjQueryのバージョンを選択する必要があります。
できれば同梱のものを利用しましょう（またはプラグイン自体も最新にバージョンアップを）

[退会済みユーザー]

できました！
ありがとうございます。

[m.ts10806]

よかったです。バージョン問題はどこでもついてまわりますね・・

ただ1点、FancyBox自体は7年前のものですので非常に古い状態です。
特に縛りがないのであれば最新FancyBox3への移行をご検討ください。

Answer 2

とりあえず、

    $(document).ready(function($) {

↓

    $(document).ready(function() {

を試してみてください。

Comments

[退会済みユーザー]

試しましたができませんでした。

[Lhankor_Mhy]

エラーメッセージはなんと出ていますか？

[退会済みユーザー]

Uncaught TypeError: Cannot read property 'msie' of undefined
です。
下の方のコメントで新しいjQに変えてみても駄目でした