Very interested in this project.

This is a really young project. I completely forgot the readMe.txt.

For the filters you need to create a view with "Isotope FIlters" Views Style.
it needs to be set to taxonomy (not content).
create a block for this view.

then you need to rewrite the output of the term (name)

<a href="#filter" data-option-value=".[name]">[name]</a>

Now you can put the block in any region you want or in the header of your isotope view.

I added a few screenshots.

in the footer you need a script.. (this needs to be added manually to the views footer in a textarea with php filter enabled)
something like this should do (see my demos or read the documentation on http://isotope.metafizzy.com )

<script>
jQuery(function() {
    var jQuerycontainer = jQuery('#container');
    jQuerycontainer.isotope({
        itemSelector: '.element',
        masonry: {
            columnWidth: 230
        },
        masonryHorizontal: {
            rowHeight: 230
        }
    });
    var jQueryoptionSets = jQuery('#options .option-set'),
        jQueryoptionLinks = jQueryoptionSets.find('a');
    jQueryoptionLinks.click(function() {
        var jQuerythis = jQuery(this);
        // don't proceed if already selected
        if (jQuerythis.hasClass('selected')) {
            return false;
        }
        var jQueryoptionSet = jQuerythis.parents('.option-set');
        jQueryoptionSet.find('.selected').removeClass('selected');
        jQuerythis.addClass('selected');
        // make option object dynamically, i.e. { filter: '.my-filter-class' }
        var options = {},
            key = jQueryoptionSet.attr('data-option-key'),
            value = jQuerythis.attr('data-option-value');
        // parse 'false' as false boolean
        value = value === 'false' ? false : value;
        options[key] = value;
        if (key === 'layoutMode' && typeof changeLayoutMode === 'function') {
            // changes in layout modes need extra logic
            changeLayoutMode(jQuerythis, options);
        } else {
            // otherwise, apply new options
            jQuerycontainer.isotope(options);
        }
        return false;
    });
});
</script>

It's not fully dynamic yet but will be soon, I promise... ;)

I tested it on my theme and the Bartik theme. It should be compatible to other themes too though.

Just take a look at my examples http://isotope.pixelass.com
it explains how to use static filters and shows a few footer-script examples

If you need any help feel free to ask.

For the isotope VIew itself...

create a basic view with "Isotope View" Views Style.
The isotope view itself needs a row class of your terms (see screenshot)

See screenshots

(the variable sizes etc are not in the version you are using. so don't worry about them)
The screenshot is from a newer version of the module. For you it should say
"Grouping field" and "Row class"
You can put replacement patterns in here

Example:
You want to filter by "tags" AND the custom Taxonomy "Isotope filters"
the replacement patterns are: [field_tags] [isotope_terms]

Let's say you have used two vocabularies
You want to be able to sort by a category which is "isotope Filters".
(like in this example http://isotope.pixelass.com/isotope-view/module-testing-area )

Tags can be multiple but isotope can only be one value (I am assuming you set it up this way).

So you need the terms as classes.

[field_tags] [isotope_terms] would output: (say has the "tags" red, round, small AND "isotope Filer" CAT1)
<div class="red round small CAT1" data category="CAT1" >...</div>

the last class is automatically added as a data category (even though this is only needed if you want to sort by category)
So as row class you should just insert [field_tags] [isotope_terms] (make sure to pu a space between)

I just updated the sandbox..
It seems the jquery.isotope.min.js was missing too.

README.txt is included too.

OK glad to see you got it to work.

About the dynamic Filters:
Currently you can add the desired filters "static"
You can use taxonomy terms (adds all terms in that category)
or you can use TRUE filters

There is an example for "TRUE" filters. Those are filters that only show up if elements of that term are in the view. It's still in a very early testing phase but that will be one of the most important features of this module.

The idea:
You have 80 terms in a vocabulary.
The view page 1 has 30 items that use 18 of the 80 terms.
Only the 18 used terms show as filtering options.
The view page 2 has 30 item that use 10 terms.
Only those 10 terms show up.

If you use infinite scrolling, the filters will add up.
Page 1 has 18 terms
page 2 has 10 terms
5 of the terms are not used on page 1
after the first infinite scroll (page 2 is added) there are 23 filters (18 + 5)

I added this to the script for the TRUE Filters2 example: http://isotope.pixelass.com/isotope-view/true-filters-2

This detects whether the body or Image or video is present and will add the filter dynamically. For this to work you need to set the views-field to "hide if empty"
all you need is a

<section id="options" class="clearfix">
      <ul id="filters" class="option-set clearfix" data-option-key="filter">
        <li><a href="#filter" data-option-value="*" class="selected">All</a></li>
     </ul>
</section>

It will only add the frame and the "All" filter. The others are "TRUE-dynamic". You can put the script above in a block or in your views header.
The scriptt below should be added to your init script in the footer of that view.

--------- the fields-name need to be changed to the name of your field:
views-field-field-isotope-image = your IMAGEFIELD
views-field-body = your TEXTFIELD
views-field-field-video = your VIDEOFIELD

//first let's add classes to the different elements    

      jQuerycontainer.find('.views-field-field-isotope-image').each(function(){
          jQuery(this).parent('.element').addClass('image');
       });
      jQuerycontainer.find('.views-field-body').each(function(){
          jQuery(this).parent('.element').addClass('text');
       });
      jQuerycontainer.find('.views-field-field-video').each(function(){
          jQuery(this).parent('.element').addClass('video');
       });

//check the classes of the elements   

var image = jQuery(".element").hasClass("image");
var text = jQuery(".element").hasClass("text");
var video = jQuery(".element").hasClass("video");

//if a class is in the view append the filter for that class(term)   

if (image === true) {
         jQuery('#options .option-set').append('<li class="dynamic-filter"><a href="#filter" data-option-value=".image">image</a></li>');
        jQuerycontainer.isotope('reLayout');
};
 if (text === true) {
         jQuery('#options .option-set').append('<li class="dynamic-filter"><a href="#filter" data-option-value=".text">text</a></li>');
        jQuerycontainer.isotope('reLayout');
};
 if (video === true) {
         jQuery('#options .option-set').append('<li class="dynamic-filter"><a href="#filter" data-option-value=".video">video</a></li>');
        jQuerycontainer.isotope('reLayout');
};

This gives you dynamic filters that append only if the elements are actually present.
These filters can be combined with taxonomy or static filters.
I know it's still hardcoding but after all... this is still a sandbox, right?

The goal is to make all filters behave like the TRUE filters

This means that the filters will extend if you add new taxonomy terms.

STATIC: Filters need to be added to the header or block. They will not be affected by any other settings.

DYNAMIC(Taxonomy): These are created with the "Views Filters" Views style. When you add these they will show all terms for the selected vocabularies. They can be filtered since it's a view. When new terms are added the filters extend automatically (depending on the settings of that view)

TRUE (dynamic): These filters are added automatically. No configuration needs to be made. Only filters for objects that are present are added.

These are the three filtering types I am working on. The TRUE Filters do not work yet (only tests).
If you're looking for a more complete module you will have to wait a little until this is at least a dev release.

Just added a new example http://isotope.pixelass.com/isotope-view/true-filters-3

FULLY dynamic filters. (does not work with multiple terms per element)
You can test it if you want

//add filters for all present terms
jQuery(".element").each(function() {
    //get all data catergories
    var myClass = jQuery(this).attr("data-category");
    //check if a filter is already appended
    var trueClass = jQuery(".option-set li").hasClass(myClass);
    //if FALSE add append the filter
    if (trueClass === false) {
         jQuery('#options .option-set').append('<li class="dynamic-filter ' + myClass + '"><a href="#filter" data-option-value=".' + myClass + '">' + myClass + '</a></li>');
    };
});

Very happy to see someone is working to implement this in Drupal. I would like to help test and depending on my work load over the next few weeks I would also like to contribute. I plan to play around with it tonight and tomorrow to familiarize myself with the plugin and your progress. Thanks for your time and work, check back soon.

I would be very happy to see more contributers...

My time is limited, and so are my skills....

Great project. Hope to get it working. Thanks Greg.

Hi Greg,
I created a basic view with "Isotope View" Views Style follow guide of you. But I don't know what do I insert into header and footer of View?

Very interested in using this - is it still being developed?

Hi Greg,

Your work on this and instructions in this post have been awesome! Thanks so much.
I was wondering if there was an easy way to add to a corner stamp via views? Like this http://fiddle.jshell.net/desandro/qm4Yc/show/ I've tried rather unsuccessfully but I'm also a bit of coding noob.

Thanks!

Hi Greg,

Another question. In your module testing area (http://isotope.pixelass.com/isotope-view/module-testing-area) when you click on an element it enlarges using reLayout, but do you know what code I would use to switch the node's view mode from teaser to full when it enlarges?

If you could help me with this I would be so grateful!

Thanks in advance.