enmi12/glossaire/_posts/demos/2011-01-02-infinite-scroll.html
changeset 0 d970ebf37754
--- /dev/null	Thu Jan 01 00:00:00 1970 +0000
+++ b/enmi12/glossaire/_posts/demos/2011-01-02-infinite-scroll.html	Wed Nov 06 03:21:17 2013 +0000
@@ -0,0 +1,51 @@
+---
+title: Infinite Scroll
+layout: default
+category: demos
+infinite_scroll: true
+---
+
+  <section id="copy">
+    <p>Isotope is interoperable with <a href="http://www.infinite-scroll.com/">Infinite Scroll</a> by Paul Irish. Use the <a href="../docs/methods.html#appended"><code>appended</code></a> method to add new items to the Isotope layout. CSS transitions have been disabled on the container element to avoid triggering AJAX call prematurely.</p>
+  </section>
+
+  <div id="container" class="variable-sizes clearfix infinite-scrolling">
+    {% for element in site.elements limit:20 %}
+      {% include element-partial.html %}
+    {% endfor %}
+  </div> <!-- #container -->
+  
+  <nav id="page_nav">
+    <a href="../pages/2.html"></a>
+  </nav>
+
+  <script src="../{{ site.jquery_js }}"></script>
+  <script src="../{{ site.isotope_js }}"></script>
+  <script src="../js/jquery.infinitescroll.min.js"></script>
+  <script>
+    $(function(){
+
+      var $container = $('#container');
+    
+      $container.isotope({
+        itemSelector : '.element'
+      });
+      
+      $container.infinitescroll({
+        navSelector  : '#page_nav',    // selector for the paged navigation 
+        nextSelector : '#page_nav a',  // selector for the NEXT link (to page 2)
+        itemSelector : '.element',     // selector for all items you'll retrieve
+        loading: {
+            finishedMsg: 'No more pages to load.',
+            img: 'http://i.imgur.com/qkKy8.gif'
+          }
+        },
+        // call Isotope as a callback
+        function( newElements ) {
+          $container.isotope( 'appended', $( newElements ) ); 
+        }
+      );
+      
+    
+    });
+  </script>
\ No newline at end of file