CODEWITHSUNDEEP
javascriptjqueryhtmlcss
code-8
code-8

Reputation: 58652

Filter images using jQuery

I have a portfolio page

enter image description here

I have filter buttons

<div class="clearfix">
  <div class="cbp-l-filters-button cbp-l-filters-left">
    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
    <div data-filter=".personal" class="cbp-filter-item">Personal</div>
    <div data-filter=".professional" class="cbp-filter-item">Professional</div>
    <div data-filter=".freelance" class="cbp-filter-item">Freelance</div>
  </div>
</div>

My filter buttons does not seems to work, and I'm not sure what went wrong.

jQuery

$('.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',

});

HTML

<div class="gallery cbp cbp-caption-active cbp-caption-zoom cbp-ready" style="height: 1347px;"><div class="cbp-wrapper-outer"><div class="cbp-wrapper">   

  <div class="col-xs-6 col-sm-2 img-pop cbp-item personal" style="padding: 0px !important; margin: 0px !important; width: 277px; left: 0px; top: 0px;"><div class="cbp-item-wrapper">
   <a href="/assets/img/portfolio/13/1519524545-0-13.png">
     <img class="hvr-shrink" src="/assets/img/portfolio/13/1519524545-0-13.png">
   </a>
 </div></div>

  <div class="col-xs-6 col-sm-2 img-pop cbp-item professional" style="padding: 0px !important; margin: 0px !important; width: 277px; left: 287px; top: 0px;"><div class="cbp-item-wrapper">
   <a href="/assets/img/portfolio/29/1519600525-0-29.jpg">
     <img class="hvr-shrink" src="/assets/img/portfolio/29/1519600525-0-29.jpg">
   </a>
 </div></div>

</div>

How can I debug this further?

Upvotes: 0

Views: 1229

Answers (2)

Josh
Josh

Reputation: 384

Since cube portfolio is a paid plugin, the documentation isn't exactly freely available online, but I found some docs* and I think I know whats up. Give this a go.

First I think you need to add an ID to the div that contains the filter links

<div class="clearfix">
  <div class="cbp-l-filters-button cbp-l-filters-left" id="filter-container">
    <div data-filter="*" class="cbp-filter-item-active cbp-filter-item">All</div>
    <div data-filter=".personal" class="cbp-filter-item">Personal</div>
    <div data-filter=".professional" class="cbp-filter-item">Professional</div>
    <div data-filter=".freelance" class="cbp-filter-item">Freelance</div>
  </div>
</div>

Then, in the jQuery, the filters property value should be set to filters: '#filter-container',.

Try that and let me know if it fixes your issue.

Update: as has rightfully been pointed out by Patrick, there is actually no need to add an ID, simply changing the filters property value to one of the classes on that container div such as cbp-l-filters-button will do the job.

*it appears someone else bought the cube portfolio plugin and just uploaded the whole directory to their server without removing documentation

Upvotes: 1

Patrick Evans
Patrick Evans

Reputation: 42736

The filters property is supposed to be a css selector to your parent element containing your filter buttons. You currently have .gallery,.cbp-item which neither of those are a parent element for the buttons.

To fix just apply the correct selector for a parent element of your buttons like

 filters: '.cbp-l-filters-button',

The explanation of the various options for the cubeportfolio() method should be in the documentation that you received with the package you downloaded

Upvotes: 2

Related Questions