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

I have two galleries of two photos each (just to simplify the problem, I plan on having a lot more though). I have a different link to open each gallery. My problem is that when I open one gallery, I access all the photos, not just the ones from that gallery. I would like to isolate each gallery and be able to see only the pictures from that gallery. I tried to use rel="name of gallery" but cannot make it work. Here is my 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
});

I've tried that add various "rel" attributes to fancybox galleries, and this How to create separate Fancybox galleries on the same page? and a lot more.

Solution

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