1 ---

     2 title: item position data

     3 layout: default

     4 category: tests

     5 ---

     6 

     7   <section id="copy">

     8     <p><code>itemPositionDataEnabled</code> option is enabled.  </p>

     9   </section>

    10   

    11   <section id="options" class="clearfix">

    12 

    13     {% include sort-buttons.html %}

    14 

    15     <h3>Etc</h3>

    16 

    17     <ul id="etc" class="clearfix">

    18 

    19       <li id="toggle-sizes"><a href="#toggle-sizes">Toggle variable sizes</a></li>

    20     </ul>

    21   </section> <!-- #options -->

    22 

    23   <div id="container" class="clickable clearfix">

    24     {% for element in site.elements limit:40 %}

    25       {% include element-partial.html %}

    26     {% endfor %}

    27   </div> <!-- #container -->

    28 

    29   <script src="../{{ site.jquery_js }}"></script>

    30   <script src="../{{ site.isotope_js }}"></script>

    31   <script>

    32   

    33     $(function(){

    34     

    35       var $container = $('#container');

    36       

    37       {% include random-sizes.js %}

    38       

    39       $container.isotope({

    40         itemSelector: '.element',

    41         itemPositionDataEnabled: true,

    42         masonry: {

    43           columnWidth : 120

    44         },

    45         getSortData : {

    46           symbol : function( $elem ) {

    47             return $elem.attr('data-symbol');

    48           },

    49           category : function( $elem ) {

    50             return $elem.attr('data-category');

    51           },

    52           number : function( $elem ) {

    53             return parseInt( $elem.find('.number').text(), 10 );

    54           },

    55           weight : function( $elem ) {

    56             return parseFloat( $elem.find('.weight').text().replace( /[\(\)]/g, '') );

    57           },

    58           name : function ( $elem ) {

    59             return $elem.find('.name').text();

    60           }

    61         }

    62       });

    63       

    64       {% include option-set-buttons.js %}

    65 

    66       {% include change-sizes.js %}

    67     

    68     });

    69   </script>