(Nivo Slider) 从 Image 中获取标题并添加到 Div答案

【问题标题】：(Nivo Slider) Grab title from Image and add to Div(Nivo Slider) 从 Image 中获取标题并添加到 Div
【发布时间】：2013-01-30 13:11:24
【问题描述】：

我正在尝试从当前幻灯片（图像）中获取标题，然后将标题数据添加到 div。 Here nivo slider's demo.

我尝试在 Nivo 滑块中使用 afterChange 函数，但没有任何运气。

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

【问题讨论】：

标签： javascript jquery nivo-slider

【解决方案1】：

我已经做到了。希望这对某人有所帮助。

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

【讨论】：

如果你有一个像 title="#imgCaption" 这样的标题，nivo 滑块必须加载#imgCaption 的内容才能显示为标题，它会不会失败？我不确定..但为了确定，我会在下面发布答案

【解决方案2】：

你必须使用这样的东西：我没有对 Nivo 做过任何事情，我不确定 '.data('nivo:vars').currentSlide.attr('title')' 是否真的存在.. .

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

【讨论】：

TypeError: $(...).data(...).currentSlide.attr 不是函数
$('#slider').data("nivo:vars").currentImage.存在于 Nivo 内部以捕获当前幻灯片的数据。
我只是测试一下。 $('#slider').data("nivo:vars").currentImage 存在并且可以从滑块外部使用。所以得到这样的标题： var title = $('#slider').data("nivo:vars").currentImage.attr('title');会工作的。

【解决方案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);
    }
}

【讨论】：