Laravel |Более одной галереи CubePortfolio в виде лезвия

Question

как я могу добавить больше галереи CubePortfolio на мой взгляд. Мой код:

@foreach($page->subpages as $subpage)
    <div id="js-grid-lightbox-gallery" class="cbp ">
        @foreach($subpage->photos as $photo)
             <div class="cbp-item {{ $subpage->id }}">
                 <a href="/project/storage/app/{{ $photo->filename }}" class="cbp-caption cbp-lightbox" data-title="" rel="nofollow">
                     <div class="cbp-caption-defaultWrap">
                         <img src="/project/storage/app/{{ $photo->filename }}" alt="">
                     </div>
                 </a>
             </div>
        @endforeach
    </div>
@endforeach

в настоящее время показывает мне только одну галерею и должна отображать несколько галерей. Одна в порядке, другая вращается вокруг загрузчика.

Я так понимаю, что не может быть двух галерей с одинаковым ID? Как я могу решить эту проблему? Спасибо за помощь.

Answer 1

Добавьте идентификатор из цикла к идентификатору так же, как вы делаете это с классом

<div id="js-grid-lightbox-gallery-{{ $subpage->id }}" class="cbp">

Затем инициализируйте элемент следующим образом (пример из jQuery)

$('[id^=js-grid-lightbox-gallery]').cubeportfolio({

Надеюсь, это поможет