お仕事メモ。
よくぶつかる課題。
複数設置すると、どれかが動かなくなるという件。

まずは、動かない例。

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="Scripts/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="Scripts/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
	$('#slider2').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: true
	});
});</script>

<!-- jcarousel用 -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

<!-- jcarousel -->
<script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/skin.css" />
<script type="text/javascript">


function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });


    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });


    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
     auto: 2,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
});
</script>

↓こちらで、解決。
読み込み順を変えるのだけども、かなり時間かかってもた。

<!-- jcarousel用 -->
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<script type="text/javascript" src="Scripts/jquery-1.4.2.min.js"></script>

<!-- jQuery library (served from Google) -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<!-- bxSlider Javascript file -->
<script src="Scripts/jquery.bxslider.min.js"></script>
<!-- bxSlider CSS file -->
<link href="Scripts/jquery.bxslider.css" rel="stylesheet" />
<script type="text/javascript">
$(function(){
	$('#slider2').bxSlider({
		auto:true,
		speed:1000,
		mode: 'fade',
		captions: true
	});
});</script>

<!-- jcarousel -->
<script type="text/javascript" src="Scripts/jquery.jcarousel.min.js"></script>
<link rel="stylesheet" type="text/css" href="style/skin.css" />
<script type="text/javascript">


function mycarousel_initCallback(carousel)
{
    // Disable autoscrolling if the user clicks the prev or next button.
    carousel.buttonNext.bind('click', function() {
        carousel.startAuto(0);
    });


    carousel.buttonPrev.bind('click', function() {
        carousel.startAuto(0);
    });


    // Pause autoscrolling if the user moves with the cursor over the clip.
    carousel.clip.hover(function() {
        carousel.stopAuto();
    }, function() {
        carousel.startAuto();
    });
};


jQuery(document).ready(function() {
    jQuery('#mycarousel').jcarousel({
        scroll: 1,
     auto: 2,
        wrap: 'circular',
        initCallback: mycarousel_initCallback
    });
});
</script>

明日もこぴっと頑張れし!

||||| 0 I Like It! |||||

2 Thoughts on “同HTML内で複数のjQueryを設置する方法

  1. こーいち on 2014年6月2日 at 9:31 PM said:

    またまた昔の話ですが、なぜか動かないのは小人(コロボックル)がいたずらしているから が定説でした。
    その後に マーフィーの法則が出てきていましたが、最近はソースコードなんですか? (笑

    • cerise cerise on 2014年6月3日 at 8:49 PM said:

      > こーいちさん

      最近は、こびとさんもマーフィーもあまり聞かなくなりましたね。
      基本ひとりで作業してるので、ひとりごとで、いろいろほざいてはいます。
      行き詰ったときに、くだらないハナシでもできる人が横にいると、案外早く解決したりするのですがね。わざわざ、誰かに電話するほどでもないですし…(笑)

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

Post Navigation