Isotope plugin in Webflow

Design help Custom code
14

@Mowgli: It is difficult to comment on your steps, because there’s no example (of read-only webflow thing). As I said earlier, I’m not an expert, I’m a designer unable to interpret or write script.

On http://isotope.metafizzy.con they use html buttons (…). These buttons to my knowledge do not exist in Webflow. So you can’t just copy the page and code from metafizzy. So I changed the setup compared to metafizzy:

  1. In stead of the elements which invoke the filter action, I used Webflow “buttons” = with a class=“button”

  2. I changed the script from metafizzy, because in their script work with te element and changed it to ‘a’ in the lines with
    “on(“click”, “button”, function()”

             // bind filter button click
         $('.filters').on( 'click', 'a', function() {
           var filterValue = $( this ).attr('data-filter');
           // use filterFn if matches value
           filterValue = filterFns[ filterValue ] || filterValue;
           $container.isotope({ filter: filterValue });
         });
         // bind sort button click
         $('.sorts').on( 'click', 'a', function() {
           var sortByValue = $(this).attr('data-sort-by');
           $container.isotope({ sortBy: sortByValue });
         });
         // change is-checked class on buttons
         $('.button-group').each( function( i, buttonGroup ) {
           var $buttonGroup = $( buttonGroup );
           $buttonGroup.on( 'click', 'a', function() {
             $buttonGroup.find('.is-checked').removeClass('is-checked');
             $( this ).addClass('is-checked');
           });

I think the Isotype plugin is wonderful, but it is a bit to complex to implement. A solution from within Webflow with the same effect is presented by sabanna - you can find it here: