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の順番としてください。
順番を間違えると上手く動かないので注意です。

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

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

こうなります↓

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