prototype.jsとjQueryの共存
文字サイズ変更スクリプト(ライブラリ:prototype.js)とjQueryを同じHTML上で動かすと、$の定義がバッティングするらしく、どちらか一方しか動かない。
なので、その対策。
1.JavaScriptの呼び出す順番
必ずprototype.js⇒sizechange.js⇒jquery.js⇒jqueryを使うスクリプトの順に呼ぶ。
具体的には、
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="cookiemanager.js"></script> <script type="text/javascript" src="sizechange.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript" src="thickbox.js"></script>
みたいな。
2.conflict対策
jquery.jsとthickbox.jsの間に、conflict対策を入れる。
全体ではこんな感じ。
<script type="text/javascript" src="prototype.js"></script> <script type="text/javascript" src="cookiemanager.js"></script> <script type="text/javascript" src="sizechange.js"></script> <script type="text/javascript" src="jquery.js"></script> <script type="text/javascript"> jQuery.noConflict(); </script> <script type="text/javascript" src="thickbox.js"></script>
3.thickbox.jsの$をjQueryに変更する。
たぶん、文字列は何でもいい。おそらく、$の変数名を変更すればいいだけなので。
一括で置換すると危険(変更しなくてもいいのがあるはず)なので、連続置換で確認しながらしたほうがいい。
変更前
$(document).ready(function(){ tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; });
変更後
jQuery(document).ready(function(){ tb_init('a.thickbox, area.thickbox, input.thickbox');//pass where to apply thickbox imgLoader = new Image();// preload image imgLoader.src = tb_pathToImage; });
みたいな感じで。
もっと楽なのがあったのかもしれないけど、とりあえずこの段階でメモ。