Full screen slideshow in Altitude Pro using Backstretch

In the comments section of How to replace Home Section 1’s background image with Backstretch slideshow in Parallax Pro article, a user asked:

I used it on Altitude Pro also and changed “.home-section-1″ to “.front-page-1″ in backstretch-init.js and front-page.php. Awesome – thanks!

One question: I used the background: linear-gradient… styling that comes with Altitude Pro which really improves the look of my images. However, when the page is first loading, the unattractive gray gradient is the background until the first image loads. Do you have any suggestions on how to avoid that?

Thanks!

In this article I share how Backstretch can be applied on Altitude Pro homepage's body element to display a full screen slideshow with the page showing nothing but header and footer (optionally, 'Front Page 1' widget area can be populated). We shall use jQuery to dynamically add a div.linear-gradient that is initially hidden and having the linear gradient CSS below the backstretch div, followed by fading it in after the first background image appears.

Live Demo

Step 1

In functions.php comment out the lines that calls customize.php and output.php like so:

	//* Add Image upload and Color select to WordPress Theme Customizer
	// require_once( get_stylesheet_directory() . '/lib/customize.php' );
	//* Include Customizer CSS
	// include_once( get_stylesheet_directory() . '/lib/output.php' );

view raw gistfile2.php hosted with by GitHub

and comment out the code that registers front page 2 to 7 widget areas like so:

	// genesis_register_sidebar( array(
	// 'id' => 'front-page-2',
	// 'name' => __( 'Front Page 2', 'altitude' ),
	// 'description' => __( 'This is the front page 2 section.', 'altitude' ),
	// ) );
	// genesis_register_sidebar( array(
	// 'id' => 'front-page-3',
	// 'name' => __( 'Front Page 3', 'altitude' ),
	// 'description' => __( 'This is the front page 3 section.', 'altitude' ),
	// ) );
	// genesis_register_sidebar( array(
	// 'id' => 'front-page-4',
	// 'name' => __( 'Front Page 4', 'altitude' ),
	// 'description' => __( 'This is the front page 4 section.', 'altitude' ),
	// ) );
	// genesis_register_sidebar( array(
	// 'id' => 'front-page-5',
	// 'name' => __( 'Front Page 5', 'altitude' ),
	// 'description' => __( 'This is the front page 5 section.', 'altitude' ),
	// ) );
	// genesis_register_sidebar( array(
	// 'id' => 'front-page-6',
	// 'name' => __( 'Front Page 6', 'altitude' ),
	// 'description' => __( 'This is the front page 6 section.', 'altitude' ),
	// ) );
	// genesis_register_sidebar( array(
	// 'id' => 'front-page-7',
	// 'name' => __( 'Front Page 7', 'altitude' ),
	// 'description' => __( 'This is the front page 7 section.', 'altitude' ),
	// ) );

view raw gistfile3.php hosted with by GitHub

Step 2

Upload jquery.backstretch.min.js to js directory.

Step 3

Add