Question

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

目前：

<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

在#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函数。您可以更改此项，而不是将“title”属性视为您想要的任何内容。

例如

    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;}

Nivo Slider，使用标题属性以外的标题？

3 个答案: