Skip to content

Instantly share code, notes, and snippets.

@neilgee
Last active December 15, 2017 03:43
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save neilgee/6b4bc726dec659f875c197c0cc2fbc17 to your computer and use it in GitHub Desktop.
Save neilgee/6b4bc726dec659f875c197c0cc2fbc17 to your computer and use it in GitHub Desktop.
Using Multiple Images in Backstretch - ACF
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
});
});
<?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 );
}
<?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
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment