title: Isotope and Lightbox - like overlay : How to do it?
body: <p>I wish to use isotope.js and a lightbox-like overlay together to create a cool, filterable photo gallery or information page, where you click an item to get a popup with more info.</p>
  
  <p>Here is a jfiddle with the example
  <a href="http://jsfiddle.net/9d5qw/" rel="nofollow">http://jsfiddle.net/9d5qw/</a></p>
  
  <p>here is the js I'm using - </p>
  
  <pre><code>$('.box-to-display').click(function() {
      $(this).siblings('.popup').center();
      $(this).siblings('.popup').fadeIn();
      $(this).siblings('.overlay').fadeIn();
  });
  
  $('.overlay').click(function() {
      $(this).siblings('.popup').fadeOut();
      $(this).fadeOut();
  });
  
  
  var $container = $('#isotope-container');
        $container.isotope({
          animationEngine : 'jquery',
           layoutMode: 'straightDown',
          animationOptions: {
              duration: 250,
              easing: 'linear',
              queue: false
          } }); 
  </code></pre>
  
  <p>Essentially - the isotope puts overflow:hidden; on the container it targets, which hides the positioned popup overlay.  Ideally, I don't want to have to do two separate pieces - one for overlays, one for the list.  I'm generating my list from an array with php, in case this is important to know!</p>
  
  <p>After writing all of this, I realize I might need to have two separate pieces of code - one for overlays, one for the list, and connect them with a unique ID - but if not, please let me know!</p>
  
  <p>Thanks!
  Jacob</p>