Fancybox 2 自定义标题和说明文字 [来自 A(title) 和 IMG(alt]答案

【问题标题】：Fancybox 2 Custom Titles and Captions [from A(title) and IMG(alt]Fancybox 2 自定义标题和说明文字 [来自 A(title) 和 IMG(alt]
【发布时间】：2012-01-30 01:29:58
【问题描述】：

我正在尝试使用 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).children('img:first').attr('alt') 的标题说未定义...我知道我必须是缺少一些简单的东西......

【问题讨论】：

标签： javascript jquery fancybox

【解决方案1】：

如果我理解正确，您希望花式框标题是a 标记中的title 属性+img 标记中的alt 属性的组合。

如果上面是正确的，那么有一个像 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

【讨论】：

【解决方案2】：

摆弄调试器我发现这是可行的：

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

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

问候，保罗

【讨论】：

【解决方案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>

【讨论】：

【解决方案4】：

如果您将 Fancybox 与 Angular ng-repeat 一起使用，您可以这样做，那么它也适用于文本，您不需要 img 标记或 img alt 标记。

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

【讨论】：