多个画廊的Fancybox自定义标题 [英] Fancybox custom titles for multiple galleries

问题描述

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版本为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

应该可以解决问题.

PS.我将在v2.0.6的另一篇文章中添加注解

1)I have a bunch of images split in two galleries in fancybox. I am using the code below to split my titles into separate lines. My HTML has a separate div with the titles, each in a div as well. It works, but it is adding titles to both galleries simultaneously, so image 1 gets the same name in both galleries.

How do I insert separate titles for my two galleries?

$(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)Also when the image shows up with the multi-line title, and I click "next", and then go back, the title disappears. How can I fix that? Thanks!

解决方案

Your code is pretty much a copy of what I posted here, however at the time such post was written, the fancybox version was 2.0.1. Some changes have been done since then (mostly improvements and bug fixes) so we would need to do some changes to your custom script as well as to your html structure. Also you may need to update to the latest version of fancybox (2.0.6 as today)

Assuming that you have grouped your galleries by setting a different rel attribute like:

<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). group the titles of each gallery in different divisions too like this:

<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>

IMPORTANT: notice that I have assigned an ID to the parent container that is equal to the rel attribute of each gallery.

2). Now, for version 2.0.6, we can't use the afterLoad callback as we did it for v2.0.1 (this is what it makes the titles disappear).... we will use beforeShow instead.

So replace this part of the script:

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

by this:

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

That should do the trick.

PS. I will add a note to the other post for v2.0.6

这篇关于多个画廊的Fancybox自定义标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！