1 ---

     2 title: Adding items

     3 layout: default

     4 category: demos

     5 ---

     6 

     7   <section id="copy">

     8     <p>The <code>insert</code> method will append, add items to the widget, filter, sort, and then layout all items</p>

     9     <p>The <code>appended</code> method adds items to the widget, and then lays out only the new items.</p>

    10     <p>The <code>reloadItems</code> method re-collects all items in their current order in the DOM, which can be useful for prepending items.</p>

    11     <p>See docs on <a href="../docs/adding-items.html">adding items</a>.</p>

    12   </section>

    13 

    14   <section id="options">

    15     <ul class="clearfix">

    16       <li id="insert"><a href="#insert">Insert new elements</a></li>

    17       <li id="append"><a href='#append'>Append new elements</a></li>

    18       <li id="prepend"><a href='#prepend'>Prepend</a></li>

    19     </ul>

    20   </section>

    21 

    22   <div id="container" class="clearfix">

    23     {% for elem_number in site.best_of_order :limit 10 %}

    24       {% assign element = site.elements[elem_number] %}

    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 src="../js/fake-element.js"></script>

    32   <script>

    33     $(function(){

    34       

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

    36 

    37       {% include add-buttons.js %}

    38 

    39       $('#prepend a').click(function(){

    40         var $newEls = $( fakeElement.getGroup() );

    41         $container

    42           .prepend( $newEls ).isotope('reloadItems').isotope({ sortBy: 'original-order' })

    43           // set sort back to symbol for inserting

    44           .isotope('option', { sortBy: 'symbol' });

    45 

    46         return false;

    47       });

    48 

    49       $container.isotope({

    50         itemSelector : '.element',

    51         filter: '*',

    52         getSortData : {

    53           symbol : function( $elem ) {

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

    55           }

    56         },

    57         sortBy : 'symbol'

    58       });

    59     

    60     });

    61   </script>