There is one example tutorial here using inertia
Sep 8, 2023
4
Level 1
Infinite Scroll Pagination to Laravel 9
I have a galley page and since it has too many images. I would like to implement infinite scroll pagination so I have a look at jQuery plugin named jScroll in this link: https://devdojo.com/bobbyiliev/how-to-add-a-simple-infinite-scroll-pagination-to-laravel
It look likes the code is old since pagination navigation use Nav tag instead of ul.pagination so how I can make this work with this plugin since it look very simple or there is better solution for this ?
Controller
<?php
namespace App\Http\Controllers;
use Illuminate\Http\Request;
use App\Models\Gallery;
use Illuminate\Support\Carbon;
use Illuminate\Support\Facades\File;
class GalleryController extends Controller
{
public function getGalleryImages() {
$gallery_list = Gallery::paginate(9);
return view('gallery', compact('gallery_list'));
}
}
Blade page
@extends('Layouts.Frontend.MasterFrontend')
@section('content')
@section('styles')
@endsection
<style>
.cbp-ready .cbp-item {
position: unset !important;
padding: 10px;
}
#gallery-images .cbp-lightbox img {
max-height: 200px;
max-width: 100%;
height: auto;
object-fit: cover;
}
</style>
<div class="container pb-4" dir="rtl">
<div id="gallery-images" class="cbp cbp-l-grid-mosaic text-right">
<div class="scrolling-pagination">
@forelse ($gallery_list as $gallery)
<div class="cbp-item" >
<a href="{{ url('uploads/gallery/'.$gallery->gallery_image)}}" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap text-right">
<img src="{{ url('uploads/gallery/'.$gallery->gallery_image)}}" alt="img">
</div>
</a>
</div>
@empty
<div>لم يتم إضافة الصور إلى معرض الصور حتى الآن</div>
@endforelse
{{ $gallery_list->links() }}
</div>
</div>
</div>
<script type="text/javascript">
$('ul.pagination').hide();
$(function() {
$('.scrolling-pagination').jscroll({
autoTrigger: true,
padding: 0,
nextSelector: '.pagination li.active + li a',
contentSelector: 'div.scrolling-pagination',
callback: function() {
$('ul.pagination').remove();
}
});
});
</script>
@endsection
Level 1
This is the solution for the issue:
<div class="infinite-scroll">
@forelse ($gallery_list as $gallery)
<div class="cbp-item" >
<a href="{{ url('uploads/gallery/'.$gallery->gallery_image)}}" class="cbp-caption cbp-lightbox">
<div class="cbp-caption-defaultWrap text-right">
<img src="{{ url('uploads/gallery/'.$gallery->gallery_image)}}" alt="img">
</div>
</a>
</div>
@empty
<div>لم يتم إضافة الصور إلى معرض الصور حتى الآن</div>
@endforelse
{{ $gallery_list->links() }}
</div>
</div>
</div>
<script>
$(document).ready(function() {
$('nav[aria-label="Pagination Navigation"]').hide();
$('.infinite-scroll').jscroll({
autoTrigger: true,
padding: 0,
nextSelector: 'nav[aria-label="Pagination Navigation"] div a',
contentSelector: 'div.infinite-scroll',
callback: function() {
$('nav[aria-label="Pagination Navigation"]').remove();
}
});
});
</script>
1 like
Please or to participate in this conversation.