Viewing all photos of post using UIKIT using Lightbox Panel Options "items"

Question

I am using UIKIT Lightbox to display post images like Facebook as below:

Controller

$postImages = postsImages::where('postId', $post->postId)->limit(3)->get();

Blade

<div class="uk-child-width-1-3@m" uk-grid uk-lightbox="animation: slide">
    @foreach ($postImages as $postImage)
        <div>
            <a class="uk-inline" href="{{$postImage->imageLink}}">
                <img src="{{$postImage->imageLink}}">

                @if ($loop->last && $post->hasImage > 3)
                    <div class="uk-overlay-default uk-position-cover more">
                        <div class="uk-position-center">
                            <h1>+{{$post->hasImage - 3}}</h1>
                        </div>
                    </div>
                @endif
            </a>
        </div>
    @endforeach
</div>

I limited the image thumbnails to 3 and the rest will be shown as +number_of_remaining_photos same like Facebook.

The problem is that when I click on a thumbnail to make it large and view the rest then I can see only those three images which I limited.

I went through UIKIT lighbox documentation and I found items option but I don't know how to use it in order to view all the images of that post by creating another query like below:

$postImages = postsImages::where('postId', $post->postId)->get();

to get all images there and showing it in the lightbox.

P.S. I am not sure, that is item option for that purpose or not. )

Answer 1

This is a practical solution.

1- Make another query without limit.

$postImagesAll = postsImages::where('postId', $post->postId)->get();

2- Add data-uk-lightbox="{group:'my-group'}" attribute to the result of both queries like below and everything will work fine:

<div class="uk-grid-collapse" uk-grid uk-lightbox="animation: slide;">
@foreach ($postImages as $postImage)
    <div>
        <a class="uk-inline" href='/storage/posts/{{$postImage->imageLink}}' data-uk-lightbox="{group:'my-group'}">
                <img src="{{$postImage->imageLink}}"/>

                @if ($loop->last && $post->hasImage > 3)
                    <div class="uk-overlay-default uk-position-cover more">
                        <div class="uk-position-center">
                            <h1>+{{$post->hasImage - 3}}</h1>
                        </div>
                    </div>
                @endif
            </div>
        </a>
    </div>
@endforeach
@foreach ($postImagesAll as $postImage)
<a class="uk-hidden" href="{{$postImage->imageLink}}" data-uk-lightbox="{group:'my-group'}"></a>
@endforeach
</div>