diff --git a/includes/js/backstretch-set.js b/includes/js/backstretch-set.js index 9a4b472..4e8a347 100644 --- a/includes/js/backstretch-set.js +++ b/includes/js/backstretch-set.js @@ -1,4 +1,4 @@ -(function ( document, $, undefined ) { +( function ( document, $, undefined ) { 'use strict'; var plugin = {}; @@ -11,7 +11,7 @@ * Private Functions ********************/ - function _backstretchHandler() { + function _backstretchHandler () { var $el = $( '.big-leader' ); @@ -20,25 +20,24 @@ } $el.css( { - height: ( $( window ).height() ) - ( [plugin.params.height] ) + 'px' + height: ( $( window ).height() ) - ( [ plugin.params.height ] ) + 'px' } ); - $el.backstretch( - [ _getSource() ], { - alignX: plugin.params.alignX, - alignY: plugin.params.alignY, - fade: parseInt( plugin.params.fade ), - scale: 'cover' - } - ); + $el.backstretch( _getSource(), _getArgs() ); var image = $( '.big-leader .backstretch img' ); image.attr( 'alt', plugin.params.title ).attr( 'aria-hidden', true ); } - function _getSource() { + /** + * Get the image source based on the screen size and available image sizes. + */ + function _getSource () { + if ( plugin.params.slider ) { + return plugin.params.slider; + } var source = plugin.params.source.backstretch, - width = window.innerWidth, + width = window.innerWidth, height = $( '.big-leader' ).height(); if ( plugin.params.source.large && ( plugin.params.width.large >= width && plugin.params.image_height.large >= height ) ) { @@ -50,9 +49,26 @@ return source; } + /** + * Get the backstretch parameters. + */ + function _getArgs () { + var args = { + alignX: plugin.params.alignX, + alignY: plugin.params.alignY, + fade: parseInt( plugin.params.fade ), + scale: 'cover' + }; + if ( plugin.params.slider ) { + args.duration = parseInt( plugin.params.duration ); + } + + return args; + } + plugin.params = typeof BackStretchVars === 'undefined' ? '' : BackStretchVars; if ( typeof plugin.params !== 'undefined' ) { plugin.init(); } -})( document, jQuery ); +} )( document, jQuery ); diff --git a/includes/js/backstretch-set.min.js b/includes/js/backstretch-set.min.js index 1c71d09..fc00e74 100644 --- a/includes/js/backstretch-set.min.js +++ b/includes/js/backstretch-set.min.js @@ -1 +1 @@ -!function(a,r,e){"use strict";var i={};i.init=function(){!function(){var a=r(".big-leader");if(void 0===a)return!1;a.css({height:r(window).height()-[i.params.height]+"px"}),a.backstretch([function(){var a=i.params.source.backstretch,e=window.innerWidth,t=r(".big-leader").height();i.params.source.large&&i.params.width.large>=e&&i.params.image_height.large>=t&&(a=i.params.source.large);i.params.source.medium_large&&i.params.width.medium_large>=e&&i.params.image_height.medium_large>=t&&(a=i.params.source.medium_large);return a}()],{alignX:i.params.alignX,alignY:i.params.alignY,fade:parseInt(i.params.fade),scale:"cover"}),r(".big-leader .backstretch img").attr("alt",i.params.title).attr("aria-hidden",!0)}()},i.params="undefined"==typeof BackStretchVars?"":BackStretchVars,void 0!==i.params&&i.init()}(document,jQuery); \ No newline at end of file +!function(a,r,e){"use strict";var i={};i.init=function(){!function(){var a=r(".big-leader");if(void 0===a)return!1;a.css({height:r(window).height()-[i.params.height]+"px"}),a.backstretch(function(){if(i.params.slider)return i.params.slider;var a=i.params.source.backstretch,e=window.innerWidth,t=r(".big-leader").height();i.params.source.large&&i.params.width.large>=e&&i.params.image_height.large>=t&&(a=i.params.source.large);i.params.source.medium_large&&i.params.width.medium_large>=e&&i.params.image_height.medium_large>=t&&(a=i.params.source.medium_large);return a}(),function(){var a={alignX:i.params.alignX,alignY:i.params.alignY,fade:parseInt(i.params.fade),scale:"cover"};i.params.slider&&(a.duration=parseInt(i.params.duration));return a}()),r(".big-leader .backstretch img").attr("alt",i.params.title).attr("aria-hidden",!0)}()},i.params="undefined"==typeof BackStretchVars?"":BackStretchVars,void 0!==i.params&&i.init()}(document,jQuery); \ No newline at end of file diff --git a/includes/output/class-displayfeaturedimagegenesis-enqueue.php b/includes/output/class-displayfeaturedimagegenesis-enqueue.php index d3d73bc..4ab1ea3 100644 --- a/includes/output/class-displayfeaturedimagegenesis-enqueue.php +++ b/includes/output/class-displayfeaturedimagegenesis-enqueue.php @@ -77,13 +77,24 @@ class DisplayFeaturedImageGenesisEnqueue { * @since 2.3.0 */ public function localize_scripts() { - // backstretch settings which can be filtered + wp_localize_script( 'displayfeaturedimage-backstretch-set', 'BackStretchVars', $this->get_localization_data() ); + } + + /** + * Define the localization data for the backstretch script. + * Some of it can be filtered here. + * + * @return array + */ + private function get_localization_data() { $backstretch_vars = apply_filters( 'display_featured_image_genesis_backstretch_variables', array( 'centeredX' => $this->setting['centeredX'] ? 'center' : 'left', 'centeredY' => $this->setting['centeredY'] ? 'center' : 'top', 'fade' => $this->setting['fade'], + 'slider' => null, + 'duration' => 3000, ) ); @@ -94,7 +105,12 @@ class DisplayFeaturedImageGenesisEnqueue { 'fade' => (int) $backstretch_vars['fade'], ); - wp_localize_script( 'displayfeaturedimage-backstretch-set', 'BackStretchVars', array_merge( $this->localize_sizes(), $output ) ); + if ( $backstretch_vars['slider'] ) { + $output['slider'] = $backstretch_vars['slider']; + $output['duration'] = $backstretch_vars['duration']; + } + + return array_merge( $output, $this->localize_sizes() ); } /**