jquery - jQueryサイクルの画像とテキスト

Question

jqueryを使用して、ボタンとボタンcyclyerを使用して画像間を循環しています。私がサイクリングしている写真は私のページの中央にあります。画像に加えて、画像が循環するときに変化するはずのテキスト（画像と一致する）があります。例はここで見ることができます。nextprevious

alt=''テキストが表示される場所にスタイルを適用したいので、画像で使用できず、そのテキストを表示するだけdivです。jQueryを使用してこのテキスト変更を行う方法はありますか？

Answer 1

jQuery Cycle を使用している場合は、divs またはfigures を使用して、画像とテキストをすべて 1 つのブロック レベルのコンテナーにまとめることができます。プラグインは各コンテナを 1 つのスライドとして扱います。例(またはCycle2 のこの例) を参照してください。

<div id="slideshow2" class="pics">
    <figure>
        <a href="images/1.jpg" rel="lightbox"><img src="images/1m.jpg"></a>
        <figcaption>Text text text text</figcaption>
    </figure>
    <figure>
        <a href="images/2.jpg" rel="lightbox"><img src="images/2m.jpg"></a>
        <figcaption>Text text text text</figcaption>
    </figure>
    <figure>
        <a href="images/3.jpg" rel="lightbox"><img src="images/3m.jpg"></a>
        <figcaption>Text text text text</figcaption>
    </figure>
</div>

次に、CSS ポジショニングを使用figcaptionして、ページ上の任意の場所に配置できます。

Answer 2

可能なテキストの配列を作成し、テキスト ボックス内のテキストを更新できます...

var textArray = [];
textArray[0] = "This is the text for the first image";
textArray[1] = "This is the text for the second image";
textArray[2] = "This is the text for the third image";

次に、各画像に次のような一意の識別子を付けます。

<img id="image_0" src="picture1.jpg" />
<img id="image_1" src="picture2.jpg" />
<img id="image_2" src="picture3.jpg" />

そして、画像が循環するときは、単純な検索と置換を行います

//get the identifier from the image ID, assuming that 'this' 
//refers to the image you just cycled

    var text_index = this.id.replace('image_','');

    $("p#text_box").html(textArray[text_index]);

p#text_box のスタイルは、CSS で好きなように設定できます