* Krytic suggests http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
Looks simple enough to integrate? Simply add the jQuery plugin like any other, and do this script, I think:
jQuery.ias({
container : ".listing",
// Enter the selector of the element containing
// your items that you want to paginate.
// Not sure what we put here.
item : ".post",
// Enter the selector of the element that each
// item has. Make sure the elements are inside
// the container element.
// I think we need to add an id or a class to the posts row, not sure.
pagination : "div.pagination",
// Enter the selector of the element that contains
// your regular pagination links, like next,
// previous and the page numbers. This element
// will be hidden when IAS loads.
next : "a.pagination-next",
// Enter the selector of the link element that
// links to the next page. The href attribute
// of this element will be used to get the items
// from the next page.
loader : "images/loader.gif"
// Enter the url to the loader image. This image
// will be displayed when the next page with items
// is loaded via AJAX.
});
(on the first two items, the last lines of comments are my own. I have changed the code to fit MyBB but I
have not tested this.)
Just an idea, you could set the max pagination to a huge number, like Frost said, then lazy load the images when they're loaded with the scroll to counter the load time. Don't know if it'll work, though.
(2013-03-19, 05:34 AM)Seabody Wrote: [ -> ]* Seabody suggests http://www.fieg.nl/infinite-ajax-scroll-a-jquery-plugin
Looks simple enough to integrate? Simply add the jQuery plugin like any other, and do this script, I think:
jQuery.ias({
container : ".listing",
// Enter the selector of the element containing
// your items that you want to paginate.
// Not sure what we put here.
item : ".post",
// Enter the selector of the element that each
// item has. Make sure the elements are inside
// the container element.
// I think we need to add an id or a class to the posts row, not sure.
pagination : "div.pagination",
// Enter the selector of the element that contains
// your regular pagination links, like next,
// previous and the page numbers. This element
// will be hidden when IAS loads.
next : "a.pagination-next",
// Enter the selector of the link element that
// links to the next page. The href attribute
// of this element will be used to get the items
// from the next page.
loader : "images/loader.gif"
// Enter the url to the loader image. This image
// will be displayed when the next page with items
// is loaded via AJAX.
});
(on the first two items, the last lines of comments are my own. I have changed the code to fit MyBB but I have not tested this.)
Gonna try implementing this soon. Will post results. Could anyone check out the file and tell me the best way to keep it from conflicting with Prototype? Or is it OK already?
It looks like it may be okay.
It doesn't handle some things you might need in a forum. You'll actually have to reload when someone makes a new post. I think this flavour of endless scrolling is more geared towards sites where you start with the newest item, and then scroll endlessly down to the oldest one.
This is just a theory by glancing at the code, I haven't actually tested it.
That's pretty much what I want to use it for. It's just for the forumdisplay of a single forum.
Not working for me, but knowing me I've made some crucial error.
http://harajuju.net/Forum-Haralooks
(To see it you need to be using dev theme, which you can use by copy and pasting this link first
http://harajuju.net/?action=quickthemeoc&style=19
Hm, give this a try:
<script type="text/javascript">
jQuery(function($) {
$.ias({
container : "#masonrycontainer",
// Enter the selector of the element containing
// your items that you want to paginate.
item : ".post",
// Enter the selector of the element that each
// item has. Make sure the elements are inside
// the container element.
pagination : ".pagination",
// Enter the selector of the element that contains
// your regular pagination links, like next,
// previous and the page numbers. This element
// will be hidden when IAS loads.
next : ".pagination_next a",
// Enter the selector of the link element that
// links to the next page. The href attribute
// of this element will be used to get the items
// from the next page.
loader : "images/spinner.gif"
// Enter the url to the loader image. This image
// will be displayed when the next page with items
// is loaded via AJAX.
});
});
</script>
using this now, it's definitely initializing since pagination is hidden but no items are loading
<script type="text/javascript">
jQuery(function($) {
$.ias({
container : "#masonrycontainer",
// Enter the selector of the element containing
// your items that you want to paginate.
item : ".post",
// Enter the selector of the element that each
// item has. Make sure the elements are inside
// the container element.
pagination : ".pagination",
// Enter the selector of the element that contains
// your regular pagination links, like next,
// previous and the page numbers. This element
// will be hidden when IAS loads.
next : "a .pagination_next",
// Enter the selector of the link element that
// links to the next page. The href attribute
// of this element will be used to get the items
// from the next page.
loader : "/images/spinner.gif"
// Enter the url to the loader image. This image
// will be displayed when the next page with items
// is loaded via AJAX.
});
});
</script>
Try changing masonrycontainer to a class instead of an id, Javascript has problems with that sometimes.
Try swapping.post for masonry-item or masonry? The masonry.js is renaming the selector and it uses item as well. Does the new js work without masonry? Then you would know if that was conflicting.