Reply To: Multiple galleries in lightbox. Pass gallery ID?

• Josh White

• March 6, 2019 at 6:50 am

I don’t normally solve things this quickly but I was able to use a php counter to achieve my results. The only issue I have left are the UiKit previous and next arrows not highlighting the thumbnail for the image that is being displayed. The only way I can highlight the thumbnail is by clicking the thumbnails themselves. Here’s my final code for anyone in the future. If something could be done differently to make this less complicated, I’m open to suggestions.

<div class="uk-container">
    @if( have_rows('gallery') ) @php $i = 0; @endphp
        <div class="gallery uk-child-width-1-5@s uk-grid-match uk-text-center" uk-grid>
        
            @while ( have_rows('gallery') ) @php $i++; @endphp
                <a href="#modal-media-image-{{ $i }}" uk-toggle>
                    <div class="uk-card uk-card-hover uk-card-body" id="{{ $i }}">
                        @php the_row(); 
                        $images = get_sub_field('gallery');
                        $image  = $images[0]
                        @endphp
                        @if( $image )
                        <h3>@php the_sub_field('gallery_title') @endphp</h3>
                        <img src="{{ $image['sizes']['thumbnail'] }}" alt="{{ $image['alt'] }}>" />
                        <h5>@php the_sub_field('gallery_sub_title') @endphp</h5>
                        @endif
                    </div>
                </a>
                <div id="modal-media-image-{{ $i }}" class="uk-flex-top" uk-modal>
                    <div class="uk-modal-dialog uk-width-1-2 uk-margin-auto-vertical">
                        <button class="uk-modal-close-outside" type="button" uk-close></button>
                        <div class="uk-position-relative" uk-slideshow="animation: fade">
                            @php $allimages = get_sub_field('gallery') @endphp
                            @if( $allimages ) @php $i = 0 @endphp
                                <ul class="uk-slideshow-items">
                                    @foreach( $allimages as $image ) @php $i++ @endphp
                                        <li>
                                            <img src="{{ $image['sizes']['large'] }}" alt="{{ $image['alt'] }}" uk-cover>
                                            <a class="full-size" href="{{ $image['url'] }}">Full size</a>
                                        </li>
                                    @endforeach
                                </ul>
                                <div class="uk-position-bottom-center uk-position-small">
                                    <ul class="uk-thumbnav">
                                        @foreach( $allimages as $image ) @php $i++ @endphp
                                            <li uk-slideshow-item="{{ $i }}">
                                                <a href="#">
                                                    <img src="{{ $image['sizes']['thumbnail'] }}" width="50" />
                                                </a>
                                            </li>
                                        @endforeach
                                    </ul>
                                </div>
                                <a class="uk-position-center-left uk-position-small uk-hidden-hover" href="#" uk-slidenav-previous uk-slideshow-item="previous"></a>
                                <a class="uk-position-center-right uk-position-small uk-hidden-hover" href="#" uk-slidenav-next uk-slideshow-item="next"></a>
                                
                            @endif
                        </div>
                    </div>
                </div>
            @endwhile
        </div>
    @else
    @endif
</div>