FC2ブログ

jQueryとlightboxの競合を回避したい

デザイン-Design
03 /25 2010
前にjQueryを使ったTooltip制作方法を書いたことがあったが
透過PNG画像を使用してjQueryでTooltipを作るには

このjQueryとlightboxを合わせて使うとprototype.jsというスクリプトが
競合上書きされてしまってlightboxが動作しなくなってしまう。

今日はこれを回避する方法を記述。


手順その1
まず最初にjQuery読み込みの記述をする。
さらに競合を避けるための記述、
jQuery.noConflict();
を入れる。これはjQueryの変数に使われている「$」を「jQuery」に置き換えて
競合を回避するというもの。

<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="tooltip.js"></script>




手順その2
今回はtooltip.jsがjQueryで使用するスクリプト。
先にjQuery.noConflict();を使って置き換えしたので
今度はこのtooltip.js内の「$」を「jQuery」に書き換える。
例えばtooltip.jsの内容が以下のようなスクリプトだった場合、

$(function(){
$("p#tooltip_home").hide()
$("a").mouseover(function(){
$("p#tooltip_home").show().css({
"top":$(this).offset().top-47+"px",
"left":$(this).offset().left+$(this).width()-70+"px"
});
}).mouseout(function(){
$("p#tooltip_home").hide()
})
})

これを↓

jQuery(function(){
jQuery("p#tooltip_home").hide()
jQuery("a").mouseover(function(){
jQuery("p#tooltip_home").show().css({
"top":jQuery(this).offset().top-47+"px",
"left":jQuery(this).offset().left+jQuery(this).width()-70+"px"
});
}).mouseout(function(){
jQuery("p#tooltip_home").hide()
})
})

このように全て「jQuery」と記述する。



設定はこれでおしまい。
この後で同時に利用したいlightboxスクリプトを読み込みさせればOK。

(完成例)
/*jQuery読み込み、競合回避*/
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script type="text/javascript">
jQuery.noConflict();
</script>
<script type="text/javascript" src="tooltip.js"></script>
/*lightboxスクリプト読み込み*/
<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="scriptaculous.js?load=effects,builder"></script>
<script type="text/javascript" src="lightbox.js"></script>

このような感じになる。
スポンサーサイト



eru(エル)

WEBデザイナー。WEBサイトの制作を中心に企業ロゴデザイン、印刷物などの紙媒体も少々手がけています。

eru_design(エルデザイン)WEBSITE
では実務・趣味でのWEB制作品・イラストなどポートフォリオを掲載