ساختن گالری با isotope

من سه جدول دارم به نامه های زیر میباشد.

• categories
• galleries
• category_gallery

من میخواهم گالری تصاویر isotope استفاده کنم یعنی دسته ها را بیاره و روی دسته کلیک کرد تصاویر مربوط به ان دسته نمایش بدهد. مثل همچین چیزی http://tajineh.co.ir/gallery .

GalleryController.php

public function gallery()
{
    $galleries = Gallery::all();
    $categories = Category::where('parent_id', 42)->get();
    return view('Home.galleries', compact('galleries', '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>

script.js

<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');

        $('#pills-tabContent').isotope({ filter: '#'+id });
    })
</script>

خیلی تلاش کردم اما نشد که بشه که چطوری مبشه روی دسته بندی کلیک کنیم و تصاویر مربوطه به آن دسته نمیش بدهد.

شاید من اشتباه میکنم دوستان اگر میدانن کمکی کنن.