ACF + isotope-layout + magnific-popup.js = gallery

single-photogallery.php

<?php
do_action('get_header');
//get_template_part('templates/header');
?>

<?php //get_template_part('templates/partials/breadcrumbs'); ?>

<?php //get_template_part('templates/base'); ?>

<?php if( have_rows('gallery') ): $i=0;?>
    <!-- team -->
<section id="gallery" class="section gallery-section">

    <div class="content">
      <div class="row">
          <div class="col-md-12">
              <h1 class="blog-post-title text-center"><?php the_title(); ?></h1>
          </div>
      </div>    

      <div class="gallery grid">

<!-- styles for beauty gallery photo -->      

<link href="https://cdnjs.cloudflare.com/ajax/libs/magnific-popup.js/1.1.0/magnific-popup.css" rel="stylesheet" type="text/css">

      <?php while( have_rows('gallery') ): the_row(); 
              $image = get_sub_field('image');
              $class = 'grid-item';
              $image_attributes = wp_get_attachment_image_src( $image );
              ?>
              <div class="<?php echo $class; ?> ">
                  <a href="<?php echo wp_get_attachment_url( $image ); ?>" data-animation="fadeinup">
                  <?php 
                      //$image = get_field('artist_feature_image');
                      $image_size = 'thumbnail'; // (thumbnail, medium, large, full or custom size)
                      if( $image ) {
                        echo wp_get_attachment_image( $image, $image_size );
                      }
                  ?>
                  </a>
              </div>
          <?php endwhile; ?>
      </div>
    </div>
</section>     
<?php endif; ?> 

<?php //get_template_part('templates/base-end'); ?>

<?php //get_template_part('templates/musthave'); ?>

<!-- js for beauty gallery item -->
<script type="text/javascript" src="https://npmcdn.com/isotope-layout@3.0.1/dist/isotope.pkgd.js"></script>
<script type="text/javascript" src="https://npmcdn.com/isotope-packery@2.0.0/packery-mode.pkgd.js"></script>
<script type="text/javascript" src="<?php echo get_template_directory_uri() ?>/assets/scripts/jquery.magnific-popup.min.js"></script>

<script type="text/javascript">
  jQuery(document).ready(function(){

  jQuery('.gallery').each(function() { // the containers for all your galleries
    jQuery(this).magnificPopup({
          delegate: 'a', // the selector for gallery item
          type: 'image',
          tClose: 'Закрити (Esc)',
          tLoading: 'Загрузка...',
          gallery: {
            enabled:true
          },
		  image: {
		    tError: 'Не вдалося завантажити <a href="%url%"> Зображення</a>.' // Error message when image could not be loaded
		  },
		  ajax: {
		    tError: 'Не вдалося завантажити <a href="%url%"> Контент</a>.' // Error message when ajax request failed
		  }
        });
  });   
  jQuery('.grid').isotope({
    layoutMode: 'packery',
    itemSelector: '.grid-item',
    packery: {
      gutter: 20
      }
    });
  });
</script> 
<?php
do_action('get_footer');
//get_template_part('templates/footer');
?>