CODEWITHSUNDEEP
javascriptphpjqueryjquery-isotope
AnchovyLegend
AnchovyLegend

Reputation: 12538

Isotope filtering with bootstrap

I am working on using the isotope plugin with bootstrap and have run into some trouble. I need the col-md-4 div around the isotope element gallery-image-a, so the .grid is not a direct parent of the isotope element. Once I get rid of the col-md-4 div that I need, the plugin works.

Was wondering if anyone knows of a way to keep the existing markup while maintaining the functionality of the isotope plugin?

HTML Snippet 1

  <span class="menu-button" id="food-button">Food</span>
  <span class="menu-button" id="staff-button">Staff</span>
  <span class="menu-button" id="all-button">All</span>

HTML Snippet 2

  <div class="container">
        <div class="row grid">
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a food"></a>
           </div>
           <div class="col-md-4">
               <a class="gallery-image-a staff"></a>
           </div>
       </div>
    </div>

CSS

.gallery-image-a {
    display:block;
    height:360px;
    background-position:center center;
    transition: ease all 950ms;
    background-repeat:no-repeat;
    box-sizing: border-box;
    border:10px solid #fff;
    background-size:cover;
    background-image: url('http://animalpetdoctor.homestead.com/acat1.jpg');
}

JavaScript

$grid = $('.grid');
$grid.isotope();

$('#food-button,#staff-button, #all-button').click(function(){
    var id = $(this).attr('id');
    var className = id.replace("-button", "");

    if (className == 'all') {
        $grid.isotope({ filter: '*' });
        return false;
    }
    $grid.isotope({ filter: '.' + className });
});

Upvotes: 0

Views: 3338

Answers (2)

Shiran Dror
Shiran Dror

Reputation: 1480

2 problems. First, the filter works on children so change HTML to this

 <div class="container">
        <div class="row grid">
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 food">
               <a class="gallery-image-a"></a>
           </div>
           <div class="col-md-4 staff">
               <a class="gallery-image-a"></a>
           </div>
       </div>
    </div>

second, even if it does work, you won't see it. add min-width to class

min-width: 100px;

here's a working fiddle: https://jsfiddle.net/shirandror/rvnrk2kc/

Upvotes: 2

Jan Benda
Jan Benda

Reputation: 162

Have you tried defining the itemSelector option to .col-md-4 or better declaring a designated class for that like "grid-item"?

$('.grid').isotope({
   itemSelector: '.grid-item'
});

EDIT:

I put up a working example on codepen: http://codepen.io/iCymiCy/pen/grwpXp?editors=1111

Upvotes: 0

Related Questions