1

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/

jasperketone
  • 53
  • 1
  • 4

1 Answers1

2

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.

Fieg
  • 3,046
  • 1
  • 16
  • 22
  • Thanks a lot, I will try it out tonight. I plan to purchase it once I get it working. – jasperketone May 21 '14 at 20:18
  • are all of the extensions included in the minified version? – jasperketone May 22 '14 at 06:46
  • Yes, all the extensions are included. – Fieg May 22 '14 at 10:08
  • Hello, I also add both callback.js and jquery-ias.min.js. However, it still does not work. The error message is something like "jquery-3.1.1.min.js:2 jQuery.Deferred exception: jQuery.ias is not a function TypeError: jQuery.ias is not a function". Do you know the reason? – user2970089 Nov 14 '16 at 04:31