I have an articles blog and I look to implement Ditto together with Infinite Ajax Scroll.
The Infinite Ajax Scroll (a plugin www.infiniteajaxscroll.com) looks like this:
var container = document.querySelector('.container');
var msnry = new Masonry( container, {
// options
itemSelector: '.item',
gutter: 10
});
var ias = $.ias({
container: ".container",
item: ".item",
pagination: "#pagination",
next: ".next a",
delay: 200
});
ias.on('render', function(items) {
$(items).css({ opacity: 0 });
});
ias.on('rendered', function(items) {
msnry.appended(items);
});
ias.extension(new IASSpinnerExtension());
ias.extension(new IASNoneLeftExtension({html: '<div class="ias-noneleft" style="text-align:center"><p><em>You reached the end!</em></p></div>'}));
The above works for different pages (items) when each page has following code included.
1) On page 1:
<ul id="pagination">
<li><a href="index.html"></a></li>
<li class="next"><a href="index2.html"></a></li>
<li><a href="index3.html"></a></li>
<li><a href="index4.html"></a></li>
</ul>
2) On page 2:
<ul id="pagination">
<li><a href="index.html"></a></li>
<li><a href="index2.html"></a></li>
<li class="next"><a href="index3.html"></a></li>
<li><a href="index4.html"></a></li>
</ul>
3) On page 3:
<ul id="pagination">
<li><a href="index.html"></a></li>
<li><a href="index2.html"></a></li>
<li><a href="index3.html"></a></li>
<li class="next"><a href="index4.html"></a></li>
</ul>
4) On page 4:
<ul id="pagination">
<li><a href="index.html"></a></li>
<li><a href="index2.html"></a></li>
<li><a href="index3.html"></a></li>
<li><a href="index4.html"></a></li>
</ul>
--->
Now I want to use this plugin with Ditto together, but I am struggling to make it work and apply the pagination.
I basically have :
- FOUR different article category pages (each page has about 10 articles).
- The home page needs to load each article category page with infinite scrolling.
- My Ditto call on the home page is quite simple:
[[Ditto? &parents=`30,6,51,64` &display=`all` &orderBy=`createdon DESC`
&tpl=`articles`]]
- My articles chunk is this:
<div class="container">
<div class="item active">
<div class="well">
<img src="[+tvimage+]" alt="" width="30%" height="30%" border="0">
[+pagetitle+]
</div>
</div>
</div>
--> How can I make the pagination for the infinite scrolling work in/with Ditto???
[ed. note: ronbonqqq last edited this post 11 years, 8 months ago.]
