Как реализовать кнопку «Показать еще» для подгрузки фотографий на одной странице в цикле Laravel 8?

Question

[VakaBaka]

Всем привет! На странице есть фильтрация по категориям фотографий, показать все фото и определенную категорию. Названия категорий занесены в базу и сами фотографии так же занесены в отдельную таблицу и фотография имеет category_id. У меня есть такой контроллер

public function showMainPage()
    {
        $carousel = Category::find('1')->images()->pluck('image'); 

        $categories = Category::get()->except([1])->all();

        $instagram = Instagram::pluck('image');

        return view('index', [
                'carouselInView' => $carousel,
                'categoriesInView' => $categories,
                'instagramInView' => $instagram
                ]);
    }

и два цикла

<div class="row alime-portfolio">
                @foreach($categoriesInView as $category)
                @foreach($category->images->pluck('image') as $image)
                    <!-- Single Gallery Item -->
                    <div class="col-12 col-sm-6 col-lg-3 single_gallery_item {{$category->name}} mb-30 wow fadeInUp" data-wow-delay="100ms">
                        <div class="single-portfolio-content">
                            <img src="/" alt="">
                            <div class="hover-content">
                                <a href="/" class="portfolio-img">+</a>
                            </div>
                        </div>
                    </div>
                @endforeach
                @endforeach
            </div>

            <div class="row">
                <div class="col-12 text-center wow fadeInUp" data-wow-delay="700ms">
                    <a href="#" class="btn alime-btn btn-2 mt-15">View More</a>
                </div>
            </div>

, как мне сделать подгрузку фотографий из цикла по кнопке view more на одной страницу, а не так чтобы загружались сразу все фотографии? Помогите, пожалуйста, желательно без js (или если есть уже готовый скрипт чтобы просто вставить), владею только PHP и не совсем хорошо html css.

Comments

[JhaoDa]

Код картинкой — нарушение правил.

[ThunderCat]

как мне сделать подгрузку фотографий из цикла по кнопке view more на одной страницу,

Кошмар. Очень бестолковое описание задачи, код не оформлен (хотя он особо и не нужен тут, но все же...), в итоге ничего не ясно, что вы хотите получить. Похоже что вам нужен обычный пэйджинг...

Вам нужна подгрузка еще какого-то количества фото на эту же страницу без перезагрузки?

Или должна загружаться новая страничка, только со следующей страницей фотографий?

[VakaBaka]

ThunderCat, у меня в цикле около 100 фотографий, мне нужно сделать чтобы сначала загружались первые 30 фотографий с цикла, а следующие 30 загружались при нажатии кнопки view more на этой же странице

Answer 1

[Alfieros]

Готовое решение

Answer 2

[ThunderCat]

VakaBaka, во первых без js подгрузка не получится в любом случае. Во вторых - как вариант без аякса - загружайте их в отдельные блоки по 30 штук, первый пусть будет визибл, остальные дисплей нон. По кнопке показываете следующий скрытый блок. Для небольшого количества фото норм, плюсом будет то что на бэкенде ничего менять не надо.
Более правильным решением будет аякс, на кнопке должен быть дата атрибут текущей страницы, по клику он вызывает аякс загрузку элементов от "номер страницы*30" до "номер страницы*30+30" и меняем дата атрибут на "номер страницы+1".