<h2>fancyBox + Isotope</h2>

<div class="button-group filter-button-group">
  <button data-filter="*" class="btn">Show all</button>
  <button data-filter=".metal"  class="btn">Metal</button>
  <button data-filter=".transition" class="btn">Yransition</button>
</div>

<div class="grid">
  <div class="element-item metal">
    <a href="https://c1.staticflickr.com/9/8148/29324593462_abebaddc38_k.jpg" class="fancybox">
        <img src="https://c1.staticflickr.com/9/8148/29324593462_f890687b7a_m.jpg" />
    </a>
  </div>
  <div class="element-item transition">
    <a href="https://c2.staticflickr.com/6/5499/30972532232_051e1dc57e_h.jpg" data-fancybox="images" class="fancybox">
      <img src="https://c2.staticflickr.com/6/5499/30972532232_e9a298a0c5_m.jpg" />
  </a>
  </div>
  <div class="element-item metal">
    <a href="https://c1.staticflickr.com/9/8021/29345513551_0c565462d8_k.jpg" class="fancybox">
      <img src="https://c1.staticflickr.com/9/8021/29345513551_16024a89e3_m.jpg" />
    </a>
  </div>
</div>

.grid {
  margin: 30px 0;
}

// Init Isotope
var $grid = $('.grid').isotope({
  // options
});

// filter items on button click
$('.filter-button-group').on( 'click', 'button', function() {
  var filterValue = $(this).attr('data-filter');
  $grid.isotope({ filter: filterValue });
});

// Custom click event - open fancyBox manually
$('.fancybox').on('click', function() {
  var visibleLinks = $('.fancybox:visible');
  
  $.fancybox.open( visibleLinks, {}, visibleLinks.index( this ) );
  
  return false;
});