0

I am trying to get jquery-ias working with masonry and I cannot get it working.

I am using a mysql database and php to load images.

I have almost got it all working correctly, after a lot of trial and error.

I am able to get all my images loading correctly into a masonry grid.

I can get infinite scroll working too.

My problem is I can't get the loading gif to work or the 'load more items' button to appear.

The code I am using is

 <script type="text/javascript">

            var $container = $('.wrap');
$container.imagesLoaded(function() {
$container.masonry({
itemSelector: '.item',
isFitWidth: false,
isAnimated: true
})

});

$.ias({
container: '.wrap',
item: '.item',
pagination: '.nav',
next: '.nav a',
loader: '<img src="css/ajax-loader.gif"/>', // loading gif
triggerPageThreshold: 5 ,
onLoadItems: function(items) {
    var $newElems = jQuery(items).css({ opacity: 0 });
    $newElems.imagesLoaded(function() {
        // show elems now they're ready
        $newElems.animate({ opacity: 1 });
        $container.masonry('appended', $newElems, true);

    });
    return true;
},

});

</script>

Any help would be great

Everything works well, just cant see the loading gif or the load more items button, which is really needed

Charis Ryan
  • 85
  • 1
  • 3
  • 11

1 Answers1

0

You can try to give the img tag a class, eg

loader: '<img class="loader" src="css/ajax-loader.gif"/>', // loading gif

Then style it using css so it shows up. Perhaps with a position absolute or something like that.

ps. Your using an older version of Infinite AJAX Scroll, you can download the latest at http://infiniteajaxscroll.com. That might already fix the problem for you right away.

Fieg
  • 3,046
  • 1
  • 16
  • 22