neilgee
9/30/2016 - 4:57 AM

Using Multiple Images in Backstretch - ACF

Using Multiple Images in Backstretch - ACF

<?php //<~ don't add me in

add_action ('wp_head', 'themeprefix_backstretch_init', 90 );
/**
 * Add in ACF Gallery Images via backstretch
 *
 */
function themeprefix_backstretch_init() {

$images = get_field('home_slider');// Add your field name

?>
<script>
jQuery(document).ready(function($) {
	$(".header").backstretch([ // Add your HTML element

	<?php
	foreach( $images as $image ) {
		echo '"' . $image['url'] . '",';
	}
	?>
		],{
		duration:3000,
		fade:750,
	});
});
</script>
<?php
}
<?php //<~ don't add me in

add_action( 'wp_enqueue_scripts', 'themeprefix_backstretch_background_scripts', );

/**
 * Backstretch for Custom Background Multiple Images
 */
 function themeprefix_backstretch_background_scripts() {

	wp_enqueue_script( 'backstretch', get_stylesheet_directory_uri() . '/js/backstretch.min.js', array( 'jquery' ), '2.0.4', true );
	wp_enqueue_script( 'backstretch-image', get_stylesheet_directory_uri().'/js/backstretch-init.js' , array( 'backstretch' ), '1.0.0', true );
}
jQuery(document).ready(function($) {

	$(".header").backstretch([  // Target your HTML element
	        '/wp-content/uploads/2016/09/image-1.jpg',  // Add in your images
        	'/wp-content/uploads/2016/09/image-2.jpg',	
		],{
		duration:3000, // Time between transitions
		fade:750, // Transition effect
	});
  
});