CODEWITHSUNDEEP
jquery-pluginsjquery-isotope
Jeremy
Jeremy

Reputation: 68

jquery / isotope | basic implementation issues

I'm already using scrollTo, but that can be scrapped or replaced by something else if this trumps it (it's just to jump from top nav to a footer section).

the goal is to have the list of items filter using the isotope filtering, and preferably highlight the selected filter link above (though I'm fairly certain that I'll get that working once I get the isotope bit functioning in basic form, but wouldn't turn down any help to make that happen all at once).

I'm using jQ 1.7.1 and isotope, both minified versions as well as scrollTo 1.4.2 minified. you can see the full bit here: http://beta.wildcatbelts.com/wrestling-belt-gallery-ren.php

my jQ:

$(window).load(function(){

var $container = $('#blist');

$container.isotope({
    itemSelector : 'ul#blist > li'
});


$('#ncont a').click(function(){
    $.scrollTo( '#fcont', 1200, {axis:'y'} );   
});

$('#filters a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
});

});

leading in with:

$(document).ready(function(){

... (which I'm used to seeing more often) doesn't work as another (old, abandoned) plugin on another page (just the homepage) fails with it. I'll happily use each version on the pages necessary to get them both functioning.

my markup:

  <ul id="filters" class="option-set" data-option-key="filter">
    <li><a href="#" data-filter="*" class="selected">Show All</a></li>
    <li><a href="#" data-filter=".P5">5 Plates</a></li>
    <li><a href="#" data-filter=".P3">3 Plates</a></li>
    [ * several more filters]
  </ul>

  <ul id="blist">
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P0"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P5"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    <li class="belts P3"><a href="/example.php"><img src="/images/pic.jpg" alt="alt text" /><span>caption</span></a></li>
    [ * many, many more ]
  </ul>

thanks.

Upvotes: 0

Views: 1954

Answers (1)

Mazuhl
Mazuhl

Reputation: 420

Your filters aren't working is because the itemSelector can't find anything that matches. The selector should just be .belts as it's already looking in the $container element.

Here's the updated Javascript (I've ignored the scrollTo part):

$(function(){

  // set up jquery isotope
  var $container = $('#blist');

  $container.isotope({
    itemSelector : '.belts'
  });

  $('#filters a').click(function(){

    // manage classes for selected/clicked on links
    if ($(this).hasClass('selected')) {
      $(this).removeClass('selected');
    } else {
      $(this).addClass('selected');          
    }

    // get the current selection and apply the filter
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });
});

You can create a #filters a.selected class to style any selected links in your filtering section as I've added in the Javascript for that.

This page from the jQuery Isotope documentation explains how to do combination filters and there's a discussion in a GitHub issue about doing combination (AND and OR) filters.

Upvotes: 1

Related Questions