Question

我正在尝试使用带有fancybox 2的图像alt标签中的标题和“字幕”...出于某种原因我似乎无法工作......

    $('.fancybox').fancybox({

        beforeShow : function() {
            this.title = '<div class="new-title-title">' + $(this).attr('title') + '</div><div class="new-title-alt">' +  $(this).children('img:first').attr('alt') + '</div>';
        },

        helpers : {
            title: {
                type: 'inner',
                beforeShow: function(opts) {
                    console.log('beforeShow title helper');
                },
            },
        },

    });

来自$（this）.attr（'title'）的标题工作，来自$（this）的字幕。儿童（'img：first'）。attr（'alt'）说未定义...我知道我必须是想念一些简单的......

Answer 1

如果我理解正确，您希望将fancybox标题组合为title标记中的a属性+ alt标记中的img属性。

如果以上是正确的，那么有一个类似

的html

<a class="fancybox" href="images/01.jpg" title="title anchor 01" ><img src="images/01t.jpg" alt="alt image 01" /></a>

fancybox标题应该说“ title anchor 01 alt image 01 ”

你用这个脚本做到了：

$(document).ready(function() {
 $(".fancybox").fancybox({
  helpers : {
   title: { type: 'inside'}
  },
  afterLoad: function(){
   this.title = this.title + ' ' + $(this.element).find('img').attr('alt');
  }
 }); // fancybox
}); // ready

Answer 2

摆弄调试器我发现这有效：

beforeShow : function() {
    var alt = this.element.children[0].alt;
    this.title = '<div class="new-title-title">' + alt + '</div>';
},

这不是最优雅的方式，但它可以满足您（和我）的需求 - 从图像中获取ALT值。

此致保罗

Answer 3

我遇到了类似的问题，最后为缩略图使用了单独的标题标签。似乎也有效，但不是那么有活力。

<a class="fancybox-print" data-fancybox-type="iframe"  title="Banking On Fun<p>Bank of America</p><br /><h3>For Bank of America we created print and in-store POP that told how home loans could turn dreams into reality.</h3>"href="template-print01.html"><img class="print" src="images/print.jpg" title="PRINT" alt=""/></a>

Answer 4

如果您使用带有Angular ng-repeat的Fancybox，您可以执行此类操作，那么它也适用于文本，您不需要img标记或img alt标记。

title="<b>{{banner.fancyboxTitle}}</b><br>{{ banner.fancyboxParagraph }}"

Fancybox 2自定义标题和标题[来自A（标题）和IMG（alt）

4 个答案: