尝试在 FancyBox 中创建两个仅显示与它们关联的照片的画廊

Question

我有两个画廊，每个画廊有两张照片（只是为了简化问题，不过我计划拥有更多）。我有不同的 link 打开每个画廊。我的问题是，当我打开一个画廊时，我会访问所有照片，而不仅仅是该画廊中的照片。我想隔离每个画廊，并且只能看到该画廊的图片。我尝试使用 rel="name of gallery" 但无法使其工作。这是我的 JSFiddle：http://jsfiddle.net/gregmarquet/y301f35y/4/

HTML:

<ul>
  <li><a rel="gallery116" href="#" id="116"><span>116&nbsp;St</span></a></li>
  <li><a rel="gallery125" href="#" id="125"><span>125&nbsp;St</span></a></li>
</ul>

<!-- Gallery 116 -->

<a class="fancybox hidden" rel="gallery116" href="https://upload.wikimedia.org/wikipedia/commons/e/ef/116th_Street_Station_(IRT_Lenox_Avenue_Line)_(3438775199).jpg"></a>

<a class="fancybox hidden" rel="gallery116" href="http://nycsubway.org.s3.amazonaws.com/images/icon/title_ny_eastside_116.jpg"></a>


<!-- Gallery 125 -->

<a class="fancybox hidden" rel="gallery125" href="http://www.mas.org/wp-content/uploads/2008/05/harlem-apollo-theater-sidwalk-people-snow-new-york-city.jpg"></a>

<a class="fancybox hidden" rel="gallery125"  href="http://www.newyork.com/articles/wp-content/uploads/2014/01/apollo-theater_450.jpg"></a>

CSS:

.hidden {
    display: none;
}
img {
    max-width: 100%;
    max-height: 100%;
    border-radius: 15px;
} 

div.fancybox-skin {
    text-align: center;
}

JavaScript:

$(document).ready(function() {
    $('.fancybox').fancybox();
});

$("#116").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});


$("#125").on("click", function(){
    $(".fancybox").eq(0).trigger("click");
    return false;
});

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
     padding : 0
});

我已经尝试过 add various "rel" attributes to fancybox galleries, and this How to create separate Fancybox galleries on the same page? 以及更多。

Answer 1

您的代码有几个问题（实际上是 3 个）

1).选择器 #116 和 #125 不是任何图库的一部分，它们只是触发目标厨房，因此它们不应该具有 rel 属性。

2).您的 .on() 方法在 .ready() 方法之外，因此您最好也包含它们。

3).第二次fancybox初始化

$(".fancybox")
    .attr('rel', 'gallery')
    .fancybox({
     padding : 0
});

... 覆盖画廊的 rel 属性，所以最后，它们都获得相同的 rel="gallery" 属性，因此所有图像都显示为单个画廊。

我会对您的代码进行以下调整

a).从触发器中删除 rel 属性：

<ul>
  <li><a href="#" id="116"><span>116&nbsp;St</span></a></li>
  <li><a href="#" id="125"><span>125&nbsp;St</span></a></li>
</ul>

b).使用单个 fancybox 初始化代码。这应该够了

$('.fancybox').fancybox();

c).在 .on() 方法中定位 rel 属性的第一个元素，例如

$("#116").on("click", function () {
    $("a[rel=gallery116]").eq(0).trigger("click");
    return false;
});  
$("#125").on("click", function () {
    $("a[rel=gallery125]").eq(0).trigger("click");
    return false;
});

... 并将这些方法包含在 .ready() 方法中。

这里是你的分叉 JSFIDDLE

尝试在 FancyBox 中创建两个仅显示与它们关联的照片的画廊

Trying to create two galleries in FancyBox that would show only photos associated to them

javascript

jquery

fancybox

fancybox-2