Autoload not working
Tsyklop opened this issue · 10 comments
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>
Can you try to add a margin on bottom of the gallery.
Additionnaly you seems to have a class h-100 on #myGallery. Has this any effect on your container ? the height should not be restricted.`
You can try to remove infiniteScrollOffset too.
I'll check tomorrow if I can reproduce.
okokok I get what's going on here.
This lib changed name on npm from natural-gallery-js to @ecodev/natural-gallery-js.
The source I gave you is on the old name, that is locked into version 2.8.0 that is obsolete and out of sync of the docs you can find on the main page of master branch on github. The old name stays published for dependencies on some projets that still use it.
Consider using the following link that match version 3.1.0 that is the last one.
https://www.jsdelivr.com/package/npm/@ecodev/natural-gallery-js
I close the ticket, feel free to re-open if the issue persists.
I updated lib to 3.1.0, but nothing changed.
Code: new Gallery() as indicated on the main page, still not working - i get error.
And autoload not working on my example to.
I trying run code from here, but nothing changed.
h-100 and infiniteScrollOffset removed
I could reproduce.
You have this issue because of the height: 100vh on the <body>tag. This cause the body to never be bigger than viewport and so on, there is no scroll event possible.
If you want to preserve height: 100vh on the <body> you'll need another division with a overflow:scroll. You then have to pass this html element as 4th parameter of the gallery constructor
<div id="wrapper">
<div id="myGallery"></div>
</div>const wrapperRef = document.getElementById('wrapper');
var gallery = new NaturalGallery.Gallery(containerRef, null, galleryData, wrapperRef);Like this scroll event will be listened from div#wrapper.
Can you show your variant? I tried modify my variant, but it was not worked.
And I tried removed height: 100vh from body, but it was not any effect.
Finally, forget what I've just said. The real issue here is the missing of
<!DOCTYPE html>Haven't touched your code except for that.
@sambaptista No. I tried added <!DOCTYPE html>, but still not worked.
Maybe you can fix my code.
<!DOCTYPE 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>
<div class="container-fluid px-1 py-1">
<div id="wrapper">
<div id="myGallery">
</div>
</div>
</div>
<script>
let containerRef = document.getElementById('myGallery');
let galleryData = {
options: {
showCount: false,
searchFilter: false,
categoriesFilter: false,
showNone: false,
showOthers: false,
lightbox: false
}
};
let gallery = new NaturalGallery.Gallery(containerRef, null, galleryData, document.getElementById('wrapper'));
var images = [...];
images.map(function (image) {
image.categories = [];
image.link = 'https://google.com/';
image.linkTarget = '_blank';
});
gallery.collection = images;
</script>
</body>
</html>
Oh. Working!
Thanks!