Last active
December 15, 2017 03:43
-
-
Save neilgee/6b4bc726dec659f875c197c0cc2fbc17 to your computer and use it in GitHub Desktop.
Using Multiple Images in Backstretch - ACF
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | |
}); | |
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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 ); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<?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