0

So i'm trying to setup isotope to be my portfolio sorter.. Here I have my filters set up using data-filter.

<div class="filter clear"> 
            <ul> 
                <li><a href="#" class="selected" data-filter="*">All</a></li> 
                <li><a data-filter=".web">Web Design</a></li> 
                <li><a data-filter=".ill">Ilustration</a></li> 
                <li><a data-filter=".logo">Logo</a></li> 
                <li><a data-filter=".video">Video</a></li> 
                <li><a data-filter=".print">Print Design</a></li> 
            </ul> 
        </div>

And here is my portfolio structure.

            <div class="portfolio"> 
                <figure class="entry web"> 
                    <img src="img/portfolio-image.jpg">
                    <span class="hover">
                        <a href="#">VIEW PROJECT</a>
                    </span>
                </figure>
                <figure class="entry ill"> 
                    <img src="img/portfolio-image.jpg">
                    <span class="hover">
                        <a href="#">VIEW PROJECT</a>
                    </span>
                </figure>
                <figure class="entry logo"> 
                    <img src="img/portfolio-image.jpg">
                    <span class="hover">
                        <a href="#">VIEW PROJECT</a>
                    </span>
                </figure>
                <figure class="entry video"> 
                    <img src="img/portfolio-image.jpg">
                    <span class="hover">
                        <a href="#">VIEW PROJECT</a>
                    </span>
                </figure>
                <figure class="entry print"> 
                    <img src="img/portfolio-image.jpg">
                    <span class="hover">
                        <a href="#">VIEW PROJECT</a>
                    </span>
                </figure>

            </div>

        </div>

And here is my Jquery to implement isotope.

<script type="text/javascript">
$(window).load(function(){ 

var $container = $('.portfolio'); 
$container.isotope({ 
    filter: '*', 
    animationOptions: { 
        duration: 750, 
        easing: 'linear', 
        queue: false, 
    } 
}); 
$('nav.filter ul a').click(function(){ 
    var selector = $(this).attr('data-filter'); 
    $container.isotope({ 
        filter: selector, 
        animationOptions: { 
            duration: 750, 
            easing: 'linear', 
            queue: false, 
        } 
    }); 
  return false; 
}); 
var $optionSets = $('nav.filter ul'), 
   $optionLinks = $optionSets.find('a'); 

   $optionLinks.click(function(){ 
      var $this = $(this); 
  // don't proceed if already selected 
  if ( $this.hasClass('selected') ) { 
      return false; 
  } 
var $optionSet = $this.parents('nav.filter ul'); 
$optionSet.find('.selected').removeClass('selected'); 
$this.addClass('selected');  
}); 
});

Can anyone give me some help on spotting the error...

When I click on the links to sort, it just follows the href and doesn't sort...

DevNinja
  • 60
  • 9
  • Did you try to remove the href attribute in filter option. I use filter without href. You only need href if you want to use onhashchange or pushstate method... – freaky Jul 29 '13 at 16:15
  • I Removed the href and clicking the filter does nothing.. any other ideas? – DevNinja Jul 31 '13 at 03:38

0 Answers0