Implementing jQuery isotope

Question

I've been trying to implementing the awesome isotope plugin http://isotope.metafizzy.co/index.html

I am facing a problem with a filter and am not able to find a workaround for it so far:

What is happening is that when "ALL" filter link is clicked, all items are displayed but when any other filter link is clicked, all the items disappear. I would really appreciate some help:)

I have set up a JSFiddle

And here's the code:

HTML:

<div class="large-12 columns">
    <ul id="portfolio-filter">
        <li><a href="#" data-filter="*">ALL</a></li>
        <li><a href="#" data-filter=".website">WEBSITE</a></li>
        <li><a href="#" data-filter=".logos">LOGOS</a></li>
        <li><a href="#" data-filter=".illustrations">ILLUSTRATIONS</a></li>
        <li><a href="#" data-filter=".brand">BRAND</a></li>
        <li><a href="#" data-filter=".ui">UI</a></li>
        <li><a href="#" data-filter=".icons">ICONS</a></li>
    </ul>
    <div id="portfolio-container">
        <ul class="small-block-grid-2">
            <li><div class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-02.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-03.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-04.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-05.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-06.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-07.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-08.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-09.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-10.jpg" alt=""></a></div></li>
            <li><div class="ui"><a href="#"><img src="img/portfolio/small-11.jpg" alt=""></a></div></li>
            <li><div class="icons"><a href="#"><img src="img/portfolio/small-12.jpg" alt=""></a></div></li>
            <li><div class="website"><a href="#"><img src="img/portfolio/small-13.jpg" alt=""></a></div></li>
            <li><div class="logos"><a href="#"><img src="img/portfolio/small-14.jpg" alt=""></a></div></li>
            <li><div class="illustrations"><a href="#"><img src="img/portfolio/small-15.jpg" alt=""></a></div></li>
            <li><div class="brand"><a href="#"><img src="img/portfolio/small-16.jpg" alt=""></a></div></li>
        </ul>   
    </div><!-- /portfolio-container -->
</div><!-- /large-12 columns -->

JavaScript:

$(document).ready(function(){

  // cache container
  var $container = $('#portfolio-container');
  // initialize isotope
  $container.isotope({
    // options...
  });

  // filter items when filter link is clicked
  $('#portfolio-filter li a').click(function(){
    var selector = $(this).attr('data-filter');
    $container.isotope({ filter: selector });
    return false;
  });
});

Answer 1

1. Apply the selector classes directly to the <li> elements inside <ul class="small-block-grid-2"> and purge the divs from around the images.
2. Make sure all the img tags are properly closed, <img ..... />.
3. Apply isotope to <ul class="small-block-grid-2">

HTML

<div id="portfolio-container">
    <ul class="small-block-grid-2">
        <li class="website"><a href="#"><img src="img/portfolio/small-01.jpg" alt="" /></a></li>
        ...
    </ul>
</div>

javascript

var $container = $('.small-block-grid-2');
// initialize isotope
$container.isotope({
    // options...
});

// filter items when filter link is clicked
$('#portfolio-filter li a').on('click', function() {
    var selector = $(this).data('filter');
    $container.isotope({
        filter: selector
    });
    return false;
});

Updated fiddle