Hello people,

I am trying to figure out how to use Isotope and Wordpress! So far I am quite lost but managed to get a simple page kind of working for Isotope!

I need to know what this line of code does and how it works so I can adapt it to control when the class width2 is added.

The main line of code that is confusing me is: if ( number % 7 % 2 === 1 ) {

Also this means I need to add a class of .number with a number inside to make some blocks a different size.

Code:
$(function(){
      
      var $container = $('#container');
	  
	  // add randomish size classes -
      $container.find('.item').each(function(){
        var $this = $(this),
            number = parseInt( $this.find('.number').text(), 10 );
        if ( number % 7 % 2 === 1 ) {
          $this.addClass('width2');
        }
        if ( number % 3 === 0 ) {
          $this.addClass('height2');
        }
      });
      
      $container.isotope({
		  itemSelector: '.item',
		  masonry : {
			  columnWidth: 240
			}
      });
      
});
Here is the other code if this helps but you will need to download Isotope.

HTML Code:
<div id="container">
  <div class="item"><p class="number">20</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">2</p></div>
  <div class="item"><p class="number">3</p></div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
  <div class="item">...</div>
</div>
Code:
.item {
	width:200px;
	height:200px;
	background:#f00;
	margin:10px;
}
.width2 {
	width:420px;
	height:420px;
}

/**** Isotope Filtering ****/

.isotope-item {
  z-index: 2;
}

.isotope-hidden.isotope-item {
  pointer-events: none;
  z-index: 1;
}

/**** Isotope CSS3 transitions ****/

.isotope,
.isotope .isotope-item {
  -webkit-transition-duration: 0.8s;
     -moz-transition-duration: 0.8s;
      -ms-transition-duration: 0.8s;
       -o-transition-duration: 0.8s;
          transition-duration: 0.8s;
}

.isotope {
  -webkit-transition-property: height, width;
     -moz-transition-property: height, width;
      -ms-transition-property: height, width;
       -o-transition-property: height, width;
          transition-property: height, width;
}

.isotope .isotope-item {
  -webkit-transition-property: -webkit-transform, opacity;
     -moz-transition-property:    -moz-transform, opacity;
      -ms-transition-property:     -ms-transform, opacity;
       -o-transition-property:      -o-transform, opacity;
          transition-property:         transform, opacity;
}

/**** disabling Isotope CSS3 transitions ****/

.isotope.no-transition,
.isotope.no-transition .isotope-item,
.isotope .isotope-item.no-transition {
  -webkit-transition-duration: 0s;
     -moz-transition-duration: 0s;
      -ms-transition-duration: 0s;
       -o-transition-duration: 0s;
          transition-duration: 0s;
}