CODEWITHSUNDEEP
javascriptjqueryhtmljquery-masonry
user2018481
user2018481

Reputation: 31

Infinite scrolling + Masonry = not working

After searching for a while -- and trying multiple 'solutions,' I figured it was time to ask for help. I've tried pretty much everything I can think of, but nothing seems to work.

I'm using a plain, simple code for masonry & infinite scrolling, yet it doesn't work. Any help is appreciated.

<html>
<head>
    <script src="../src/js/jquery.js"></script>
    <script src="../src/js/masonry.js"></script>
    <script src="../src/js/infinitescroll.js"></script>
    <script type="text/javascript">
        $(function(){
            var $container = $('#container');
            $container.imagesLoaded(function(){
                $container.masonry({
                    itemSelector: 'img',
                });
            });

            $container.infinitescroll({
                  navSelector  : '#navigation',
                  nextSelector : '#navigation a',
                  itemSelector : 'img',
            },

            function( newElements ) {
                var $newElems = $( newElements ).css({ opacity: 0 });
                $newElems.imagesLoaded(function(){
                    $newElems.animate({ opacity: 1 });
                    $container.masonry( 'appended', $newElems, true ); 
                });
            });
        });
    </script>
</head>
<body>
    <div id="container">
        <img src="../src/1.jpg"/>
        <img src="../src/2.jpg"/>
        <img src="../src/3.jpg"/>
        <img src="../src/1.jpg"/>
        <img src="../src/2.jpg"/>
        <img src="../src/3.jpg"/>
    </div>
    <div id="navigation">
        <a href="index.html"></a>
    </div>
</body>

To sum it all up; infinite scrolling won't work. I don't know what I'm doing wrong, thus why I'm here. Not sure if this is related to the Masonry-part, either.

Upvotes: 1

Views: 1180

Answers (2)

forivall
forivall

Reputation: 9891

jQuery 1.9 also broke a lot of backwards compatability. You could also try using jQuery migrate with jQuery 1.9, and see if you can get that to work.

Upvotes: 1

user2018481
user2018481

Reputation: 31

It appeared that Infinite Scrolling wouldn't work with the latest jQuery version (1.9.0 atm.) Switching to an older version, specifically 1.7.1, solved everything.

Upvotes: 2

Related Questions