ACF Gallery

gallery-markup.php

<div id="light-gallery" class="row small-up-2 medium-up-3 large-up-4">
    <div class="column column-block" data-src="large.jpg" data-sub-html="Image Caption">
        <div class="thumbnail" style="background-image: url(thumbnail.jpg);"></div>
        <img width="640" height="427" src="thumbnail.jpg" class="attachment-medium size-medium" alt="">
    </div>
    <div class="column column-block" data-src="large.jpg" data-sub-html="Image Caption">
        <div class="thumbnail" style="background-image: url(thumbnail.jpg);"></div>
        <img width="640" height="427" src="thumbnail.jpg" class="attachment-medium size-medium" alt="">
    </div>
    <div class="column column-block" data-src="large.jpg" data-sub-html="Image Caption">
        <div class="thumbnail" style="background-image: url(thumbnail.jpg);"></div>
        <img width="640" height="427" src="thumbnail.jpg" class="attachment-medium size-medium" alt="">
    </div>
    <div class="column column-block" data-src="large.jpg" data-sub-html="Image Caption">
        <div class="thumbnail" style="background-image: url(thumbnail.jpg);"></div>
        <img width="640" height="427" src="thumbnail.jpg" class="attachment-medium size-medium" alt="">
    </div>
    <div class="column column-block" data-src="large.jpg" data-sub-html="Image Caption">
        <div class="thumbnail" style="background-image: url(thumbnail.jpg);"></div>
        <img width="640" height="427" src="thumbnail.jpg" class="attachment-medium size-medium" alt="">
    </div>
</div>


<div class="gallery-pagination">
    <ul class="nav-links">
    <li class="nav-previous"><a class="prev page-numbers" href="#"><span>Previous</span></a></li>
    <li class="number"><a class="page-numbers" href="#">1</a></li>
    <li class="number"><span aria-current="page" class="page-numbers current">2</span></li>
    <li class="number"><a class="page-numbers" href="#">3</a></li>
    <li class="number"><a class="page-numbers" href="#">4</a></li>
    <li class="number"><a class="page-numbers" href="#">5</a></li>
    <li class="nav-next"><a class="next page-numbers" href="#"><span>Next</span></a></li>
    </ul>
</div>

lightgallery-config.js

(function (document, window, $) {

	'use strict';
    
    $("#light-gallery").lightGallery({
      selector: '.column',
      thumbnail:true,
      download: false
  }); 
    
}(document, window, jQuery));

scripts.php

<?php

add_action( 'wp_enqueue_scripts', '_s_register_scripts' );
function _s_register_scripts() {                     
    
    // Light Gallery
    wp_register_script( 
            'lightgallery',             
            '//cdn.jsdelivr.net/combine/npm/lightgallery,npm/lg-autoplay,npm/lg-fullscreen,npm/lg-hash,npm/lg-pager,npm/lg-thumbnail,npm/lg-video,npm/lg-zoom', array('jquery'), '', true );
    
    wp_register_script( 'lightgallery-config', trailingslashit( THEME_JS ) . 'lightgallery-config.js', array('jquery', 'lightgallery' ), '', true );     

    wp_enqueue_script( 'lightgallery' );
  
    wp_enqueue_script( 'lightgallery-config' );

}