0

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

4

1 回答 1

0

您的代码几乎是我在此处发布的内容的副本，但是在撰写此类帖子时，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 的另一篇文章中添加注释

于 2012-06-03T08:07:36.627 回答