playground
/
isotope
mirror of https://github.com/metafizzy/isotope
1
0
Fork 0
Code Issues Releases Activity
Browse Source

docs : add infinite scroll demo

pull/14/head
David DeSandro 14 years ago
parent
e71c81233d
commit
880cefaa43
9 changed files with 143 additions and 1 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      _includes/element-partial.html
  2. 41
      _layouts/inf-scroll-page.html
  3. 58
      _posts/demos/2011-01-02-infinite-scroll.html
  4. 7
      _posts/pages/2011-01-01-2.yml
  5. 7
      _posts/pages/2011-01-01-3.yml
  6. 7
      _posts/pages/2011-01-01-4.yml
  7. 7
      _posts/pages/2011-01-01-5.yml
  8. 7
      _posts/pages/2011-01-01-6.yml
  9. 8
      js/jquery.infinitescroll.min.js

2
_includes/element-partial.html
Unescape View File

@ -1,5 +1,5 @@
<div class="element {% for cat in element.categories %}{{ cat }} {% endfor %} " data-symbol="{{ element.symbol }}" data-category="{{ element.categories[0] }}">
<div class="element {% for cat in element.categories %}{{ cat }} {% endfor %} {% if page.infinite_scroll %} width2 height2 {% endif %}" data-symbol="{{ element.symbol }}" data-category="{{ element.categories[0] }}">
<p class="number">{{ element.number }}</p>
<h3 class="symbol">{{ element.symbol }}</h3>
<h2 class="name">{{ element.name }}</h2>

41
_layouts/inf-scroll-page.html
Unescape View File

@ -0,0 +1,41 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Isotope Demo: {{ page.title }}</title>
<link rel="stylesheet" href="../css/style.css" type="text/css" media="screen" />
</head>
<body>
<h1>{{ page.title }}</h1>
<div id="demo" class="iso-container variable-sizes">
{% assign page_position = page.page_position %}
{% for element in site.elements limit:20 offset:page_position %}
{% include element-partial.html %}
{% endfor %}
</div>
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
<script src="../src/jquery.opto-transform.js"></script>
<script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.isotope.js"></script>
<script src="../src/jquery.ui.widget.js"></script>
<script>
$(function(){
var $demo = $('#demo');
$demo.isotope({
itemSelector : '.element',
layoutMode : 'fitRows'
});
});
</script>
</body>
</html>

58
_posts/demos/2011-01-02-infinite-scroll.html
Unescape View File

@ -0,0 +1,58 @@
---
title: Infinite Scroll
layout: demo
category: demos
related: layout
infinite_scroll: true
---
<section id="copy">
</section>
<div id="demo" class="iso-container variable-sizes">
{% for element in site.elements limit:20 %}
{% include element-partial.html %}
{% endfor %}
</div> <!-- #demo -->
<nav id="page_nav">
<a href="../pages/2.html"></a>
</nav>
<script src="../js/jquery-1.4.4.min.js"></script>
<script src="../src/mini-modernizr.js"></script>
<script src="../src/jquery.opto-transform.js"></script>
<script src="../src/jquery.smartresize.js"></script>
<script src="../src/jquery.isotope.js"></script>
<script src="../src/jquery.ui.widget.js"></script>
<script src="../js/jquery.infinitescroll.min.js"></script>
<script>
$(function(){
var $demo = $('#demo');
$demo.isotope({
itemSelector : '.element',
});
$demo.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
donetext : 'No more pages to load.',
debug: false,
errorCallback: function() {
// fade out the error message after 2 seconds
$('#infscr-loading').animate({opacity: .8},2000).fadeOut('normal');
}
},
// call Isotope as a callback
function( newElements ) {
$(this).isotope({ appended: $( newElements ) });
}
);
});
</script>

7
_posts/pages/2011-01-01-2.yml
Unescape View File

@ -0,0 +1,7 @@
---
title: Infinite Scroll Page 2
category: pages
layout: inf-scroll-page
page_position: 20
infinite_scroll: true
---

7
_posts/pages/2011-01-01-3.yml
Unescape View File

@ -0,0 +1,7 @@
---
title: Infinite Scroll Page 3
category: pages
layout: inf-scroll-page
page_position: 30
infinite_scroll: true
---

7
_posts/pages/2011-01-01-4.yml
Unescape View File

@ -0,0 +1,7 @@
---
title: Infinite Scroll Page 4
category: pages
layout: inf-scroll-page
page_position: 40
infinite_scroll: true
---

7
_posts/pages/2011-01-01-5.yml
Unescape View File

@ -0,0 +1,7 @@
---
title: Infinite Scroll Page 5
category: pages
layout: inf-scroll-page
page_position: 50
infinite_scroll: true
---

7
_posts/pages/2011-01-01-6.yml
Unescape View File

@ -0,0 +1,7 @@
---
title: Infinite Scroll Page 6
category: pages
layout: inf-scroll-page
page_position: 60
infinite_scroll: true
---

8
js/jquery.infinitescroll.min.js vendored
View File

File diff suppressed because one or more lines are too long
Write Preview
Loading…
Cancel
Save