Multiple galleries in lightbox. Pass gallery ID?

• 

  • Josh White

  • March 6, 2019 at 4:33 am

  I have a custom post type called “galleries”. In this post type I have several posts. Each post contains a gallery field within a repeater field and can have an unlimited number of galleries. I have set each post to display the first image of each gallery on the page in a grid. I’d like to be able to click each of the gallery images in the grid and somehow pass the gallery ID to a lightbox which will then display all the images in a loop for a carousel in the lightbox from the gallery that was clicked.

  I am using UiKit as my front-end framework.

  This is the code I am using to display the first image of each gallery from the repeater on a single post from my custom post type:

  <div class="uk-container">
      @if( have_rows('gallery') )
          <div class="gallery uk-child-width-1-5@s uk-grid-match uk-text-center" uk-grid>
              @while ( have_rows('gallery') )
                  <a href="#modal-media-image" uk-toggle>
                      <div class="uk-card uk-card-hover uk-card-body">
                          @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="<?php echo $image['sizes']['thumbnail']; ?>" alt="<?php echo $image['alt']; ?>" />
                          <h5>@php the_sub_field('gallery_sub_title') @endphp</h5>
                          
                          @endif
                      </div>
                  </a>
              @endwhile
          </div>
      @else
      @endif
  </div>

  This is the modal code I will be using the pass the entire gallery to the lightbox. Obviously this has not been setup yet but it contains a carousel with thumbnav with previous and next button options:

  <div id="modal-media-image" 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">
              <ul class="uk-slideshow-items">
                  <li>
                      <img src="https://getuikit.com/docs/images/photo.jpg" alt="" uk-cover>
                  </li>
                  <li>
                      <img src="https://getuikit.com/docs/images/dark.jpg" alt="" uk-cover>
                  </li>
                  <li>
                      <img src="https://getuikit.com/docs/images/light.jpg" alt="" uk-cover>
                  </li>
              </ul>
              <div class="uk-position-bottom-center uk-position-small">
                  <ul class="uk-thumbnav">
                      <li uk-slideshow-item="0"><a href="#"><img src="https://getuikit.com/docs/images/photo.jpg" width="100" alt=""></a></li>
                      <li uk-slideshow-item="1"><a href="#"><img src="https://getuikit.com/docs/images/dark.jpg" width="100" alt=""></a></li>
                      <li uk-slideshow-item="2"><a href="#"><img src="https://getuikit.com/docs/images/light.jpg" width="100" alt=""></a></li>
                  </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>
          </div>
      </div>
  </div>

  I’m trying to figure out a way to attach an ID to each gallery in the repeater so I can then pass that ID to the lightbox to display the entire set of images for each gallery.

  Hope someone can lend a hand in putting me in the right direction.

  Thank you.
• 

  • 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>