I’m trying to implement infinite scroll on the website page that is going to have 20 slideshows.
I was planning to use waypoint libraries http://imakewebthings.com/waypoints/shortcuts/infinite-scroll/
<?php snippet('header') ?>
<main class="home">
<div id="container">
<div class="slideshow1 infinite-item post">
<ul class="bxslider1">
<?php foreach($page->gallery1()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<div class="outside">
<p><a href="" id="prev1">Prev/</a>
<a href="" id="next1">Next</a></p>
</div>
<div class="description" style="display: none;"><?php echo $page->caption1()->kirbytext() ?></div>
</div>
<div class="slideshow2 infinite-item post">
<ul class="bxslider2">
<?php foreach($page->gallery2()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" /></li>
<?php endif ?>
<?php endforeach ?>
</ul>
<div class="outside1">
<p><a href="" id="prev2">Prev/</a>
<a href="" id="next2">Next</a></p>
</div>
<div class="description" style="display: none;"><?php echo $page->caption2()->kirbytext() ?></div>
</div>
<div class="slideshow3 infinite-item post">
<ul class="bxslider3">
<?php foreach($page->gallery3()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" />
</li>
<?php endif ?>
<?php endforeach ?>
</ul>
<div class="outside3">
<p><a href="" id="prev3">Prev/</a>
<a href="" id="next3">Next</a></p>
</div>
<div class="description" style="display: none;"><?php echo $page->caption3()->kirbytext() ?></div>
</div>
<div class="slideshow4 infinite-item post">
<ul class="bxslider4">
<?php foreach($page->gallery4()->yaml() as $image): ?>
<?php if($img = $page->image($image)): ?>
<li>
<img src="<?= $img->url() ?>" alt="<?= $page->title()->html() ?>" /></li>
<?php endif ?>
<?php endforeach ?>
</ul>
<div class="outside4">
<p><a href="" id="prev4">Prev/</a>
<a href="" id="next4">Next</a></p>
</div>
<div class="description" style="display: none;"><?php echo $page->caption4()->kirbytext() ?></div>
</div>
</div>
<div id='date'></div>
</main>
<?php snippet('footer') ?>
I’d love each slideshow div to load on scroll?
I did everything according to their tutorial but never got the result.
my header with script looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>OR</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><?php echo $site->title()->html() ?> | <?php echo $page->title()->html() ?></title>
<meta name="description" content="<?php echo $site->description()->html() ?>">
<meta name="keywords" content="<?php echo $site->keywords()->html() ?>">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<?php echo js('assets/js/jquery.bxslider.min.js') ?>
<?php echo js('assets/js/jquery.waypoints.min.js') ?>
<?php echo js('assets/js/jquery.lazy.min.js') ?>
<?php echo css('assets/css/jquery.bxslider.css') ?>
<?php echo css('assets/css/main.css') ?>
<script>
$(function () {
var infinite = new Waypoint.Infinite({
element: $('.infinite-container')[0]
})
// Slideshow 1
var slider1 = $('.bxslider1').bxSlider({
pager: true,
pagerType: 'short',
adaptiveHeight: true,
mode: 'fade'
});
$('#next1').click(function(){
slider1.goToNextSlide();
return false;
});
$('#1prev1').click(function(){
slider1.goToPrevSlide();
return false;
});
// Slideshow 2
var slider2 = $('.bxslider2').bxSlider({
pager: true,
pagerType: 'short',
adaptiveHeight: true,
mode: 'fade'
});
$('#next2').click(function(){
slider2.goToNextSlide();
return false;
});
$('#prev2').click(function(){
slider2.goToPrevSlide();
return false;
});
// Slideshow 3
var slider3 = $('.bxslider3').bxSlider({
pager: true,
pagerType: 'short',
adaptiveHeight: true,
mode: 'fade'
});
$('#next3').click(function(){
slider3.goToNextSlide();
return false;
});
$('#prev3').click(function(){
slider3.goToPrevSlide();
return false;
});
// Slideshow 4
var slider4 = $('.bxslider4').bxSlider({
pager: true,
pagerType: 'short',
adaptiveHeight: true,
mode: 'fade'
});
$('#next4').click(function(){
slider4.goToNextSlide();
return false;
});
$('#prev4').click(function(){
slider4.goToPrevSlide();
return false;
});
});
$(function() {
$(window).on("scroll resize", function() {
var pos = $('#date').offset();
$('.post').each(function() {
if (pos.top >= $(this).offset().top && pos.top <= $(this).next().offset().top) {
$('#date').html($(this).find('.description').text()); //or any other way you want to get the date
return; //break the loop
}
});
});
});
</script>
</head>
<body>
<header class="header cf" role="banner">
<div id="randomImage"><a class="logo" href="<?php echo url('home') ?>"> </a></div>
<?php snippet('menu') ?>
</header>
any advices?
thanks in advance for any help