Home › Forums › Add-ons › Gallery Field › Multiple galleries in lightbox. Pass gallery ID? › Reply To: Multiple galleries in lightbox. Pass gallery ID?
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>
Welcome to the Advanced Custom Fields community forum.
Browse through ideas, snippets of code, questions and answers between fellow ACF users
Helping others is a great way to earn karma, gain badges and help ACF development!
We use cookies to offer you a better browsing experience, analyze site traffic and personalize content. Read about how we use cookies and how you can control them in our Privacy Policy. If you continue to use this site, you consent to our use of cookies.