0

I want to create a background image effect that will change the image when the user scroll. I'm facing a problem with the images urls, how i can fix this? How I can link an image url in jquery from a wordpress page?

Here is the code. The url is not correct and I can't figure how to link it correctly from the js script.

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'});
      }
      else if(scrollPos >= 120){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page3.jpg")'});
      }
      else if(scrollPos >= 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page4.jpg")'});
      }
      else{
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page1.jpg")'});
      }
  });

2 Answers 2

0

Assuming the assets folder is within your theme directory, you need to send the theme directory, which you can get via PHP, to your JavaScript. (If instead this is a plugin and the assets folder is in your plugin directory, a similar approach will work but the exact code sent will differ.)

In WordPress, using PHP you can find the stylesheet directory, which is your theme's root directory (even if you are using a child theme).

$theme_dir = wp_get_stylesheet_directory_uri();

This will store something like http://www.domain.com/wp-content/themes/yourtheme/

If your JavaScript is directly on your page template

You can just directly write the PHP theme directory into your JavaScript right when you get it:

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("<?php echo get_stylesheet_directory_uri(); ?>/assets/img/top-page2.jpg")'});
      }

This isn't the best practice, because you have one language injecting itself into another one, and it also means your JavaScript is on your page template, which is less reusable and less clean.

If your JavaScript is in a separate file

If your JavaScript is in a separate file, i.e. background-scroll.js, you must first be loading it correctly through the WordPress enqueue system. Then you can send a variable (like your theme directory) through to it.

You'll use the $theme_dir variable like we just created.

function wpse_329739_enqueue_scripts(){

    $theme_dir = get_stylesheet_directory_uri();

    wp_enqueue_script( 'background-scroll', $theme_dir . "/assets/js/background-scroll.js" );

}
add_action( 'wp_enqueue_scripts', 'wpse_329739_enqueue_scripts' );

The final piece is sending in the variable we created so your script can use it. To do that we pass an array of variables through the localize_script function, even though this is just one variable.

Our code becomes:

function wpse_329739_enqueue_scripts(){

    $theme_dir = get_stylesheet_directory_uri();

    $variables = array(
        "theme_dir" => $theme_dir
    );

    wp_enqueue_script( 'background-scroll', $theme_dir . "/assets/js/background-scroll.js" );
    
    wp_localize_script( 'background-scroll', 'PHPVARS', $variables );

}
add_action( 'wp_enqueue_scripts', 'wpse_329739_enqueue_scripts' );

So we wrapped the variable (the theme directory name) into an array, and then told WordPress to pass it as a JavaScript object to our script.

In our script, we can access it by the name we provided (PHPVARS), i.e. PHPVARS.theme_dir.

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100){
        $('#portfolio-cover').css({'backgroundImage':'url("' + PHPVARS.theme_dir + '/assets/img/top-page2.jpg")'});
      }
1
  • Ok, I will fix the script by following your suggestion. Is it also possible to slow the scroll to obtain a nice background scrolling effect? I want to make something like the landor.com website, so maybe I need to lock the scroll?
    – ZWPDev
    Commented Feb 24, 2019 at 16:55
0

Your code will not work because of malformed if conditions. As it is now, if scrollPos is set to let's say 200, the first condition, scrollPos >= 100 will be true, so the code flow will not reach the other cases. To get it to work you have to put upper limits to the scrollPos value checks:

$(window).scroll(function(e){
    e.preventDefault();
    var scrollPos = $(window).scrollTop();
      if(scrollPos >= 100 && scrollPos < 120){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page2.jpg")'});
      }
      else if(scrollPos >= 120 && scrollPos < 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page3.jpg")'});
      }
      else if(scrollPos >= 150){
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page4.jpg")'});
      }
      else{
        $('#portfolio-cover').css({'backgroundImage':'url("assets/img/top-page1.jpg")'});
      }
  });

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.