Infinite Scroll of Masonry is not working

Question

I do have the following Sourcecode:

CSS

.item { float: left;}

.item.w2 { width:  100px; }
.item.w3 { width:  200px; }
.item.w4 { width:  300px; }

.item.h2 { height: 100px; }
.item.h3 { height: 200px; }
.item.h4 { height: 300px; }

PHP

<?php
$all = array();

$dir = "/www/htdocs/test/test.com/images";
chdir($dir);
array_multisort(array_map('filemtime', ($img = glob("*.*"))), SORT_DESC, $img);

for($i=0; $i<=count($img)-1; $i++)
{
    $name = $img[$i];
    list($wi, $he) = getimagesize($dir . "/" . $name);

    $all[$i]['url'] = $name;
    $all[$i]['reso'] = $wi;
}
?>

HTML

<div style="position: absolute; width: 100%;">
    <div style="position: relative; width: 100%; background-image: url(http://test.com/images/bg.jpg);">
            <div id="gallery-div" style="position: absolute; width: 100%; height: 2500px;">
            </div>
    </div>
</div>

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php"></a> 
</nav>

JAVASCRIPT

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery-infinitescroll/2.0b2.120519/jquery.infinitescroll.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/masonry/3.1.2/masonry.pkgd.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery.imagesloaded/3.0.4/jquery.imagesloaded.min.js"></script>

<script>
        $("#bg-top").css("height", $(window).height());

        var images = <?php echo json_encode($all); ?>;
        var buffer = "";

        // THIS PART PUTS ALL IMAGES INTO THE RIGHT DIVS
        for(i=0; i<= images.length-1; i++)
        {   
            var url = "http://test.com/images" + images[i]['url'];

            if(images[i]['reso']==100)
            {
                buffer += "<div class='item w2 h2'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==200)
            {
                buffer += "<div class='item w3 h3'><img src='" + url + "'/></div>";
            }

            if(images[i]['reso']==300)
            {
                buffer += "<div class='item w4 h4'><img src='" + url + "'/></div>";
            }
        }

        // HERE ALL THE IMAGES WILL BE APPENDED TO #GALLERY-DIV
        $('#gallery-div').append(buffer);

$(function(){
    var $container = $('#gallery-div');

    // THIS WORKS PERFECTLY FINE!
    // Masonry + ImagesLoaded
    $container.imagesLoaded(function(){
        $container.masonry({
            // selector for entry content
            itemSelector: '.item',
            columnWidth: 100
        });
    });
    // UNTIL HERE ...

    // THIS DOES NOT WORK !!!
    // Infinite Scroll
    $container.infinitescroll({
        // selector for the paged navigation (it will be hidden)
        navSelector  : '#page-nav',
        // selector for the NEXT link (to page 2)
        nextSelector : '#page-nav a',
        // selector for all items you'll retrieve
        itemSelector : '.item',

        // finished message
        loading: {
            finishedMsg: 'No more pages to load.'
            }
        },

        // Trigger Masonry as a callback
        function( newElements ) {
            // hide new items while they are loading
            var $newElems = $( newElements ).css({ opacity: 0 });
            // ensure that images load before adding to masonry layout
            $newElems.imagesLoaded(function(){
                // show elems now they're ready
                $newElems.animate({ opacity: 1 });
                $container.masonry( 'appended', $newElems, true );
            });

    });
    // UNTIL HERE ...
 });
</script>

And the Output of GALLERY.PHP is this

GALLERY.PHP

<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div>
<div class='item'><img src='http://www.lessons4living.com/images/penclchk.gif'/></div>

What i want to have now is the infinite scroll functions. When i scroll down to the bottom of the page the content of GALLERY.PHP should appear, but it doesnt. Everything else works perfectly fine, means also the MASONRY function to order the images. The only thing not running is the infinite scroll. When i scroll to the bottom nothing happens.

Answer 1

I'm assuming you're using infinite-scroll v2.1.0, as I also had been banging my head over this.

If you turn on infinite-scroll debug (debug: true), you should see this message:

Sorry, we couldn't parse your Next (Previous Posts) URL. Verify your the css selector points to the correct A tag. If you still get this error: yell, scream, and kindly ask for help at infinite-scroll.com.

I found out that this version requires the page number in be next page URL, in order to parse it correctly (it then makes a calculation on the next page number). So, in your next page URL you should have something like this:

<nav id="page-nav"> 
    <a href="http://test.com/gallery.php?page=2"></a> 
</nav>

There's a way around if you want to control your pagination schema, take a look at this comment: https://github.com/infinite-scroll/infinite-scroll/issues/190#issuecomment-9532922