I'm new to jQuery and web developing but I'll do my best to give you the best damn question that you can ever have.
I'm using jQuery plug in to perform infinite scroll in a web-page that will only display images. This plugin is from Infinite Scrolling though images. I have basically copy/pastebut it's not working for some reason (I'm sorry I can't give you more details but I'm not too deep into web-developing).
I'm testing this demo in a virtual machine from osboxes.org. A linux machine (Ubuntu). I'm using right now firefox altought I tried using Opera or Google Chrome to see if it was some problem with the browser but it's not.
I have tried the following questions with no results: Infinite scrolling jquery not working
Here is the jQuery part:
<script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.4.1.min.js"></script>
<script>
$(document).ready(function() {
$(document).endlessScroll({
inflowPixels: 300,
callback: function() {
var $img = $('#images li:nth-last-child(5)').clone();
$('#images').append($img);
}
});
});
</script>
Body:
<h1>Infinite Scrolling, Demo 3</h1>
<ul id="images">
<li>
<a href="https://www.pexels.com/photo/mist-misty-fog-foggy-7919/">
<img src="https://pexels.imgix.net/photos/7919/pexels-photo.jpg?fit=crop&w=640&h=480" alt="" />
</a>
</li>
<li>
<a href="https://www.pexels.com/photo/landscape-nature-sunset-trees-479/">
<img src="https://pexels.imgix.net/photos/479/landscape-nature-sunset-trees.jpg?fit=crop&w=640&h=480" alt="" />
</a>
</li>
.... some more images (30 more) .....
Unfortunally I can't seem to make the page go infinite scroll.
I have tried this simple example from w3shool and it works like a charm:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#test").hide();
});
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p id="test">This is another paragraph.</p>
<button>Click me</button>
</body>
</html>
