diff --git a/_includes/element-partial.html b/_includes/element-partial.html index 561a302..6ddc790 100644 --- a/_includes/element-partial.html +++ b/_includes/element-partial.html @@ -1,6 +1,4 @@ - {% capture a %}{{ element.number | modulus:7 | modulus:2 }}{% endcapture %} - {% capture b %}{{ element.number | modulus:3 }}{% endcapture %} - {% capture classnames %}{% for cat in element.categories %}{{ cat }} {% endfor %} {% if page.infinite_scroll %} width2 height2 {% else %} {% if a == '1' %} width2 {% endif %} {% if b == '0' %} height2 {% endif %} {% endif %} {% endcapture %} + {% capture classnames %}{% for cat in element.categories %}{{ cat }} {% endfor %} {% if page.infinite_scroll %} width2 height2 {% endif %} {% endcapture %}

{{ element.number }}

{{ element.symbol }}

diff --git a/_includes/random-sizes.js b/_includes/random-sizes.js new file mode 100644 index 0000000..f34508c --- /dev/null +++ b/_includes/random-sizes.js @@ -0,0 +1,10 @@ + + // hacky way of adding random size classes + $container.find('.element').each(function(){ + if ( Math.random() > 0.6 ) { + $(this).addClass('width2'); + } + if ( Math.random() > 0.6 ) { + $(this).addClass('height2'); + } + }); \ No newline at end of file diff --git a/_layouts/elements.html b/_layouts/elements.html index 8ca7dd0..fd3072f 100644 --- a/_layouts/elements.html +++ b/_layouts/elements.html @@ -57,6 +57,8 @@ $(function(){ var $container = $('#container'); + + {% include random-sizes.js %} $('#filters').find('a').click(function(){ // get href attribute, minus the #, plus a . to make it a class diff --git a/_posts/demos/2010-12-29-layout-modes.html b/_posts/demos/2010-12-29-layout-modes.html index 03e5cea..c8f47e2 100644 --- a/_posts/demos/2010-12-29-layout-modes.html +++ b/_posts/demos/2010-12-29-layout-modes.html @@ -28,6 +28,8 @@ related: layouts $(function(){ var $container = $('#container'); + + {% include random-sizes.js %} {% include layout-change.js %} diff --git a/_posts/demos/2010-12-31-relayout.html b/_posts/demos/2010-12-31-relayout.html index bc2ac1a..923421d 100644 --- a/_posts/demos/2010-12-31-relayout.html +++ b/_posts/demos/2010-12-31-relayout.html @@ -28,6 +28,8 @@ related: methods $(function(){ var $container = $('#container'); + + {% include random-sizes.js %} // toggle variable sizes of all elements $('#toggle-sizes a').click(function(){ diff --git a/_posts/tests/2011-04-26-item-position-data01.html b/_posts/tests/2011-04-26-item-position-data01.html index 25b2bd7..da9fbc0 100644 --- a/_posts/tests/2011-04-26-item-position-data01.html +++ b/_posts/tests/2011-04-26-item-position-data01.html @@ -34,6 +34,8 @@ category: tests var $container = $('#container'); + {% include random-sizes.js %} + {% include sort-buttons.js %} // toggle variable sizes of all elements diff --git a/_posts/tests/2011-05-13-jquery-animation01.html b/_posts/tests/2011-05-13-jquery-animation01.html index 4fb2a66..b88387f 100644 --- a/_posts/tests/2011-05-13-jquery-animation01.html +++ b/_posts/tests/2011-05-13-jquery-animation01.html @@ -61,6 +61,8 @@ category: tests var $container = $('#container'); + {% include random-sizes.js %} + {% include sort-buttons.js %} $('#filters').find('a').click(function(){ diff --git a/_posts/tests/2011-05-18-centered-masonry.html b/_posts/tests/2011-05-18-centered-masonry.html index a1ae9b1..026bd72 100644 --- a/_posts/tests/2011-05-18-centered-masonry.html +++ b/_posts/tests/2011-05-18-centered-masonry.html @@ -119,44 +119,12 @@ category: tests }; - var $container = $('#container'); - - $('#filters').find('a').click(function(){ - // get href attribute, minus the #, plus a . to make it a class - var filterName = '.' + $(this).attr('href').slice(1); - filterName = filterName === '.show-all' ? '*' : filterName; - $container.isotope({ filter: filterName }) - return false; - }); - - {% include sort-buttons.js %} - - // change size of clicked element - $container.find('.element').live('click', function(){ - $(this).toggleClass('large'); - $container.isotope('reLayout'); - }); - - // toggle variable sizes of all elements - $('#toggle-sizes').find('a').click(function(){ - $container - .toggleClass('variable-sizes') - .isotope('reLayout'); - return false; - }); - - {% include add-buttons.js %} - - $('#shuffle a').click(function(){ - $container.isotope('shuffle'); - return false; - }); - - {% include option-buttons.js %} - $(function(){ - + + var $container = $('#container'); + + $container.isotope({ itemSelector : '.element', masonry : { @@ -181,7 +149,43 @@ category: tests } } }); + + + {% include random-sizes.js %} + + {% include sort-buttons.js %} + + $('#filters').find('a').click(function(){ + // get href attribute, minus the #, plus a . to make it a class + var filterName = '.' + $(this).attr('href').slice(1); + filterName = filterName === '.show-all' ? '*' : filterName; + $container.isotope({ filter: filterName }) + return false; + }); + + // change size of clicked element + $container.find('.element').live('click', function(){ + $(this).toggleClass('large'); + $container.isotope('reLayout'); + }); + + // toggle variable sizes of all elements + $('#toggle-sizes').find('a').click(function(){ + $container + .toggleClass('variable-sizes') + .isotope('reLayout'); + return false; + }); + + {% include add-buttons.js %} + $('#shuffle a').click(function(){ + $container.isotope('shuffle'); + return false; + }); + + {% include option-buttons.js %} + }); \ No newline at end of file