Skip to content

Instantly share code, notes, and snippets.

@srikat
Last active August 29, 2015 14:20
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save srikat/58e33c33953daa01f9a5 to your computer and use it in GitHub Desktop.
Save srikat/58e33c33953daa01f9a5 to your computer and use it in GitHub Desktop.
Full screen slideshow in Altitude Pro using Backstretch. https://sridharkatakam.com/full-screen-slideshow-in-altitude-pro-using-backstretch/
<?php
/**
* This file adds the Home Page to the Altitude Pro Theme.
*
* @author StudioPress
* @package Altitude
* @subpackage Customizations
*/
add_action( 'genesis_meta', 'altitude_front_page_genesis_meta' );
/**
* Add widget support for homepage. If no widgets active, display the default loop.
*
*/
function altitude_front_page_genesis_meta() {
if ( is_active_sidebar( 'front-page-1' ) ) {
// Enqueue scripts
add_action( 'wp_enqueue_scripts', 'altitude_enqueue_altitude_script' );
// Add front-page body class
add_filter( 'body_class', 'altitude_body_class' );
// Force full width content layout
add_filter( 'genesis_pre_get_option_site_layout', '__genesis_return_full_width_content' );
// Remove breadcrumbs
remove_action( 'genesis_before_loop', 'genesis_do_breadcrumbs' );
// Remove the default Genesis loop
remove_action( 'genesis_loop', 'genesis_do_loop' );
// Add homepage widgets
add_action( 'genesis_loop', 'altitude_front_page_widgets' );
}
}
function altitude_enqueue_altitude_script() {
wp_enqueue_script( 'backstretch', get_bloginfo( 'stylesheet_directory' ) . '/js/jquery.backstretch.min.js', array( 'jquery' ), '', true );
wp_enqueue_script( 'altitude-script', get_bloginfo( 'stylesheet_directory' ) . '/js/home.js', array( 'backstretch' ), '1.0.0', true );
wp_enqueue_script( 'localScroll', get_stylesheet_directory_uri() . '/js/jquery.localScroll.min.js', array( 'scrollTo' ), '1.2.8b', true );
wp_enqueue_script( 'scrollTo', get_stylesheet_directory_uri() . '/js/jquery.scrollTo.min.js', array( 'jquery' ), '1.4.5-beta', true );
}
function altitude_body_class( $classes ) {
$classes[] = 'front-page featured-section';
return $classes;
}
// Add markup for front page widgets
function altitude_front_page_widgets() {
genesis_widget_area( 'front-page-1', array(
'before' => '<div id="front-page-1" class="front-page-1"><div class="image-section"><div class="flexible-widgets widget-area' . altitude_widget_area_class( 'front-page-1' ) . '"><div class="wrap">',
'after' => '</div></div></div></div>',
) );
}
genesis();
// Create an array of images that you'd like to use
var images = [
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-3.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-4.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-5.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-6.jpg'
];
$('body.home').backstretch(images, {
fade: 1000,
duration: 5000
});
$(window).one('backstretch.after', function () {
$('.backstretch').after('<div class="linear-gradient"></div>');
$('.linear-gradient').fadeIn(1000);
$('.home .site-footer').fadeIn();
});
//* 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' );
// 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' ),
// ) );
jQuery(function( $ ){
// Local Scroll Speed
$.localScroll({
duration: 750
});
// Image Section Height
var windowHeight = $( window ).height();
$( '.image-section' ) .css({'height': windowHeight +'px'});
$( window ).resize(function(){
var windowHeight = $( window ).height();
$( '.image-section' ) .css({'height': windowHeight +'px'});
});
// Create an array of images that you'd like to use
var images = [
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-3.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-4.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-5.jpg',
'http://rebecca2.beyostudio.com/wp-content/themes/rebeccathompson/images/backstretch-6.jpg'
];
$('body.home').backstretch(images, {
fade: 1000,
duration: 5000
});
$(window).one('backstretch.after', function () {
$('.backstretch').after('<div class="linear-gradient"></div>');
$('.linear-gradient').fadeIn(1000);
$('.home .site-footer').fadeIn();
});
});
/* Front page Backstrecth slideshow with gradient
------------------------------------------------ */
.home .site-inner,
.home .front-page-1 {
background: transparent;
}
.home .image-section {
background: transparent;
filter: none;
}
.linear-gradient {
display: none;
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: -moz-linear-gradient(top, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
}
.home .site-footer {
display: none;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment