title: Trying to create two galleries in FancyBox that would show only photos associated to them
body: <p>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: <a href="http://jsfiddle.net/gregmarquet/y301f35y/4/" rel="nofollow noreferrer">http://jsfiddle.net/gregmarquet/y301f35y/4/</a> </p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;ul&gt;
    &lt;li&gt;&lt;a rel="gallery116" href="#" id="116"&gt;&lt;span&gt;116&amp;nbsp;St&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
    &lt;li&gt;&lt;a rel="gallery125" href="#" id="125"&gt;&lt;span&gt;125&amp;nbsp;St&lt;/span&gt;&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;!-- Gallery 116 --&gt;
  
  &lt;a class="fancybox hidden" rel="gallery116" href="https://upload.wikimedia.org/wikipedia/commons/e/ef/116th_Street_Station_(IRT_Lenox_Avenue_Line)_(3438775199).jpg"&gt;&lt;/a&gt;
  
  &lt;a class="fancybox hidden" rel="gallery116" href="http://nycsubway.org.s3.amazonaws.com/images/icon/title_ny_eastside_116.jpg"&gt;&lt;/a&gt;
  
  
  &lt;!-- Gallery 125 --&gt;
  
  &lt;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"&gt;&lt;/a&gt;
  
  &lt;a class="fancybox hidden" rel="gallery125"  href="http://www.newyork.com/articles/wp-content/uploads/2014/01/apollo-theater_450.jpg"&gt;&lt;/a&gt;
  </code></pre>
  
  <p>CSS: </p>
  
  <pre><code>.hidden {
      display: none;
  }
  img {
      max-width: 100%;
      max-height: 100%;
      border-radius: 15px;
  } 
  
  div.fancybox-skin {
      text-align: center;
  }
  </code></pre>
  
  <p>JavaScript:</p>
  
  <pre><code>$(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
  });
  </code></pre>
  
  <p>I've tried that <a href="https://stackoverflow.com/questions/20802062/add-various-rel-attributes-to-fancybox-galleries">add various &quot;rel&quot; attributes to fancybox galleries</a>, and this  <a href="https://stackoverflow.com/questions/9486034/how-to-create-separate-fancybox-galleries-on-the-same-page/9487189#9487189">How to create separate Fancybox galleries on the same page?</a> and a lot more.</p>