• 解決済 t.ryohei

    (@tryohei)


    いつもこちらのフォーラムを使わせていただいています。
    ありがとうございます。

    どうしても上手くいかない部分がありまして質問させて頂きます。

    jqueryのbxsliderを使って通常HPを作りました。
    現在そのサイトをワードプレスに移行する作業をしてるのですが、通常HPでは動いてる部分がワードプレスでは動かなくて困っています。

    メインのスライダーは動いています。ただメインスライダーの下にスライダーの切り替え用の画像を用意しているんですが、こっちをクリックしてもスライダーがきりかわってくれません。

    通常HPはこんな形で書いています。

    <script type=”text/javascript”>

    $(function(){
    var slider = $(‘#slider1’).bxSlider({
    controls: false,
    mode: ‘fade’,
    auto: true,
    speed: 1200,
    pause: 5500,
    });
    $(‘.thumbs a’).click(function(){
    var thumbIndex = $(‘.thumbs a’).index(this);
    slider.goToSlide(thumbIndex);
    $(‘.thumbs a’).removeClass(‘pager-active’);
    $(this).addClass(‘pager-active’);
    return false;
    });
    $(‘.thumbs a:first’).addClass(‘pager-active’);
    });
    </script>

    これをワードプレス用に

    <script type=”text/javascript”>
    jQuery(document).ready(function(){
    jQuery(‘#slider1’).bxSlider({
    controls: false,
    mode: ‘fade’,
    auto: true,
    speed: 1200,
    pause: 5500,
    });
    jQuery(‘.thumbs a’).click(function(){
    var thumbIndex = jQuery(‘.thumbs a’).index(this);
    slider.goToSlide(thumbIndex);
    jQuery(‘.thumbs a’).removeClass(‘pager-active’);
    jQuery(this).addClass(‘pager-active’);
    return false;
    });
    jQuery(‘.thumbs a:first’).addClass(‘pager-active’);

    }); 
    </script>

    に変更しています。
    自動スライド部分は動いているんですが、クリックファンクションの部分が動きません。
    何が原因かわからずに困っています。

    ご教授いただけると助かります。
    宜しくお願いします。

2件の返信を表示中 - 1 - 2件目 (全2件中)
  • ワードプレス用の方の前半部分

    jQuery('#slider1').bxSlider({
    controls: false,
    mode: 'fade',
    auto: true,
    speed: 1200,
    pause: 5500,
    });

    を変数に代入していないのが原因っぽいです。
    元のスクリプトとよく見比べて見るようにして下さい。

    また、書き換えが多いのでかえってややこしくなっているかもしれません。
    この場合は

    <script type="text/javascript">
    
    jQuery(document).ready(function($){
      var slider = $('#slider1').bxSlider({
        controls: false,
        mode: 'fade',
        auto: true,
        speed: 1200,
        pause: 5500,
      });
      $('.thumbs a').click(function(){
        var thumbIndex = $('.thumbs a').index(this);
        slider.goToSlide(thumbIndex);
        $('.thumbs a').removeClass('pager-active');
        $(this).addClass('pager-active');
        return false;
      });
      $('.thumbs a:first').addClass('pager-active');
    });
    </script>

    とやって中身をそのままコピペするほうが間違いはなくなると思います。

    トピック投稿者 t.ryohei

    (@tryohei)

    jdbb様
    頂いたアドバイスで解決しました。

    ありがとうございました。

    t.ryohei

2件の返信を表示中 - 1 - 2件目 (全2件中)

トピック「jqueryが部分的に動かない」には新たに返信することはできません。