title: Isotope filter - have to click twice to filter
body: <p>I am using an Isotope filter combined with a Fancybox gallery and have modified the Isotope JS so that Fancybox only scrolls through those images that are filtered. The problem is that now to activate the Isotope filter I have to click twice on the filter menu to initialise it. I'm hoping someone may be able to spot the problem in my code to help me out:</p>
  
  <p>Here is the JS for the filter:</p>
  
  <pre><code>DK.filter = function (){
  if($('#projects').length &gt; 0){      
      var $container = $('#projects');
  
      $container.imagesLoaded(function() {
          $container.isotope({
            // options
            animationEngine: 'best-available',
            itemSelector : '.item-thumbs',
            layoutMode : 'fitRows'
          });
      });
  
  
      // filter items when filter link is clicked
      var $optionSets = $('#options .option-set'),
          $optionLinks = $optionSets.find('a');
  
        $optionLinks.click(function(){
          var $this = $(this);
          // don't proceed if already selected
          if ( $this.hasClass('selected') ) {
            return false;
          }
          var $optionSet = $this.parents('.option-set');
          $optionSet.find('.selected').removeClass('selected');
          $this.addClass('selected');
  
  
      // open filtered items only
  
    $('#filters a').click(function(){
            var selector = $(this).attr('data-filter');
        $('#projects').isotope({ filter: selector }, function(){
          if(selector == "*"){
           $(".fancybox").attr("data-fancybox-group", "gallery");
          } else{ 
           $(selector).find(".fancybox").attr("data-fancybox-group", selector);
          }
        });
        return false;
      });
  
  
  
          // make option object dynamically, i.e. { filter: '.my-filter-class' }
          var options = {},
              key = $optionSet.attr('data-option-key'),
              value = $this.attr('data-option-value');
          // parse 'false' as false boolean
          value = value === 'false' ? false : value;
          options[ key ] = value;
          if ( key === 'layoutMode' &amp;&amp; typeof changeLayoutMode === 'function'         ) {
            // changes in layout modes need extra logic
            changeLayoutMode( $this, options )
          } else {
            // otherwise, apply new options
            $container.isotope( options );
          }
  
          return false;
      });
  }
  }
  </code></pre>
  
  <p>and here is the HTML from the beginning of the filtered section:</p>
  
  <pre><code>       &lt;div class="row"&gt;
          &lt;div class="span12"&gt;
              &lt;!-- Filter --&gt;
              &lt;nav id="options" class="work-nav"&gt;
                  &lt;ul id="filters" class="option-set" data-option-key="filter"&gt;
                      &lt;li class="type-work"&gt;Type of Work&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-filter="*" class="selected"&gt;All Projects&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-filter=".red"&gt;Red&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-filter=".green"&gt;Green&lt;/a&gt;&lt;/li&gt;
                      &lt;li&gt;&lt;a href="#" data-filter=".blue"&gt;Blue&lt;/a&gt;&lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/nav&gt;
              &lt;!-- End Filter --&gt;
          &lt;/div&gt;
  
          &lt;div class="span12"&gt;
              &lt;div class="row"&gt;
                  &lt;section id="projects"&gt;
                      &lt;ul id="thumbs"&gt;
  
                          &lt;!-- Item Project and Filter Name --&gt;&lt;!-- End Item Project --&gt;
  
                          &lt;!-- Item Project and Filter Name --&gt;
                        &lt;li class="item-thumbs span3 red"&gt;
                              &lt;!-- Fancybox - Gallery Enabled - Title - Full Image --&gt;
                              &lt;a class="hover-wrap fancybox" data-fancybox-group="gallery" title="The Office" href="_include/img/work/full/red-full.jpg"&gt;
                                  &lt;span class="overlay-img"&gt;&lt;/span&gt;
                                  &lt;span class="overlay-img-thumb font-icon-search"&gt;&lt;/span&gt;
                              &lt;/a&gt;
                              &lt;!-- Thumb Image and Description --&gt;
                              &lt;img src="_include/img/work/thumbs/red.jpg" alt="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus quis elementum odio. Curabitur pellentesque, dolor vel pharetra mollis."&gt;
                          &lt;/li&gt;
                          &lt;!-- End Item Project --&gt;
  </code></pre>
  
  <p>A development page is also located here: <a href="http://www.davidkneale.com/filter/" rel="nofollow">development page</a>
  I've been trying to sort this for days... but am a total novice so not having any success. Any help greatly appreciated! Cheers.</p>