0

これはかなり複雑な要求です。

したがって、私の問題には3つの要素があります。JQuery bxslider 、ウェブサイトのリリース後にクライアントが更新できる必要があるキャッチフレーズの Perch CMS セットと JavaScript コード ブロック。

私ができるようにしたいのは<h2>、jQuery bxslider がその背後にある画像を変更したときに、要素を適切なキャッチフレーズ (つまり、2 番目の製品がアイテム 2 に等しい) に置き換える関数を作成することです。

問題の HTML は次のとおりです。

                <div class="overlay">
                    <div class="tagbox"> 
                        <h2>We provide business and personal insurance to suit your individual needs</h2>
                        <a class="read-more">Read more</a> 
                    </div>
                </div>

bxSlider の標準スクリプト

$('.bxslider').bxSlider({
            pager: true, 
            auto: true,
            useCSS: false
            // onSlideAfter: /*NEED CHANGING FUNCTION HERE*/
        });

そして、私が使用するキャッチフレーズの配列を使用する jQuery スクリプトが必要です。

<?php perch_content('Taglines');?>

私は自分の機能のためにこのようなことをしようとしました:

        $(".tagbox h2").html(/*NEED TO GET ARRAY INDEX HERE i.e. heading 2, 3, 4*/);

$each()jQueryに付属する関数を使用してループスルーしようとしましたが、成功しませんでした。誰でも何か提案できますか？非常にトリッキーなコンセプトであり、クライアントが Perch でコンテンツを更新することにそれほど依存していなければ、それを行うことができました。

4

1 に答える 1

0

別のスライダーで同様の問題が発生しました。次の質問を参照してください: In JSSOR, how to access the current caption via Javascript?

編集者がカルーセル画像を入力する同じ Perch テンプレートで、perch_item_zero_index(0 から始まる) またはperch_item_index(1 から始まる) を使用して、コンテンツに (ID などで) 番号を付けることができます。

<li>
    <img src="/images/730_200/tree_root.jpg" />
   <div id="caption-slide-<perch:content id="perch_item_zero_index" type="hidden" />"><perch:content type="text" id="caption" label="Text for the tagline" required="true"  /></div>
</li>

したがって、編集者はこれらのタグラインをスライド画像と同じ項目に入力します。

あなたが書いているように、bxslider は各トランジションの終わりのコールバックを持っているので、それは良いことです。スライダーは に割り当てることで初期化されるvar sliderため、後でアクセスできることに注意してください。

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(){
    // get the text and place it somewhere else
  }
});

ここで必要なのは、自分がどのスライドにいるかを知ることだけです。http://bxslider.com/optionsを参照してください。 それがわかっている場合は、各トランジションの最後にコンテンツを取得して、DOM の別の場所に配置できます。

var slider = $('.bxslider').bxSlider({
  onSlideAfter: function(){
    // which slide are we in?
    var current = slider.getCurrentSlide();
    // get the text from the caption that corresponds to the current slide 
    // and place it somewhere else in the dom
    $(".tagline h2").text($("#caption-slide-" + current).text());
  }
});

テストされていませんが、基本的にはそれだけです。https://github.com/stevenwanderski/bxslider-4/issues/604には、 「auto」ではまだ機能しない可能性があるという問題があることに注意してください。

于 2014-08-16T08:37:11.150 に答える