Question

我有两张两张照片的画廊（只是为了简化问题，我计划有更多的照片）。我有一个不同的链接来打开每个画廊。我的问题是，当我打开一个图库时，我会访问所有照片，而不仅仅是那个图库中的照片。我想隔离每个画廊，只能看到该画廊的图片。我试图使用rel =“画廊名称”，但无法使其正常工作。这是我的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，此How to create separate Fancybox galleries on the same page?以及更多内容。

Answer 1

Your code has a couple of issues (3 actually)

1). The selectors #116 and #125 are not part of any gallery, they just trigger the targeted galley so they shouldn't have a rel attribute.

2). Your .on() methods are outside of the .ready() method so you better include them as well.

3). The second fancybox initialization

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

... overrides the rel attribute of your galleries so at the end, they all get the same rel="gallery" attribute, hence all images are shown as a single galley.

I would do the following tweaks to your code

a). remove rel attribute from triggers :

<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). Use a single fancybox initialization code. This should be enough

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

c). target the first element of a rel attribute within your .on() methods like

$("#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;
});

... and include those methods inside the .ready() method.

Here your forked JSFIDDLE

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

1 个答案: