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

2009年06月12日

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(); の直後で読み込むようにしましょう。