1

私のサイトにはバニラ flexslider がインストールされています。スライダーは、順序付けられていないリスト内のリスト項目を循環することによって動作します。リスト項目の後にキャプション コンテナーを追加するだけで、キャプションを追加できます。これは、ハードコードされた画像でうまく機能します。

私が直面している問題は、サイトに複数のセクションがあり、セクションごとに異なるスライド ショーがあることです。li 要素をハードコーディングする代わりに、php で生成しているため、ユーザーがページにアクセスすると、php はユーザーが表示しているページを特定し、それをスライドショーに渡します。次に、スライドショーは適切な画像ディレクトリを見つけ、そのディレクトリ内の画像が 2 つであろうと 20 であろうとすべてロードします。各スライドショーをハード コーディングするよりもはるかに簡単で、美しく機能します。

    <?php
        $dh = "image/slideShows/$slideShow/";
        $images = glob($dh . "*.jpg");                       
        foreach($images as $image){
            ?><li><img src="<?php echo $image;?>" alt="caption text" /></li><?php
        }
        closedir($dh);
    ?>

動的に生成された各画像の代替テキストを読み取ってから、キャプション コンテナーに配置するには、flexslider を取得する必要があります。

    <p class="caption">The alt text should show up here.</p>

私は使用してみました：

    $(window).load(function() {
      $('.flexslider').flexslider({
        animation: "fade",
        controlsContainer: "#slideShowContainer",
        start: function(slider) {
         $('.caption').html(this.alt);
        },
      });
    });

そして、flexslider の current.slide をいじっても無駄です。私はこれを一晩中検索してきましたが、これを理解できないようです。ここの誰かがミッシングリンクを提供してくれることを願っています。

前もって感謝します。

編集：私はこれを理解しましたが、それは真剣に複雑すぎる問題でした. 私がしなければならなかったのは、キャプション内の「alt」属性に使用していた EXIF データを呼び出すことだけでした。なぜこれに気付くのにそんなに時間がかかったのか、私にはわかりません。助けてくれてありがとう！

4

2 に答える 2

1 
start: function(slider) {
     var slideNumber = slider.currentSlide; 
     var alt = $('.slides img').eq(slideNumber + 1).attr('alt'); 
     $('.caption').html('<p>' + alt + '</p>'); 
    },
    before: function(slider) {
     var slideNumber = (slider.currentSlide + 1); 
     var alt = $('.slides img').eq(slideNumber + 1).attr('alt'); 
     $('.caption').html('<p>' + alt + '</p>'); 
    }
于 2012-12-02T19:20:42.120 に答える
0

.caption箱が1つしかないようですね。そして、スライドごとに内容を変更したいですか？

私は次のようなことを試みます：

before: function(slider) {
        var slideNumber = slider.currentSlide;
        var alt = $('.slides img').eq(slideNumber).attr('alt');
        $('.caption').html('<p>' + alt + '</p>');
    });
},

beforeスライドのトランジションごとに実行されることに注意してください。start

編集

OPは上記のコードを調整しましたが（以下のコメントを参照）、「コメントに記載されている問題で、最初の画像の2番目以降のスクロールにキャプションが表示されない」

おそらく、after代わりに使用する必要がありbeforeますか？そうすれば、実行する必要はありませんslideNumber+1（beforeこれは前のスライドを作成していたためです。おそらく、呼び出しstartの上でこれを実行することを優先して、関数を削除できます。flexslider

$(window).load(function(){または(document).ready(){：_

    var alt = $('.slides img').eq(0).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>');

と内flexslider()

after:function(slider) { 
    var slideNumber = slider.currentSlide; 
    var alt = $('.slides img').eq(slideNumber).attr('alt'); 
    $('.caption').html('<p>' + alt + '</p>'); 
},
于 2012-06-26T19:52:50.077 に答える