title: Filter images using jQuery
body: <p>I have a portfolio page</p>
  <p><a href="https://i.stack.imgur.com/gkjyw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/gkjyw.png" alt="enter image description here" /></a></p>
  <p>I have filter buttons</p>
  <pre><code>&lt;div class=&quot;clearfix&quot;&gt;
    &lt;div class=&quot;cbp-l-filters-button cbp-l-filters-left&quot;&gt;
      &lt;div data-filter=&quot;*&quot; class=&quot;cbp-filter-item-active cbp-filter-item&quot;&gt;All&lt;/div&gt;
      &lt;div data-filter=&quot;.personal&quot; class=&quot;cbp-filter-item&quot;&gt;Personal&lt;/div&gt;
      &lt;div data-filter=&quot;.professional&quot; class=&quot;cbp-filter-item&quot;&gt;Professional&lt;/div&gt;
      &lt;div data-filter=&quot;.freelance&quot; class=&quot;cbp-filter-item&quot;&gt;Freelance&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>My filter buttons does not seems to work, and I'm not sure what went wrong.</p>
  <hr />
  <h1>jQuery</h1>
  <pre><code>$('.gallery').cubeportfolio({
    filters: '.gallery,.cbp-item',
    loadMore: '#js-loadMore-lightbox-gallery',
    loadMoreAction: 'click',
    layoutMode: 'grid',
    mediaQueries: [{
      width: 1500,
      cols: 5
    }, {
      width: 1100,
      cols: 4
    }, {
      width: 800,
      cols: 3
    }, {
      width: 480,
      cols: 2
    }, {
      width: 320,
      cols: 1
    }],
    defaultFilter: '*',
    animationType: 'rotateSides',
    gapHorizontal: 10,
    gapVertical: 10,
    gridAdjustment: 'responsive',
    caption: 'zoom',
    displayType: 'sequentially',
    displayTypeSpeed: 100,
  
    // lightbox
    lightboxDelegate: '.cbp-lightbox',
    lightboxGallery: true,
    lightboxTitleSrc: 'data-title',
  
  });
  </code></pre>
  <hr />
  <h1>HTML</h1>
  <pre><code>&lt;div class=&quot;gallery cbp cbp-caption-active cbp-caption-zoom cbp-ready&quot; style=&quot;height: 1347px;&quot;&gt;&lt;div class=&quot;cbp-wrapper-outer&quot;&gt;&lt;div class=&quot;cbp-wrapper&quot;&gt;   
  
    &lt;div class=&quot;col-xs-6 col-sm-2 img-pop cbp-item personal&quot; style=&quot;padding: 0px !important; margin: 0px !important; width: 277px; left: 0px; top: 0px;&quot;&gt;&lt;div class=&quot;cbp-item-wrapper&quot;&gt;
     &lt;a href=&quot;/assets/img/portfolio/13/1519524545-0-13.png&quot;&gt;
       &lt;img class=&quot;hvr-shrink&quot; src=&quot;/assets/img/portfolio/13/1519524545-0-13.png&quot;&gt;
     &lt;/a&gt;
   &lt;/div&gt;&lt;/div&gt;
  
    &lt;div class=&quot;col-xs-6 col-sm-2 img-pop cbp-item professional&quot; style=&quot;padding: 0px !important; margin: 0px !important; width: 277px; left: 287px; top: 0px;&quot;&gt;&lt;div class=&quot;cbp-item-wrapper&quot;&gt;
     &lt;a href=&quot;/assets/img/portfolio/29/1519600525-0-29.jpg&quot;&gt;
       &lt;img class=&quot;hvr-shrink&quot; src=&quot;/assets/img/portfolio/29/1519600525-0-29.jpg&quot;&gt;
     &lt;/a&gt;
   &lt;/div&gt;&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  <p>How can I debug this further?</p>