—
by
This tutorial provides the code & instructions for replacing the background image on the front page with a slide show. Here’s the demo video:
Here’s the code and installation instructions for logged in members:
Hello!
This worked perfect. How do I add text and linking to each slide?
Thanks, Mark
You can’t add text and a link when using backstretch. You would need to use a slider like Soliloquy which would require a completely different solution like this https://wpsites.net/web-design/slider-behind-site-header-home-featured-widget-in-agentpress-pro/
Then you will need to add CSS for positioning your captions or use the premium version of the slider which contains a setting to do this.
Okay that’s what I thought, just checking.
Hi
The images on my homepage scroll through once and remain on the last image in my backstretch-set.js.
I was wondering if there was an additional field in the object {fade: 750,
duration: 500} that I could set where it would continually rotate the images? Or would I create some loop?
Thanks so much!
Try loop:true
Using this on a site that has the Agency Pro Theme. How do we make it so the images only rotate on the home page?
Where are you loading the jQuery?
You can add the PHP code to load the jQuery in the front page template of functions file with a conditional tag.
[code]
if ( ! is_front_page() )
return;
[/code]
We are loading the jQuery in the backstretch-set.js file of the Agency Pro themes js folder.
No, the PHP code which loads the jQuery will look something like this :
[code]
// Enqueue scripts.
add_action( ‘wp_enqueue_scripts’, ‘agentpress_front_page_enqueue_scripts’ );
function agentpress_front_page_enqueue_scripts() {
// Load scripts only if custom background is being used.
if ( ! get_option( ‘agentpress-home-image’ ) )
return;
// Enqueue Backstretch scripts.
wp_enqueue_script( ‘agentpress-backstretch’, get_stylesheet_directory_uri() . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘agentpress-backstretch-set’, get_stylesheet_directory_uri() .’/js/backstretch-set.js’ , array( ‘jquery’, ‘agentpress-backstretch’ ), ‘1.0.0’ );
wp_localize_script( ‘agentpress-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => str_replace( ‘http:’, ”, get_option( ‘agentpress-home-image’ ) ) ) );
// Add agentpress-pro-home body class.
add_filter( ‘body_class’, ‘agentpress_body_class’ );
}
[/code]
Which you can modify to this :
[code]// Enqueue scripts.
add_action( ‘wp_enqueue_scripts’, ‘front_page_enqueue_scripts’ );
function front_page_enqueue_scripts() {
if ( ! is_front_page() )
return;
// Enqueue Backstretch scripts.
wp_enqueue_script( ‘agentpress-backstretch’, get_stylesheet_directory_uri() . ‘/js/backstretch.js’, array( ‘jquery’ ), ‘1.0.0’ );
wp_enqueue_script( ‘agentpress-backstretch-set’, get_stylesheet_directory_uri() .’/js/backstretch-set.js’ , array( ‘jquery’, ‘agentpress-backstretch’ ), ‘1.0.0’ );
wp_localize_script( ‘agentpress-backstretch-set’, ‘BackStretchImg’, array( ‘src’ => str_replace( ‘http:’, ”, get_option( ‘agentpress-home-image’ ) ) ) );
}
[/code]
And use in your functions file. Otherwise, use the above code in your fro nt page template without the conditional tag :
[code]
if ( ! is_front_page() )
return;
[/code]
Please disregard. I got the fix to work.
Don’t forget to swap out the links in the jQuery to your images hosted on your server as the demo image links in the jQuery are hosted on a local installation of WordPress.
Leave a Reply