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>

——————————————————————————————–

ページトップへ