Q8Xbox's avatar

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

0 likes
4 replies
Q8Xbox's avatar

@Tray2 It is hard to follow because It use vue.js which I don't know anything about it. Is there another way ?

1 like
Q8Xbox's avatar
Q8Xbox
OP
Best Answer
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.