Streaming live at 10am (PST)

Isotope plugin in Webflow


#1

Hello!
Whether tell please perhaps to realize this plugin http://isotope.metafizzy.co/ in Webflow? Possibly someone has examples will be glad to any help;) Or means of Webflow can be made just as on this site http://capethemes.com/demo/outdoor/home/homepage-3/, where the last blog entries?


#2

Hi there! Do you need filtering or you mean visual "moving" effect?


#3

Thanks for attention. I am interested in that how to make such grid and the movement when press the "Load More Posts" button. And when you press the button there other grid is generated. How it occurs? It is about this site http://capethemes.com/demo/outdoor/home/homepage-3/ I simply looked at a code and understood that there the plug-in the Isotope is used. It at the expense of it is realized?


#4

Well, it is possible to do "loading" grid effect, with "re-sizing page" effect harder. You could try to use rows and columns for create grid system. Then use load trigger for section with part of grid.


#5

Well. Thanks for council. I will try so.


#6

Coincidence: earlier this week I was played around with Isotope and made a simple test: http://vrieseveem.webflow.io


#7

Well it turned out! May I clone it to understand as you made it? Perhaps to me it will help to understand as to make that I want.


#8

What I made is more or less a rip/copy of what you can see on the homepage of isotope (http://isotope.metafizzy.co), nothing special about it.


#9

Hi @rich_art how did you get the isotope plugin to work in Webflow?

Would you be able to show us step by step?

Thanks


#10

I'm a visual designer specialized in visualizing complex information and (big) data. I can't code, don't understand Javascript. I was curious how complex it is to integrate isotope.js in Webflow, so I quickly copied some code from http://isotope.metafizzy.co - see the Javascipt I copied below (you have to place it in the footer code).

In the Webflow design you have to set up the divs and name them grid (defined also in the Javascipt). To sort/filter the divs you have to name the divs' data-category.

More setups with Isope are possible, but I didn't try them. As I said, because I don't understand Javascript, I find it hard to understand the documentation on the Isotope pages.

By the way: on http://vrieseveem.webflow.io I also integrated zoomoz js and svg animation to try out whether the different scripts work together, because I'm designing an interactive infographic.

kind regards!

	<script>

	// external js: isotope.pkgd.js

$( document ).ready( function() {
// init Isotope
var $container = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[()]/g, '') );
}
}
});

// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};

// 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');
});
});

});

	</script>

#11

Hi @rich_art thanks for the reply.

I'm like you, I don't understand how to code or implement Javascript either. Still hoping someone on this forum will respond to my tutorial request here ,no luck so far which is disappointing.

Also, I'd love to see your finished interactive infographic when it's done. Let me know when it's finished.


#12

I've been battling with this for a few hours with no success. @rich_art, I've tried to follow your explanation but it is quite vague, any chance of expanding please?

I've been looking at http://isotope.metafizzy.co and http://vrieseveem.webflow.io using chromes's developer tools and this just made everything even more confusing.
So far this is what I've done trying to recreate http://vrieseveem.webflow.io :

1-added the following code in Custom Code> Footer code:

<script>

// external js: isotope.pkgd.js

$( document ).ready( function() {
// init Isotope
var $container = $('.grid').isotope({
itemSelector: '.grid-item',
layoutMode: 'fitRows',
getSortData: {
name: '.name',
symbol: '.symbol',
number: '.number parseInt',
category: '[data-category]',
weight: function( itemElem ) {
var weight = $( itemElem ).find('.weight').text();
return parseFloat( weight.replace( /[()]/g, '') );
}
}
});

// filter functions
var filterFns = {
// show if number is greater than 50
numberGreaterThan50: function() {
var number = $(this).find('.number').text();
return parseInt( number, 10 ) > 50;
},
// show if name ends with -ium
ium: function() {
var name = $(this).find('.name').text();
return name.match( /ium$/ );
}
};

// 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');
});
});

});

2. created a div and named it "grid"
3. created 4 extra divs inside "grid" and named them "grid-item"
4. added 1 extra class to "grid item"s from the following selection: "alkali", "transition" and "post-transition"
5. added custom attributes to the "grid item"s: data-category="transition", data-category="alkali"and data-category="post-transition
6. created 3 buttons with the class "button" and also added class "is-checked" to button 1
Button 1 labeled "show all" with custom attribute: data-filter="*"
Button 2 labeled "metal" with custom attribute: data-filter=".metal"
Button 3 labeled "transition" with custom attribute: data-filter=".transition"

I publish my site and nothing happens when I click the buttons....Any help appreciated

edit: I just pasted the script into codepen and I get : Unexpected token <
No idea why, I'm not a developer, is this the cause?? if so how to resolve?


#13

@Mowgli: I didn't see your post until now. Sorry. I will respond tomorrow.


#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:


#15

Thanks for taking the time to reply. I'll look into the pure webflow solution as it looks like it will be less problematic


#16