rollover（jQuery）とlightbox（prototype.js）の競合を回避する

javascriptを複数設定すると、干渉しあってうまく作動しないことがある、と聞いてはいたのですが、実際ロールオーバーとライトボックスを設定した際、競合が起きてしまいました。
これは初心者的な言い方で言うと、jQueryのjsファイルとライトボックスのprototype.jsファイルの両方に「$」の指示があるので、うまく読み込めなくなってしまう・・・というようなことみたいですね。


なので、jQueryの方のjsファイル（ここではrollover.js）の指示出しの「$」を置き換えればOKらしいっす。

手順は
1.HTMLファイルでjQueryのjsファイルの「$」を別のもの（「jQuery」）にするという指示を書く
2.jQueryのjsファイルの「$」を「jQuery」に置換する

・・・と意外に簡単！
で、具体的な書き方はこんな感じ。


【HTML】・・・赤字の部分を追加
        <!-- jQuery読み込みと競合回避 -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="common/js/rollover.js"></script>
        <!-- lightboxスプリクト読み込み -->
<script type="text/javascript" src="common/js/prototype.js"></script> 
<script type="text/javascript" src="common/js/scriptaculous.js?load=effects,builder"></script> 
<script type="text/javascript" src="common/js/lightbox.js"></script> 


【rollover.js】・・・「$(」を「jQuery(」に一括置換

jQuery(function(){
    jQuery("img.rollover").mouseover(function(){
        jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    }).mouseout(function(){
        jQuery(this).attr("src",jQuery(this).attr("src").replace(/^(.+)_on(\.[a-z]+)$/, "$1$2"));
    }).each(function(){
        jQuery("<img>").attr("src",jQuery(this).attr("src").replace(/^(.+)(\.[a-z]+)$/, "$1_on$2"))
    })
})

ここでちょっと注意なのが、rollover.jsの置換の際、「$」じゃなくて「$(」で置換すること。
すべての$をjQueryに置換するとダメです。
$1_on$2だとかの$をjQueryにしちゃったらうまくいきません。


参考サイト
http://mt.nosusume.com/2007/09/jqueryjsprototypejs.html