javascript - (Nivo Slider) 画像からタイトルを取得して Div に追加

Question

現在のスライド (画像) からタイトルを取得し、タイトル データを div に追加しようとしています。ここで nivo スライダーのデモ。

Nivo スライダー内で afterChange 関数を使用しようとしましたが、うまくいきませんでした。

afterChange: function(){
   $('#status .caption').data('nivo:vars').currentSlide.attr('title');
}

Answer 1

やりました。これが誰かに役立つことを願っています。

  current_title = jQuery('#slider').data('nivo:vars').currentImage.attr('title');
  jQuery('#slider .caption').text(current_title);

Answer 2

次のようなものを使用する必要があります: 私は Nivo で何もしていないので、'.data('nivo:vars').currentSlide.attr('title')' が実際に存在するかどうかはわかりません...

afterChange: function() {
    var title = $('#slider').data('nivo:vars').currentSlide.attr('title');
    $('#status .caption').html(title);
}

Answer 3

var sliderSelector = '#slider'; // Replace with your slider selector
var index = 0; // You start with slide 0 as the first slide

controlNav: true, // This solution relies on this to work
$(sliderSelector).nivoSlider({
    afterChange: function() {
        index = $(sliderSelector + ' .nivo-controlNav .nivo-control').filter('.active').index();
        showCaption(sliderSelector, index);
    },
    afterLoad: function() {
        showCaption(sliderSelector, index);
    }
});

そして、showCaption 関数

function showCaption(sliderSelector, index) {
    var title = $($(sliderSelector + ' img').get(index)).prop('title');
    if (title.length > 0) { // Determines if it has to show a caption
        var caption = $(sliderSelector + ' .nivo-caption').html(); // Gets the current caption
        console.log(caption);
    }
}