Wordpress-ACF-backstretch-loop

Wordpress-ACF-backstretch-loop.php

<?php
// Services Pages background images fade.
if ( is_page_template( 'page-services-single.php' ) ) : ?>

      <?php
      // check if the repeater field has rows of data
      if( have_rows('background_images') ):
          // create an empty array
          $images = array(); 
         // loop through the rows of data
          while ( have_rows('background_images') ) : the_row();
          // store images in variable
          $image = get_sub_field('image');
          // image size to display
          $size = 'large';
          // put each image['large'] into the array
          $images[] .= $image['sizes'][$size];
      endwhile;

      else :

          // Default Background

      endif;

      ?>

<?php
  if ($images) {
    // join array elements to prepare for backstretch
    $images  =  '"' . implode('","',$images) . '"'; 
 ?>


<script type="text/javascript">
  jQuery.backstretch([
    <?php echo $images ?>
  ], {duration: 8000, fade:600});
  jQuery(".backstretch").append("<div class='backstretch-overlay'>")
</script>

<?php } ?>

<?php endif; ?>