2009-06-15

[Ajax・Javascript] galleyviewとlightboxの共存

Ajaxを使っているとほぼ間違いなく遭遇するのが、
jQueryとprototypeのコンフリクト。

WEBを検索すればいくつでも例があるのですが、
使っているAjaxが違ったりすると、どうもうまく動かなかったりします。

今回はgalleyview(jQuery系)とlightbox(prototype系)。
結果的には、

<script type=”text/javascript” src=”../js/galleryview/jquery-1.3.2.js”></script>
<script type=”text/javascript”>
jQuery.noConflict();
</script>
<script type=”text/javascript” src=”../js/galleryview/jquery.easing.1.3.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.galleryview-1.1.js”></script>
<script type=”text/javascript” src=”../js/galleryview/jquery.timers-1.1.2.js”></script>
<script type=”text/javascript”>
jQuery(document).ready(function(){
jQuery(‘#slide’).galleryView({
panel_width: 640,
panel_height: 300,
frame_width: 80,
frame_height: 38,
transition_interval: 3000,
overlay_height: 0
});
});
</script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js”></script>
<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.2/scriptaculous.js”></script>
<script type=”text/javascript” src=”../js/lightview.js”></script>

となりました。

jQueryを上に記述し、jquery.galleryview-1.1.jsの $( を jQuery( に変換しています。

Comment:

Trackback URL: