带有 bxslider 的高级字幕

Question

这个问题已经被问过，但没有答案 - 我相信是因为没有提供足够的信息。

我使用 bxslider 作为我的模板。看这里： http://bxslider.com/examples/image-slideshow-captions

我可以使用“title”属性创建一个非常简单的标题，但我希望能够创建字幕（具有不同的属性，如较小的文本）并且我想将它变成一个链接。我已经尝试在容器中实现一个 div，也许很明显，如果不使用 jquery 实现它，我就无法让它与滑块同步。我也尝试过编辑 CSS 无济于事。

如何添加不仅仅是图片标题的标题？像一个 div 覆盖图片？

Answer 1

您甚至不需要使用 bxslider 提供的字幕选项。 添加标题作为构成幻灯片的 li 标记的一部分。这就是 captions:true 选项的作用，即将带有 bx-caption 类的 div 附加到幻灯片中。

例如：

  <li>
      <img src="http://bxslider.com/images/730_200/hill_trees.jpg" />
      <div class="caption1"> 
        <span>Image 1</span>
        <div class="caption2"><a id="img1a" href="#">Visit Australia</a></div>
      </div>
 </li>

通过这种方式使用 css，您也可以使用字体大小。

这是小提琴http://jsfiddle.net/s2L9P/

Answer 2

我想我解决了你的问题，但我无法测试它，因为你的小提琴在你创建它时不起作用。

将代码从 Appends image captions to the DOM 更改为：

    /**
     * Appends image captions to the DOM
     * NETCreator enhancement (http://www.netcreator.ro)
     */
    var appendCaptions = function(){
        // cycle through each child
        slider.children.each(function(index){
            // get the image title attribute
            var title = $(this).find('img:first').attr('title');
            var nc_subtitle = $(this).find('img:first').attr('nc-subtitle');
            // append the caption
            if (title != undefined && ('' + title).length && nc_subtitle != undefined && ('' + nc_subtitle).length) {
                $(this).append('<div class="bx-caption"><span class="title">' + title + '</span><br/><span class="nc_subtitle">' + nc_subtitle + '</span></div>');
            }
        });
    }

现在您可以为字幕添加字幕：

<a href ="page.php">
    <img src="http://calindragan.files.wordpress.com/2011/01/winter.jpg" title="title 1 here" nc-subtitle="The second title"/>
</a>

您可以根据需要使用 CSS 类 nc_subtitle 设置字幕样式。

希望对你有帮助！

编辑

修改你共享的整个 JavaScript：

http://pastebin.com/0fvUezg1

还有带有这个的 HTML：

http://pastebin.com/T038drDV

有效。