2

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

目前:

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

我想要这样的东西:

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

4

3 回答 3

4

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

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。

于 2013-09-09T07:50:37.220 回答
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();   
            ...
        }
    }
于 2013-07-09T22:08:36.203 回答
0

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

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;}
于 2013-07-09T23:01:58.450 回答