Как создать протфоло с изотопом laravel? - PullRequest
Новая
       33

Как создать протфоло с изотопом laravel?

0 голосов
/ 20 февраля 2020

У меня есть три таблицы

GalleryController. php

 public function gallery()
 {
    $galleries = Gallery::whereNotNull('image')->latest()->paginate(25);
    $catCommittee = Category::where('parent_id',16)->get();
    $categories = Category::where('parent_id', 42)->get();
    return view('Home.galleries', compact('galleries','catCommittee', 'categories'));
 }

galleries.blade. php

<div class="container">
    <h2 class="mt-3 mb-3">{{ __('message.menu.galleries') }}</h2>
    <div class="row">
        <div class="container-fluid" style="margin-top:20px;">
            <div class="row">
                <ul class="nav nav-pills mb-3" id="pills-tab" role="tablist">
                    @foreach($categories as $category)

                        <li class="nav-item">
                            <a class="nav-link"  id="isotope-{{ $category->id }}-tab" data-toggle="pill"                                         href="#isotope-{{ $category->id }}" role="tab" aria-controls="isotope-{{ $category->id }}" aria-selected="false">{{ $category->name }}</a>
                        </li>
                    @endforeach
                </ul>
            </div><hr noshade style="margin-top:-20px;">
            <div class="container grid">
                <div class="tab-content" id="pills-tabContent">

                    @foreach($categories as $key=>$category)
                        <?php $ok = false;?>
                        @foreach($category->galleries as $key=>$gallery)
                            <?php $ok = true;?>
                           @if(count($category->galleries) == 1 || $key == 0)

                            <div class="tab-pane fade" id="isotope-{{  $gallery->pivot->category_id }}" role="tabpanel" aria-labelledby="isotope-{{ $gallery->pivot->category_id }}-tab">
                        @endif
                                <div class="Portfolio">
                                    <a href="#!">
                                        <img class="card-img" src="{{ $gallery->image }}" alt="">
                                    </a>
                                    <div class="desc">{{ $gallery->title }}</div>
                                </div>
                                @if(count($category->galleries) == 1 || count($category->galleries) == ++$key)
                                    </div>
                                @endif
                        @endforeach
                        @if(!$ok)
                                <div class="tab-pane fade" id="isotope-{{  $category->id }}" role="tabpanel" aria-labelledby="isotope-{{ $category->id }}-tab"></div>
                        @endif
                    @endforeach
                </div>
            </div>
        </div>
    </div>
</div>

Я пытался показать изотоп для своего сайта, но мне это не удалось.

ajax

<script src="https://unpkg.com/isotope-layout@3/dist/isotope.pkgd.min.js"></script>
<script>
    $('.nav-item .nav-link').trigger('click');
    $('.nav-item .nav-link').on('click', function (e) {
        e.preventDefault();
        var id = $(this).attr('id');

        $(document).ready( function() {
            $('#pills-tabContent').isotope();
        });
    })
</script>

Кто-нибудь знает, почему это так? Изотоп не имеет особой поддержки, так как их центр предназначен исключительно для отчетов об ошибках, и, вероятно, это просто мое невежество.

...