通过手动链接打开多个Fancybox图库 [英] Opening multiple Fancybox galleries via manual links

问题描述

我试图转换如何通过手动调用html中的图库而不是通过jquery选项打开fancybox？以便将其应用于多个画廊，但无法使其正常运行。

我所拥有的是具有以下属性的几个链接：

 < a href =＃class =open-albumdata-open-id =album-1> Album 1< / a> 
< a href =＃class =open-albumdata-open-id =album-2> Album 2< / a> 
  

等。

这些应该是适用于各自支持Fancybox的相册，例如：

 < a href =＃class =image-show rel =album-1>< img src =＃/>< / a> 
< a href =＃class =image-show =album-1>< img src =＃/>< / a> 
< a href =＃class =image-show =album-1>< img src =＃/>< / a> 
  

和

 < a href =＃class =image-show =album-2>< img src =＃/>< / a> 
< a href =＃class =image-show =album-2>< img src =＃/>< / a> 
< a href =＃class =image-show =album-2>< img src =＃/>< / a> 
  

Fancybox查找 .image-show 当单击图像本身时，它可以正常工作。

以下jQuery代码应该将相册标题链接到各自相册中的第一张图像：

  $（'。open-album'）。click（function（e）{
 var el，id = $（this .eata）.data（'open-id'）; 
 if（id）{
 el = $（'。image-show [rel ='+ id +']：eq（0）' ）; 
 e.preventDefault（）; 
 el.click（）; 
} 
}）; 
  

正如您所看到的，目标是获得数据 - 打开 - 来自专辑标题的id 并使用它打开第一个Fancybox项目，其值为 rel 属性。唉，它不起作用。什么可能出错？非常感谢您的帮助！

提前致谢！

解决方案

我假设您将选择器 .image-show 绑定到fancybox，不是吗？

<$ p $ 。p> $（ 图像显示）的fancybox（）;


如果是这样，您的代码的问题是 $（this.element ）应仅在在fancybox回调中使用，但由于您使用的是常规jQuery方法（ .click（））那么你应该引用当前元素，如 $（this）

  $（'。open-album'）。click（function（e）{
 var el，id = $（this）.data （'open-id'）; 
 if（id）{
 el = $（'。image-show [rel ='+ id +']：eq（0）'）; 
 e.preventDefault（）; 
 el.click（）; 
} 
}）; 
  

参见 JSFIDDLE

I've attempted to convert the solution offered in How do I open fancybox via manual call for a gallery in the html not via the jquery options? in order to apply it to several galleries, but can't get it to function correctly.

What I have is several links with the following attributes:

<a href="#" class="open-album" data-open-id="album-1">Album 1</a>
<a href="#" class="open-album" data-open-id="album-2">Album 2</a>

etc.

These are supposed to apply to their respective Fancybox-enabled albums, for example:

 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-1"><img src="#" /></a>

and

 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>
 <a href="#" class="image-show" rel="album-2"><img src="#" /></a>

Fancybox looks for the .image-show class, and works fine when the images themselves are clicked.

The following jQuery code is supposed to link the album titles to the 1st image in their respective albums:

 $('.open-album').click(function(e) {
    var el, id = $(this.element).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
}); 

As you can see, the goal was to obtain the data-open-id from the album title and use it to open the first Fancybox item with the value as its rel attribute. Alas, it doesn't work. Any ideas on what could be going wrong? Your help would be much appreciated!

Thanks in advance!

解决方案

I assume that you are binding the selector .image-show to fancybox, aren't you?

$(".image-show").fancybox();

if so, the issue with your code is that $(this.element) should be used within fancybox callbacks only, but since you are using a regular jQuery method ( .click() ) then you should refer to the current element like $(this)

$('.open-album').click(function(e) {
    var el, id = $(this).data('open-id');
    if(id){
        el = $('.image-show[rel=' + id + ']:eq(0)');
        e.preventDefault();
        el.click();
    }
}); 

See JSFIDDLE

这篇关于通过手动链接打开多个Fancybox图库的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！