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.
$(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.
<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>
.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;
}