Support » Plugins » Backstretch.js

  • Hello,
    In my child theme, I am using backstretch.js to set a a full size background image as per this tutorial.
    I would like to combine this approach with different background image sizes in order to reduce loading time on mobile devices. I foud this codes but it doesn`t work.

    functions.php

    add_action( 'wp_enqueue_scripts', 'enqueue_backstretch' );
    function enqueue_backstretch() {
    if ( is_home() )
    
    wp_enqueue_script( 'backstretch', get_stylesheet_directory_uri() . '/js/jquery.backstretch.min.js', array( 'jquery' ), '1.0.0' );
    wp_enqueue_script( 'backstretch-set', get_stylesheet_directory_uri() .'/js/backstretch-set.js' , array( 'jquery', 'backstretch' ), '1.0.0' );
    
    wp_localize_script(
        'backstretch-set',
        'BackStretchImages',
         array(
        'small' => get_stylesheet_directory_uri() . 'img/bg-small.jpg', 'small' ),
        'medium' => get_stylesheet_directory_uri() . 'img/bg-medium.jpg', 'medium' ),
        'large' => get_stylesheet_directory_uri() . 'img/bg-large.jpg', 'large' )
    )));
    }
    
    backsterch-set.js

    jQuery(document).ready(function($) {

    var viewportWidth = $(window).width();
    // same as “document.documentElement.clientWidth” (vanilla JS)

    if ( 768 > viewportWidth ) {
    $(“body”).backstretch([BackStretchImages.small],{duration:3000,fade:750});
    } else if ( 1024 > viewportWidth ) {
    $(“body”).backstretch([BackStretchImages.medium],{duration:3000,fade:750});
    } else {
    $(“body”).backstretch([BackStretchImages.large],{duration:3000,fade:750});
    }
    });`

    Many thanks for your help!

Viewing 1 replies (of 1 total)
Viewing 1 replies (of 1 total)
  • The topic ‘Backstretch.js’ is closed to new replies.