title: jQuery - Multiple Image Filters on same page
body: <p>I have 2 sections, each of those sections has an Image filter, however when I press a button to filter the images, lets say from filter 2, it also hides the all the images from filter 1.
  I'm using: data-filter=".categoryofimages"</p>
  
  <p>You can see the issue directly on the website:</p>
  
  <p><a href="http://nimvoker.com" rel="nofollow">nimvoker.com</a></p>
  
  <p>On the "achievements" section is the 1st filter and "art &amp; design skills" is the 2nd one.</p>
  
  <p>Some file paths are not correct because of the format(jpg, png, etc) but that it still displays the "missing image" symbol so it shouldn't matter in regards to solving the issue.</p>
  
  <p>Both filters must work independently.</p>
  
  <p>Here is an example of 2 filters making conflict:</p>
  
  <p><a href="http://codepen.io/anon/pen/NPvdBw" rel="nofollow">http://codepen.io/anon/pen/NPvdBw</a></p>
  
  <p>here is the js:</p>
  
  <pre><code>$(function(){
  // Filter portfolio
  $(window).load(function(){
      var $container = $('.popup-portfolio'); 
  
      $container.css({visibility:'visible'});
  
      var isotopePortfolio = function(filter){
          $container.isotope({ 
              filter: filter, 
              animationOptions: { 
                  duration: 750, 
                  easing: 'linear', 
                  queue: false
              },
              masonry: {
                  isFitWidth: true,
                  isResizable: true,
                  gutter: 15
              }
          }); 
      };
  
      isotopePortfolio('*');
  
      $('.filter-portfolio a').click(function(e){ 
          e.preventDefault();
  
          $('.filter-portfolio li').removeClass('active');
  
          $('.filter-portfolio a').removeClass('disabled');
  
          $(this).parent('li').addClass('active');
  
          $(this).addClass('disabled');
  
          var selector = $(this).attr('data-filter'); 
  
          isotopePortfolio(selector);
      }); 
  });
  
  // Only animate elements when using non-mobile devices    
  if (jQuery.browser.mobile === false) 
  {
      $('.portfolio-item &gt; .inner-content').each(function(i)
      {            
          var element = $(this),
          itemsDelay   = ( isNaN($(this).data('animation-delay')) ? 50 : $(this).data('animation-delay') );
          element.css('opacity', 0).one('inview', function(isInView) {
              if (isInView)
              {
                  setTimeout(function(){
                      element.addClass('animated fadeInUp').css('opacity', 1);
                  } , itemsDelay * i);
              }
          });
      });
  }
  
  $('.popup-portfolio').magnificPopup({
      delegate: 'a',
      type: 'image',
      fixedContentPos: false,
      gallery: {
          enabled: true,
          preload: [0,2],
          navigateByImgClick: true,
          arrowMarkup: '&lt;button title="%title%" type="button" class="mfp-arrow mfp-arrow-%dir%"&gt;&lt;/button&gt;',
          tPrev: 'Previous (Left arrow key)',
          tNext: 'Next (Right arrow key)'
      }
  });
  </code></pre>
  
  <p>});</p>