nivo-slider - Nivo Slider，使用标题属性以外的东西作为标题？

Question

有没有办法使用不同的 HTML 标记来填充 Nivo Slider 中的标题文本？对于搜索引擎，我不希望将内容填充到图像标签的标题属性中。

目前：

<img src="/image.jpg" title="Blah blah paragraph..." />

我想要这样的东西：

<img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div>

Answer 1

有一种更简单的方法可以做到这一点。

NivoSlider 支持 HTML 字幕。请参阅此处的文档：

http://docs.dev7studios.com/jquery-plugins/nivo-slider

使用 display:none 在#slider 之外的 div 中设置您的 html 标题，如下所示：

  <div id="htmlcaption" class="nivo-html-caption" style="display:none">
     <strong>This</strong> is an example of a <em>HTML</em> caption. 
   It even has <a href="#">a link</a>.
  </div>

现在，在您的幻灯片图像中，将 title 属性设置为标题元素的 id：

<img src="images/slide2.jpg" alt="" title="#htmlcaption" />

当滑块运行时，它会找到引用的标题并将其复制到活动标题 div 并为您设置动画。根本不需要更改 javascript。

Answer 2

打开你的 jquery.nivo.slider.js，第 94 行是 processCaption 函数。您可以将其更改为您想要的任何内容，而不是查看“标题”属性。

例如

    var processCaption = function(settings){
        var nivoCaption = $('.nivo-caption', slider);
        if(vars.currentImage.parent().find(".nivo-title").html() != '' && vars.currentImage.find(".nivo-title").html() != undefined){
            var title = vars.currentImage.find(".nivo-title").html();
            if(title.substr(0,1) == '#') title = $(title).html();   
            ...
        }
    }

Answer 3

感谢亚历山大为我指明了正确的方向！以下工作：

var processCaption = function(settings){
        var nivoCaption = $('.nivo-caption', slider);
        var nivoMyTitle = vars.currentImage.parent('.nivo-imageLink').find('.nivo-title'); //class of container with paragraph
        if(nivoMyTitle.html() != '' && nivoMyTitle.html() != undefined){
        var title = nivoMyTitle.html();
        if(title.substr(0,1) == '#') title = $(title).html();

的HTML：

<a href=""><img src="/image.jpg" /><div class="nivo-title">Blah blah paragraph...</div></a>

CSS：

.nivo-title{display:none;} .nivo-caption p{font-size:12px;}