CSS3+HTML5
HTMLに複数設置したAjaxが動かない。
2012年11月12日 月曜日Ajaxライブラリはスマートなデザインと機能で、しかもjavascriptのプログラムすら書けない
僕みたいなWebデザイナーには多彩な表現と機能で、ほんまにAjaxサマサマですね。
jqueryとprototypeなど種類の違うライブラリを同一HTML上で使うと不具合があったりするのは
すでによく知られたことですが、
同じjqueryのAjaxを複数置いて、正常に動かないときの話です。
イメージ・スライダーとlightboxを使いたかったのですが、
以下のように<head>に書くと、どうしてもlightboxが動かなくなる。
——————————————————————————————–
<script type=”text/javascript” src=’js/jquery-1.7.2.min.js’></script>
<script type=’text/javascript’ src=’js/jquery.bxSlider.js’></script>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>
<!– イメージ・スライダー –>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#slider’).bxSlider({
auto: true,
pause: 5000,
speed: 500,
mode: ‘horizontal’,
prevText: ‘<img src=”images/arrow_left.png” width=”50″ height=”50″ />’,
nextText: ‘<img src=”images/arrow_right.png” width=”50″ height=”50″ />’,
pager:false,
});
});
</script>
<!– lightbox –>
<script type=”text/javascript”>
$(function(){
$(‘#gallery a’).lightBox();
});
</script>
——————————————————————————————–
<head>でCSSなどは併記するから、ついぞ読み込みのjavascriptも併記してしまうものですが、
じつは、上記の書き方だと、lightboxで使いたいスクリプトが
イメージスライダーのスクリプトの中身とで相殺されてしまって、
イメージスライダーはまともに動くのに、lightboxは動かなくなるみたいです。
そこでlightboxが必要としているjavascriptの読み込みは
イメージスライダーのスクリプトの後、lightboxのスクリプトの直前で読み込めば、
どっちもまともに動くようになりました。
すべてのケースに当てはまるかどうかはわかりませんが、
こんなときは一度試してみてください。
——————————————————————————————–
<script type=”text/javascript” src=’js/jquery-1.7.2.min.js’></script>
<!– イメージ・スライダー –>
<script type=’text/javascript’ src=’js/jquery.bxSlider.js’></script>
<script type=”text/javascript”>
$(document).ready(function(){
$(‘#slider’).bxSlider({
auto: true,
pause: 5000,
speed: 500,
mode: ‘horizontal’,
prevText: ‘<img src=”images/arrow_left.png” width=”50″ height=”50″ />’,
nextText: ‘<img src=”images/arrow_right.png” width=”50″ height=”50″ />’,
pager:false,
});
});
</script>
<!– lightbox –>
<script type=”text/javascript” src=”js/jquery.lightbox-0.5.js”></script>
<script type=”text/javascript”>
$(function(){
$(‘#gallery a’).lightBox();
});
</script>
——————————————————————————————–
