Question

这主要是针对Fancybox 3用户的问题，但也许其他人也有想法。

我前段时间设置了一个Fancybox 2照片库，它为灯箱中每张照片的标题/标题添加了一个Facebook赞按钮和评论框。该脚本效果很好（在很大程度上要归功于这里的用户！）它只是为Facebook内容添加了一个休息和几个div到Fancybox标题。这是脚本：

$("#gallery-events a").fancybox({

beforeShow: function () {
    if (this.title) {

    this.title += '<br />'; // Line break after title

    this.title += '<div class="fb-container"><div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div><div class="fb-comments" data-href="' + this.href + '" data-num-posts="10" data-width="100%"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
helpers: {
    title: {
        type: 'inside'
    }
},
    padding: 0,
    openEffect: 'fade',
    closeEffect: 'fade',
    topRatio: 0,
    fitToView: false,
    scrolling: 'yes',
    loop: true
});

这里可以看到Fancybox 2画廊： http://www.lycochoir.com/photos/annual-events.html

然而，它让我觉得照片无法在移动设备上滑动。所以本周我尝试升级到Fancybox 3，这增加了刷卡功能。

刷卡看起来很棒......但添加Facebook内容的beforeShow / afterShow脚本不再有效。我认为这可能与Fancybox 3中没有“头衔助手”这一事实有关。该参数现在只称为“标题”。但令人困惑的是，HTML代码仍然使用“标题”来设置每张照片的文本。

在脚本中，我将标题助手更改为“标题”，这确实可以创建标题本身。请注意，我确实尝试将“this.title”更改为“this.caption”，但这样做会使文本空白（但保留完整的空间）。

这是修订后的Fancybox 3脚本，其中beforeShow / afterShow不再有效：

$("#gallery-events a").fancybox({

beforeShow: function () {
    if (this.title) {

    this.title += '<br />'; // Line break after title

    this.title += '<div class="fb-container"><div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div><div class="fb-comments" data-href="' + this.href + '" data-num-posts="10" data-width="100%"></div></div>';
    }
},
afterShow: function () {
    FB.XFBML.parse();
    $.fancybox.update(); // resize after show
},
    caption: {
        type : 'inside'
        },
    padding: 0,
    openEffect: 'fade',
    closeEffect: 'fade',
    topRatio: 0,
    fitToView: false,
    scrolling: 'yes',
    loop: true 
});

以下是Fancybox 3脚本的实际应用： http://lycochoir.com/swipe-1/photos.html 如果您有移动设备，请注意滑动和字幕是有效的，但Facebook框无处可见（它们的空间也不存在）。

Fancybox 3没有任何文档，并且已经测试了很长时间。所以我真的不知道试图找出阻止我的beforeShow操作工作的代码中发生的变化。有没有人，尤其是那些有Fancybox 3经验的人，有什么想法？

编辑：遵循JFK的想法，我将脚本更改为以下内容，但它仍然无效。中断似乎被添加，但Facebook插件没有出现。澄清一下：我没有更改我的Facebook代码，因为JFK的代码与Facebook目前提供的代码非常不同（没有iframe，没有Facebook URL，而是一个类）。为了让它开始工作是如此艰难，我不愿意改变它！

$("#gallery-events a").fancybox({

afterLoad: function () {
    if (this.title) {

    this.title += '<br />'; // Line break after title

    this.title += '<div class="fb-container"><div class="fb-like-container"><div class="fb-like" data-href="' + this.href + '" data-layout="button_count" data-share="true"></div></div><div class="fb-comments" data-href="' + this.href + '" data-num-posts="10" data-width="100%"></div></div>';
    console.log(this.title);
    }
},
    caption: {
        type : 'inside'
        },
    padding: 0,
    openEffect: 'fade',
    closeEffect: 'fade',
    topRatio: 0,
    fitToView: false,
    scrolling: 'yes',
    loop: true 
});

最终结论：只需在原始脚本中将beforeShow更改为afterLoad。并将标题助手更改为标题。而已。（不过，JsFiddle的作品也是如此。）

Answer 1

如果您想更改fancybox v3.x（测试版）中的title和/或向其添加html元素并正确呈现它们，请改为使用afterLoad回调：

afterLoad: function () {
    if (this.title) {
        // New line
        this.title += '<br />';
        // etc.
    }
},

参见 JSFIDDLE

从Fancybox 2迁移到3时出现标题问题

1 个答案: