Isotope + Webflow's CMS

Community resources Show & Tell
8

Hey Omar,

I’m glad that you like it :wink:

  1. I’ve followed this nice tutotial here and just adapt it a little bit to fit on what I was looking for.

        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.isotope/2.2.2/isotope.pkgd.min.js"></script>
    <script src=https://cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.1.8/imagesloaded.pkgd.min.js></script>


   // add dynamic class
 jQuery
 ( '.w-dyn-item .categoria' ).each
 (
 	function( index, element )
 	{
 		var _this = jQuery( element );
 			_this.parent().parent().addClass( _this.text().toLowerCase() );
 	}
 );



 $(document).ready( function() {
   // init Isotope
   var $grid = $('.grid').isotope({
     itemSelector: '.w-dyn-item',
     sortBy : 'random'
   });
   
   
   
   // layout Isotope after each image loads
   $grid.imagesLoaded().progress( function() {
     $grid.isotope('layout')
   }); 

   // store filter for each group
   var filters = {};

   $('.filters').on( 'click', '.button', function() {
     var $this = $(this);
     // get group key
     var $buttonGroup = $this.parents('.button-group');
     var filterGroup = $buttonGroup.attr('data-filter-group');
     // set filter for group
     filters[ filterGroup ] = $this.attr('data-filter');
     // combine filters
     var filterValue = concatValues( filters );
     // set filter for Isotope
     $grid.isotope({ filter: filterValue });
   });

   // change is-checked class on buttons
   $('.button-group').each( function( i, buttonGroup ) {
     var $buttonGroup = $( buttonGroup );
     $buttonGroup.on( 'click', 'button', function() {
       $buttonGroup.find('.is-checked').removeClass('is-checked');
       $( this ).addClass('is-checked');
     });
   });
 });

 // flatten object by concatting values
 function concatValues( obj ) {
   var value = '';
   for ( var prop in obj ) {
     value += obj[ prop ];
   }
   return value;
 }

  2. To be honest, I had a huge help from a developer/friend (Morris Russel) to add dynamically a class using information from cms, but basically is:

       // add dynamic class
 jQuery
 ( '.w-dyn-item .categoria' ).each
 (
 	function( index, element )
 	{
 		var _this = jQuery( element );
 			_this.parent().parent().addClass( _this.text().toLowerCase() );
 	}
 );

I hope it also works to you :slight_smile:
Cheers

PS.: :sweat_smile: Don’t forget to add < script >

2 Likes