Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Autoload not working

See original GitHub issue

Using bootstrap 4.

after loading the page, the plugin loads about 10 pictures, but when i scroll to bottom autoload not fire. Load more images only if i click on next button.

Why this happens?

HTML

<html>
    <head>
    
        <title>Title</title>
    
        <link rel="icon" href="/resources/favicon.png" type="image/x-icon">
    
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        
        <link rel="stylesheet" type="text/css" href="/resources/css/bootstrap.min.css">
    
        <link rel="stylesheet" type="text/css" href="/resources/css/natural-gallery.full.css">
    
        <script src="/resources/js/jquery-3.3.1.min.js"></script>
        <script src="/resources/js/bootstrap.bundle.min.js"></script>
    
        <script src="/resources/js/natural-gallery.full.js"></script>
    </head>
    
    <body class="w-100" style="height: 100vh">
        <nav class="navbar navbar-expand-lg">
            <div class="container">
                <a class="navbar-brand" href="/">
                    <img src="/resources/img/logo.png">
                </a>
                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
                        aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
                    <i class="fas fa-bars text-white"></i>
                </button>
                <div class="collapse navbar-collapse" id="navbarSupportedContent">
                    <ul class="navbar-nav m-auto">
        
                        <li class="nav-item active">
                            <a class="nav-link" href="/">Index</a>
                        </li>
                        <li class="nav-item">
                            <a class="nav-link " href="/page/sfdfd">FAQ</a>
                        </li>
                    </ul>
                </div>
            </div>
        </nav>
        
        <div class="container-fluid px-1 py-1">
            <div id="myGallery" class="w-100 h-100 natural-gallery">
        
                <iframe></iframe>
                
                <div class="natural-gallery-body">
                    <div class="natural-gallery-noresults" style="display: none;">
                        <svg viewBox="0 0 100 100">
                            <use xlink:href="#icon-noresults"></use>
                        </svg>
                    </div>
                    
                    <!-- images -->
                    
                </div>
                <div class="natural-gallery-next" style="display: none;">
                    <svg viewBox="0 0 100 100">
                        <use xlink:href="#icon-next"></use>
                    </svg>
                </div>
            </div>
        </div>
    
        <script>
        
            let containerRef = document.getElementById('myGallery');
        
            let galleryData = {
                options: {
                    infiniteScrollOffset: -1,
                    showCount: false,
                    searchFilter: false,
                    categoriesFilter: false,
                    showNone: true,
                    showOthers: true,
                    lightbox: false
                }
            };
        
            let gallery = new NaturalGallery.Gallery(containerRef, null, galleryData);
        
            let xhr = new XMLHttpRequest();
            xhr.open('GET', '/resources/data.json');
            xhr.send(null);
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4 && xhr.status === 200) {
        
                    var images = JSON.parse(xhr.responseText);
        
                    images.map(function (image) {
                        image.categories = [];
                        image.link = 'https://google.com/';
                        image.linkTarget = '_blank';
                    });
        
                    gallery.collection = images;
        
                }
            };
        
        </script>
    
    </body>
</html>