--- /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