Response title
This is preview!
Isotope help
in Using jQuery Plugins
•
10 years ago
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. Is there a way to add random classes and keep the isotope working? I am seeking a result like this.
Here is the other code if this helps but you will need to download Isotope.
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. Is there a way to add random classes and keep the isotope working? I am seeking a result like this.
$(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; }
1