Search code examples
jqueryajaxinfinite-scrollpackeryjquery-ias

JQuery IAS Infinite Scrolling + Packery: IASCallbacks is not defined


I'm having trouble implementing Packery with Jquery Infinite AJAX scroll on a Tumblr theme design. It keeps returning "Uncaught ReferenceError: IASCallbacks is not defined" and I've been unable to determine why.

This is what I have thrown together but I am not that great at Javascript.

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://static.tumblr.com/odxsob3/T3qn5qau8/jquery.velocity.min.js"></script>
<script src="http://static.tumblr.com/h1dcvfk/ocan5pp3p/imagesloaded.js"></script>
<script src="http://static.tumblr.com/h1dcvfk/75cn5w65t/history.js"></script>
<script src="http://static.tumblr.com/h1dcvfk/XXvn5w66q/spinner.js"></script>
<script src="http://static.tumblr.com/h1dcvfk/arNn5w6d6/noneleft.js"></script>
<script type="text/javascript" src="http://static.tumblr.com/h1dcvfk/PWVn5tkn0/packery.js"></script> 
<script src="http://oss.maxcdn.com/rrssb/1.6.0/js/rrssb.min.js"></script> 
<script src="http://www.dropbox.com/s/kwr4g7dmqiiknry/urbane.js?dl=1"></script>
<script type="text/javascript" src="http://static.tumblr.com/h1dcvfk/Vyyn5w64k/jquery-ias.js"></script>

<script>

(function () {

var container = document.querySelector('#grid-container-urbane');
var pckry = new Packery(container, {
    // options
    itemSelector: '.grid-item',
    stamp: '.stamp',
    gutter: 0
});
var ias = $.ias({
    container: '#grid-container-urbane',
    item: '.grid-item',
    pagination: '.pagination',
    next: '#next-page'
});

ias.on('rendered', function(items) {

    imagesLoaded(container, function() {
        pckry.appended(items);
        pckry.layout();
    });

});

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>'
}));
})();

</script>

If anyone can help, it'd be appreciated. Check out the live page at http://digitalsocialnetwork.tumblr.com/


Solution

  • you're using the unminified version of Infinite Ajax Scroll. That should not be a problem, only that you are missing a file which should be loaded before jquery-ias.js. You can find it here (it's called callbacks.js): https://github.com/webcreate/infinite-ajax-scroll/tree/master/src

    Although I strongly recommend you to use the minified version which can be downloaded here.