多个画廊的 Fancybox 自定义标题答案

【问题标题】：Fancybox custom titles for multiple galleries多个画廊的 Fancybox 自定义标题
【发布时间】：2012-06-03 16:07:36
【问题描述】：

1）我有一堆图像在 fancybox 的两个画廊中分开。我正在使用下面的代码将我的标题分成单独的行。我的 HTML 有一个带有标题的单独 div，每个标题也在一个 div 中。它有效，但它同时向两个画廊添加标题，因此图像 1 在两个画廊中获得相同的名称。

如何为我的两个画廊插入单独的标题？

$(document).ready(function() {
    $(".fancybox").fancybox({
            openEffect  : 'elastic',
            closeEffect : 'elastic',
            arrows :    true,
            helpers : { 
                    title   : { type : 'inside' },
                    buttons : {}
            }, // helpers
            afterLoad : function() {
                this.title = $("#fancyboxTitles div").eq(this.index).html();
            } // afterload
    }); // fancybox
}); // ready

2）当图像显示多行标题时，我单击“下一步”，然后返回，标题消失。我该如何解决？谢谢！

【问题讨论】：

标签： fancybox title photo-gallery

【解决方案1】：

您的代码几乎是我 posted here 的副本，但是在撰写此类帖子时，fancybox 版本是 2.0.1。从那时起已经进行了一些更改（主要是改进和错误修复），因此我们需要对您的自定义脚本以及您的 html 结构进行一些更改。另外你可能需要更新到最新版本的fancybox（今天是2.0.6）

假设您通过设置不同的rel 属性对您的画廊进行了分组，例如：

<a class="fancybox" rel="gallery1" href="images/01a.jpg">image 1 - gallery 1</a>
<a class="fancybox" rel="gallery1" href="images/02a.jpg">image 2 - gallery 1</a>

<a class="fancybox" rel="gallery2" href="images/01b.jpg">image 1 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/02b.jpg">image 2 - gallery 2</a>
<a class="fancybox" rel="gallery2" href="images/03b.jpg">image 3 - gallery 2</a>

1)。像这样将每个画廊的标题分组到不同的部门：

<div id="gallery1">
 <div>title image 1 / gallery 1</div>
 <div>title image 2 / gallery 1</div>
</div>
<div id="gallery2">
 <div>title image 1 / gallery 2</div>
 <div>title image 2 / gallery 2</div>
 <div>title image 3 / gallery 2</div>
</div>

重要提示：请注意，我已为父容器分配了一个 ID，它等于每个库的 rel 属性。

2)。现在，对于 2.0.6 版本，我们不能像在 v2.0.1 中那样使用 afterLoad 回调（这就是它使标题消失的原因）......我们将使用 beforeShow 代替。

所以替换这部分脚本：

afterLoad : function() {
 this.title = $("#fancyboxTitles div").eq(this.index).html();
} // afterload

通过这个：

beforeShow  : function() {
 var gallery = $(this.element).attr("rel");
 this.title = $("#"+gallery+" div").eq(this.index).html();
} // beforeShow

这应该可以解决问题。

附言。我将在 v2.0.6 的另一篇文章中添加注释

【讨论】：