How do I get fancybox gallery to respect Isotope combination filtering in a gallery?

Question

The code that I'm using to add the data-fancybox-group attribute of "gallery" is only applying to the last filter button I clicked, instead of the combination of filters that are currently being applied. You can filter images with isotope, and then click any of them to load into lightbox. If you go here http://codepen.io/benslocum/pen/jVQjpo and choose sink then you can click one of the sink images, and scroll through just sinks by hitting left or right (or scrolling with your mousewheel). So far, so good. If you then click kitchen you'll see the images are now filtered to JUST kitchen sinks. But, if you click one of those images, the gallery that you'll be scrolling through will be all KITCHEN images... including non-sinks. It appears that somewhere around line 32 in JS I am causing the fancybox gallery to only be applied to the last filter button you click, and not the cumulative filterValue that takes into account all the filters that are checked. What do I need to change to make the data-fancybox-group attribute of gallery apply to the combination filter, and not just the last filter that was checked?

In case that codepen goes away, here is the JS

// external js: isotope.pkgd.js

// init Isotope
var $grid = $('.grid').isotope({
  itemSelector: '.optiones',
layoutMode: 'fitRows'
});

// random order
$grid.isotope({ sortBy : 'random' });

// layout Isotope after each image loads
$grid.imagesLoaded().progress( function() {
  $grid.isotope('layout');
});  

// store filter for each group
var filters = {};

$('.filters').on( 'click', '.button', function() {
  var $this = $(this);
  // get group key
  var $buttonGroup = $this.parents('.button-group');
  var filterGroup = $buttonGroup.attr('data-filter-group');
  // set filter for group
  filters[ filterGroup ] = $this.attr('data-filter');
  // combine filters
  var filterValue = concatValues( filters );
  // set filter for Isotope
  $grid.isotope({ filter: filterValue });
    // make the selected images part of fancybox gallery
        var selector = $(this).attr('data-filter');
        if(selector == "*"){
            $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
            $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
});

// change is-checked class on buttons
$('.button-group').each( function( i, buttonGroup ) {
  var $buttonGroup = $( buttonGroup );
  $buttonGroup.on( 'click', 'button', function() {
    $buttonGroup.find('.is-checked').removeClass('is-checked');
    $( this ).addClass('is-checked');
  });
});

// flatten object by concatting values
function concatValues( obj ) {
  var value = '';
  for ( var prop in obj ) {
    value += obj[ prop ];
  }
  return value;
}

$(".fancybox").fancybox({
    arrows : false, closeClick : true, closeBtn : false
});

// ignoring my NOT selection... trying to make the anyfeature-button NOT be among the buttons that forces the detail button to be selected
$('#feature').not('#anyfeature-button').on('click', function(e){
$('#roomdetails') .find('.is-checked').removeClass('is-checked');
  $('#detail-button') .addClass('is-checked');
  $('#detail-button').trigger('click');
});

$('#fullroom-button').on('click', function(e){
$('#feature') .find('.is-checked').removeClass('is-checked');
  $('#anyfeature-button') .addClass('is-checked');
  $('#anyfeature-button').trigger('click');
});

$('.generic-location').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
  $('#anyroom-button') .addClass('is-checked');
  $('#anyroom-button').trigger('click');
});

$('#bathshower-button').on('click', function(e){
$('#room') .find('.is-checked').removeClass('is-checked');
  $('#bathroom-button') .addClass('is-checked');
  $('#bathroom-button').trigger('click');
});

    $('filters a').click(function(event){
        event.preventDefault()

    });

And here's shorter version of the html

    <div id="header"><img src="http://sales.newpasaderahomes.com/wp-content/uploads/2015/05/Pasadera_Logo_Horiz.png" alt="Logo" class="logo-img">

    <div class="filters">
      <div class="ui-group" id="roomdetails">
        <div class="button-group js-radio-button-group" data-filter-group="type">
          <button class="button is-checked" id="both-button" data-filter="">both</button>
          <button class="button" id="fullroom-button" data-filter=":not(.detail)">full room</button>
          <button class="button" id="detail-button" data-filter=".detail">detail</button>
        </div>
      </div>
      <div class="ui-group">
        <h3>Room</h3>
        <div class="button-group js-radio-button-group" data-filter-group="room">
          <button class="button is-checked" id="anyroom-button" data-filter="">any</button>
          <button class="button" data-filter=".kitchen">kitchen</button>
          <button class="button" id="bathroom-button" data-filter=".bathroom">bathroom</button>
          <button class="button" data-filter=":not(.kitchen):not(.bathroom)">other</button>
        </div>
      </div>

      <div class="ui-group">
        <h3>Plan</h3>
        <div class="button-group js-radio-button-group" data-filter-group="plan">
          <button class="button is-checked" data-filter="">any</button>
          <button class="button" data-filter=".Plan1">plan 1</button>
          <button class="button" data-filter=".Plan2">plan 2</button>
          <button class="button" data-filter=".Plan3">plan 3</button>
          <button class="button" data-filter=".Plan4">plan 4</button>
          <button class="button" data-filter=".Plan5">plan 5</button>
        </div>
      </div>

      <div class="ui-group" id="feature">
        <h3>Feature</h3>
        <div class="button-group js-radio-button-group" data-filter-group="feature">
          <button class="button anyfeature-button is-checked" id="anyfeature-button" data-filter="">any</button>
          <button class="button" data-filter=".tile">tile</button>
          <button class="button" data-filter=".hardware">hardware</button>
          <button class="button" data-filter=".door">door</button>
          <button class="button" data-filter=".sink">sink</button>
          <button class="button generic-location" data-filter=".lighting">lighting</button>
          <button class="button generic-location" data-filter=".handrail">handrail</button>
          <button class="button generic-location" id="wallceiling-button" data-filter=".wall-ceiling">wall/ceiling</button>
          <button class="button" id="bathshower-button" data-filter=".bath-shower">tub/shower</button>
          <button class="button" data-filter=".cabinet-interior">cabinet interior</button>
        </div>
      </div>

    </div>
      </div>
      <div class="gridholder">
    <div class="grid">
    <div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Bath-Vanity-2-Kichler-6122-NI.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Bath-Vanity-2-Kichler-6122-NI.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Dining-Room-Transglobe-6545-BN.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Dining-Room-Transglobe-6545-BN.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Front-Porch-Kichler-10953-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Front-Porch-Kichler-10953-TZ.jpg"></a></div>
<div class="optiones detail lighting "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/Garage-Entry-Kichler-10923-TZ.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/Garage-Entry-Kichler-10923-TZ.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2597.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2597.jpg"></a></div>
<div class="optiones Plan1 detail wall-ceiling "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2602.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2602.jpg"></a></div>
<div class="optiones Plan1 detail hardware "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2603.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2603.jpg"></a></div>
<div class="optiones Plan1 detail kitchen sink tile "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2606.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2606.jpg"></a></div>
<div class="optiones Plan2 detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2664.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2664.jpg"></a></div>
<div class="optiones Plan2 cabinet-interior detail kitchen "><a class="fancybox " href=http://benslocum.com/pasadera-options/images/IMG_2665.jpg><img src="http://benslocum.com/pasadera-options/images/thumbs/IMG_2665.jpg"></a></div>
    </div>  </div>
      </div>

And finally, a little css

* { box-sizing: border-box; }

body {
  font-family: sans-serif;
}

#header {
    background-color: #00A8A5;
    height: 115px;
  width: 100%;
}


.logo-img {
    margin: 10px;
    float: left;
    max-width: 350px;
}

h1 {
  margin: 0;
padding: 0;
}

/* ---- button ---- */
.filters {
position: relative;
  top: 20px;
  left: 30px;
}

.button {
  display: inline-block;
  padding: 0.5em .8em;
  background: #EEE;
  border: none;
  border-radius: 7px;
  background-image: linear-gradient( to bottom, hsla(0, 0%, 0%, 0), hsla(0, 0%, 0%, 0.15) );
  color: #222;
  font-family: sans-serif;
  font-size: 16px;
  text-shadow: 0 1px white;
  cursor: pointer;
}

.button:hover {
  background-color: #f7e7ba;
  text-shadow: 0 1px hsla(0, 0%, 100%, 0.5);
  color: #222;
}

.button:active,
.button.is-checked {
  background-color: #fdbe10;
}

.button.is-checked {
  color: white;
  text-shadow: 0 -1px hsla(0, 0%, 0%, 0.8);
}

.button:active {
  box-shadow: inset 0 1px 10px hsla(0, 0%, 0%, 0.8);
}

/* ---- button-group ---- */

.button-group:after {
  content: '';
  display: block;
  clear: both;
}

.button-group .button {
  float: left;
  border-radius: 0;
  margin-left: 0;
  margin-right: none;
}

.button-group .button:first-child { border-radius: 0.5em 0 0 0.5em; }
.button-group .button:last-child { border-radius: 0 0.5em 0.5em 0; }

/* ---- isotope ---- */

.grid {
  background: lightgray;
  max-width: 1920px;
}

/* clear fix */
.grid:after {
  content: '';
  display: block;
  clear: both;
}

/* ui group */

.ui-group {
  display: inline-block;
}

.ui-group h3 {
  display: inline-block;
  vertical-align: top;
  line-height: 5px;
  margin-right: 0.2em;
  font-size: 16px;
}

.ui-group .button-group {
  display: inline-block;
  margin-right: 20px;
}

/* options */

.optiones {
  margin: 5px;
  float: left;
}

.optiones img {
  display: block;
  max-width: 100%;
}


/*! fancyBox v2.1.5 fancyapps.com | fancyapps.com/fancybox/#license */
.fancybox-wrap,
.fancybox-skin,
.fancybox-outer,
.fancybox-inner,
.fancybox-image,
.fancybox-wrap iframe,
.fancybox-wrap object,
.fancybox-nav,
.fancybox-nav span,
.fancybox-tmp
{
    padding: 0;
    margin: 0;
    border: 0;
    outline: none;
    vertical-align: top;
}

.fancybox-wrap {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 8020;
}

.fancybox-skin {
    position: relative;
    background: #f9f9f9;
    color: #444;
    text-shadow: none;
    -webkit-border-radius: 4px;
       -moz-border-radius: 4px;
            border-radius: 4px;
}

.fancybox-opened {
    z-index: 8030;
}

.fancybox-opened .fancybox-skin {
    -webkit-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
       -moz-box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
            box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
}

.fancybox-outer, .fancybox-inner {
    position: relative;
}

.fancybox-inner {
    overflow: hidden;
}

.fancybox-type-iframe .fancybox-inner {
    -webkit-overflow-scrolling: touch;
}

.fancybox-error {
    color: #444;
    font: 14px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    margin: 0;
    padding: 15px;
    white-space: nowrap;
}

.fancybox-image, .fancybox-iframe {
    display: block;
    width: 100%;
    height: 100%;
}

.fancybox-image {
    max-width: 100%;
    max-height: 100%;
}

#fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
    background-image: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_sprite.png);
}

#fancybox-loading {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -22px;
    margin-left: -22px;
    background-position: 0 -108px;
    opacity: 0.8;
    cursor: pointer;
    z-index: 8060;
}

#fancybox-loading div {
    width: 44px;
    height: 44px;
    background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_loading.gif) center center no-repeat;
}

.fancybox-close {
    position: absolute;
    top: -18px;
    right: -18px;
    width: 36px;
    height: 36px;
    cursor: pointer;
    z-index: 8040;
}

.fancybox-nav {
    position: absolute;
    top: 0;
    width: 40%;
    height: 100%;
    cursor: pointer;
    text-decoration: none;
    background: transparent url(http://benslocum.com/pasadera-options/fancybox/source/blank.gif); /* helps IE */
    -webkit-tap-highlight-color: rgba(0,0,0,0);
    z-index: 8040;
}

.fancybox-prev {
    left: 0;
}

.fancybox-next {
    right: 0;
}

.fancybox-nav span {
    position: absolute;
    top: 50%;
    width: 36px;
    height: 34px;
    margin-top: -18px;
    cursor: pointer;
    z-index: 8040;
    visibility: hidden;
}

.fancybox-prev span {
    left: 10px;
    background-position: 0 -36px;
}

.fancybox-next span {
    right: 10px;
    background-position: 0 -72px;
}

.fancybox-nav:hover span {
    visibility: visible;
}

.fancybox-tmp {
    position: absolute;
    top: -99999px;
    left: -99999px;
    max-width: 99999px;
    max-height: 99999px;
    overflow: visible !important;
}

/* Overlay helper */

.fancybox-lock {
    overflow: visible !important;
    width: auto;
}

.fancybox-lock body {
    overflow: hidden !important;
}

.fancybox-lock-test {
    overflow-y: hidden !important;
}

.fancybox-overlay {
    position: absolute;
    top: 0;
    left: 0;
    overflow: hidden;
    display: none;
    z-index: 8010;
    background: url(http://benslocum.com/pasadera-options/fancybox/source/fancybox_overlay.png);
}

.fancybox-overlay-fixed {
    position: fixed;
    bottom: 0;
    right: 0;
}

.fancybox-lock .fancybox-overlay {
    overflow: auto;
    overflow-y: scroll;
}

/* Title helper */

.fancybox-title {
    visibility: hidden;
    font: normal 13px/20px "Helvetica Neue",Helvetica,Arial,sans-serif;
    position: relative;
    text-shadow: none;
    z-index: 8050;
}

.fancybox-opened .fancybox-title {
    visibility: visible;
}

.fancybox-title-float-wrap {
    position: absolute;
    bottom: 0;
    right: 50%;
    margin-bottom: -35px;
    z-index: 8050;
    text-align: center;
}

.fancybox-title-float-wrap .child {
    display: inline-block;
    margin-right: -100%;
    padding: 2px 20px;
    background: transparent; /* Fallback for web browsers that doesn't support RGBa */
    background: rgba(0, 0, 0, 0.8);
    -webkit-border-radius: 15px;
       -moz-border-radius: 15px;
            border-radius: 15px;
    text-shadow: 0 1px 2px #222;
    color: #FFF;
    font-weight: bold;
    line-height: 24px;
    white-space: nowrap;
}

.fancybox-title-outside-wrap {
    position: relative;
    margin-top: 10px;
    color: #fff;
}

.fancybox-title-inside-wrap {
    padding-top: 10px;
}

.fancybox-title-over-wrap {
    position: absolute;
    bottom: 0;
    left: 0;
    color: #fff;
    padding: 10px;
    background: #000;
    background: rgba(0, 0, 0, .8);
}

/*Retina graphics!*/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
       only screen and (min-device-pixel-ratio: 1.5){

    #fancybox-loading, .fancybox-close, .fancybox-prev span, .fancybox-next span {
        background-image: url(http://benslocum.com/pasadera-options/fancybox/source/[email protected]);
        background-size: 44px 152px; /*The size of the normal image, half the size of the hi-res image*/
    }

    #fancybox-loading div {
        background-image: url(http://benslocum.com/pasadera-options/fancybox/source/[email protected]);
        background-size: 24px 24px; /*The size of the normal image, half the size of the hi-res image*/
    }
}

In case it helps anyone else, when I was just trying to get Fancybox to respect ANY filtering at all, I found these. None of them worked "as is" but when I took a piece of it

var selector = $(this).attr('data-filter');
        if(selector == "*"){
            $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
            $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }

And put it in the code that was already doing stuff with filters, it worked to the extent that I explained above.

Now for the things that didn't work for me, but put me on the right track

$('filters a').click(function(event){
    event.preventDefault()
    var selector = $(this).attr('data-filter');

    if(selector == "*"){
        $(".fancybox").attr("data-fancybox-group", "gallery");
    } else{ 
        $(selector).find(".fancybox").attr("data-fancybox-group", selector);
    }
});

Neither did this

$('#filters a').on("click", function(){
var selector = $(this).attr('data-option-value'); 
$('#container').isotope({ filter: selector }, function(){
if(selector == "*"){
 $(".fancybox-thumbs").attr("data-fancybox-group", "gallery");
} else{ 
 $(selector).find(".fancybox-thumbs").attr("data-fancybox-group", selector);
}
});
return false;
}); 

Here's one more that I found and tried to customize... it didn't work for me either.

// filter buttons
    $('#filters a').click(function(){
          var selector = $(this).attr('data-filter');
      $('#isotopegallery').isotope({ filter: selector }, function(){
        if(selector == "*"){
         $(".fancybox").attr("data-fancybox-group", "gallery");
        } else{ 
         $(selector).find(".fancybox").attr("data-fancybox-group", selector);
        }
      });
      return false;
    });

Anyone have an idea on how to make this work with my setup?