-
-
Save jamiemitchell/672bd79b187979152b6b85b0d36a557f to your computer and use it in GitHub Desktop.
Using Multiple Images in Backstretch - ACF
This file contains hidden or 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 hidden or 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 hidden or 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