lundi 20 avril 2015

Infinite Scroll of Masonry is not working

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://ift.tt/1J268zQ);">
            <div id="gallery-div" style="position: absolute; width: 100%; height: 2500px;">
            </div>
    </div>
</div>

<nav id="page-nav"> 
    <a href="http://ift.tt/1DCVg6Z"></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://ift.tt/1wwssvZ'/></div>
<div class='item'><img src='http://ift.tt/1wwssvZ'/></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.

Aucun commentaire:

Enregistrer un commentaire