Autoload not working
See original GitHub issueUsing 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>
Issue Analytics
- State:
- Created 5 years ago
- Comments:10 (4 by maintainers)
Top Results From Across the Web
Class autoload not working - php - Stack Overflow
I'm a beginner in PHP development and I'm facing a problem in my development in PHP OO. I saw is better use the...
Read more >Autoloading not work · Issue #9815 · composer ... - GitHub
This is the first issue that came up for me on google, so I am adding another solution to a similar problem here....
Read more >Autoload - Transperth
Autoload enables a direct debit to be made automatically from a nominated bank account or credit card to your SmartRider card account when...
Read more >Autoload trailers not working after update? - GIANTS Software
Anyone able to load pallets with the autoload trailers since the update? I can select the type of pallet I want but nothing...
Read more >Composer autoload not working for classes in theme folder
I am on bedrock, I tried to implement the ps4 namespacing for autoloading classes in a theme subfolder, like my-theme/includes with all my...
Read more >Top Related Medium Post
No results found
Top Related StackOverflow Question
No results found
Troubleshoot Live Code
Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start FreeTop Related Reddit Thread
No results found
Top Related Hackernoon Post
No results found
Top Related Tweet
No results found
Top Related Dev.to Post
No results found
Top Related Hashnode Post
No results found
Top GitHub Comments
Oh. Working!
Thanks!