Slick Lightbox open with Button

Question

I would like to open a slick lightbox gallery with a button. In the description, an array is used in the jquery code. But I use ACF: HTML:

$images = get_field('bildergalerie');
if( $images ): ?>
    <div class="row-images">
        <?php foreach( $images as $image ): ?>
            <div class="item">
                     <img src="<?php echo esc_url($image['sizes']['thumbnail']); ?>" alt="<?php echo esc_attr($image['alt']); ?>" />
            </div>
        <?php endforeach; ?>
        </div>
<?php endif; ?>
<div class="row-images">
  <div class="button-black" style="text-align: center;"><a class="btn btn-primary" href="#">Weitere Bilder ansehen</a></div>
</div>

jQuery:

$(".row-images").slickLightbox({
    ?
  });

How can I open the lightbox with a button?

Answer 1

Change your markup to include A tag, with the desired image size to launch in the slick lightbox...

<?php
$images = get_field('bildergalerie');
if( $images ): ?>
    <div id="slick-lightbox" class="row-images">
        <?php foreach( $images as $image ): ?>
            <div class="item">
                <a href="<?=$image['sizes']['large']?>" target="_blank">
                    <img src="<?=$image['sizes']['thumbnail']?>" alt="<?=$image['alt']?>" />
                </a>
            </div>
        <?php endforeach; ?>
    </div>
<?php endif; ?>

<a id="slick-lightbox-btn" class="btn btn-primary" href="#">Weitere Bilder ansehen</a>

Then use jQuery to emulate clicking the first slide when clicking the button. See working demo below...

$(function() {
  $('#slick-lightbox').slickLightbox();
  $('#slick-lightbox-btn').on('click', function(e) {
    e.preventDefault();
    $('.item:first-child A','#slick-lightbox').click();
  });
});

.row-images {
  overflow: hidden;
  margin-bottom: 1rem;
}

.row-images > .item {
  float: left;
  width: 33.333%;
}

.row-images > .item IMG {
  width: 100%;
  height: auto;
}

.btn {
  display: inline-block;
  padding: .5rem 1rem;
  background: #000;
  color: #fff;
  text-decoration: none;
  border-radius: .5rem;
}

<div class="row-images" id="slick-lightbox">
  <div class="item">
    <a href="http://placekitten.com/1000/700" target="_blank">
      <img src="http://placekitten.com/1000/700" alt="Kitty 1" />
    </a>
  </div>
  <div class="item">
    <a href="http://placekitten.com/1010/706" target="_blank">
      <img src="http://placekitten.com/1010/706" alt="Kitty 2" />
    </a>
  </div>
  <div class="item">
    <a href="http://placekitten.com/1060/736" target="_blank">
      <img src="http://placekitten.com/1060/736" alt="Kitty 3">
    </a>
  </div>
</div>

<a href="#" id="slick-lightbox-btn" class="btn">Weitere Bilder ansehen</a>

<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-carousel/1.8.1/slick.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/slick-lightbox/0.2.12/slick-lightbox.min.js"></script>