Question

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）当图像显示多行标题时，我点击“下一步”，然后返回，标题消失。我该如何解决这个问题？谢谢！

Answer 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，我们无法使用afterLoad回调，就像我们为v2.0.1所做的那样（这就是它使标题消失的原因）....我们将使用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

这应该可以解决问题。

PS。我将在v2.0.6的其他帖子中添加注释

多个画廊的Fancybox自定义标题

1 个答案: