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 に答える