低価格・高品質・最速のHTMLコーディングはクロノドライブへ

お電話でのお問い合わせ・ご相談はこちら 03-6416-5813 [C-0]

お見積もりフォーム

Thickboxをprototype.jsと共存させる方法まとめ

Thickboxの使い方 – 画像やHTMLのポップアップをお手軽に!の記事でThickboxの使い方をご紹介しましたが、prototype.jsとの共存ができないというごとが判明したので、今回はprototype.jsとの共存方法をご紹介します。

こちらのサイトを参考にさせていただきました。
【メモ】 prototype.jsとjQuery.jsを共存させてThickboxを動かす

重要なポイントは上記のサイトでまとめられていますので、それを踏まえた実際のやり方がこちら。

1. thickbox.jsを修正する

まずは、thickbox.jsを修正します。
$( → jQuery( にすべて置換
$. → jQuery. にすべて置換
これだけです。

2. prototype.js と jquery.jsをHTMLから読み込む

読み込みの順番を prototype.js→jquery.jsの順番としてください。
順番を間違えると上手く動かないので注意です。

1<script type="text/javascript" src="/js/prototype.js"></script>
2<script type="text/javascript" src="/js/thickbox/jquery.js"></script>

3. jquery.jsをHTMLから読み込む指定の直後におまじない

var $j = jQuery.noConflict(); という javascript を jquery.js の直後に記述します。

1<script type="text/javascript">
2var $j = jQuery.noConflict();
3</script>

こうなります↓

1<script type="text/javascript" src="/js/prototype.js"></script>
2<script type="text/javascript" src="/js/thickbox/jquery.js"></script>
3<script type="text/javascript">
4var $j = jQuery.noConflict();
5</script>

以上で終了です。
prototype.js の ライブラリを使う場合は jquery.js の前で読み込み、jquery.jsのライブラリを使う場合は、var $j = jQuery.noConflict(); の直後で読み込むようにしましょう。

「フロントエンドエンジニアの教科書」を出版しました!HTML・CSS・JavaScript+α 次世代コーダーのための仕事術

HTMLコーダーからフロントエンドエンジニアにステップするために必要な知識と技術を解説。
現場で求められる人材となるためには、何を知っていて、何ができなければいけないのか。
Web制作の最先端にいるクロノドライブだからこそ教えられるノウハウが満載です。

出版社名:ソフトバンククリエイティブ
著者:クロノドライブ

Amazon.co.jp詳細ページへ