Registering javascript to pan image

  • qnmai

    (@qnmai)


    10 years, 1 month ago

    I am trying to implement a panning effect on an image, by following this tutorial. However, it’s not working. This is what I have tried so far:

    The only modification I have made to the javascript for the moment is the class name, so I won’t copy it all here.

    I have the javascript in: moesia-child-01/scripts/pan.js

    In functions.php, I have added these functions to register the script for a theme and enqueue the script:

    function my_js_scripts()
{
    // Register the script like this for a theme:
    wp_register_script( 'pan-script', get_template_directory_uri() . '/scripts/pan.js' );

    // For either a plugin or a theme, you can then enqueue the script:
    wp_enqueue_script( 'pan-script' );
}
add_action( 'wp_enqueue_scripts', 'my_js_scripts' );

    In my theme header.php, I added this line just after <head>:
    <script type="text/javascript" src="/scripts/pan.js"></script>

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator Jose Castaneda

    (@jcastaneda)

    THEME COFFEE MONKEY

    10 years, 1 month ago

    Hi qnmai!

    Hope you’re having a good day when you read this!

    I do have a few questions for you:

    1. Are you using a child theme?
    2. Are there any other files you are loading?
    3. Does it rely on jQuery?

    Hopefully I can clear things up a little bit. If you are using a child theme you are enqueueing the wrong way. The proper way would be:

    add_action( 'wp_enqueue_scripts',  'child_scripts' );
function child_scripts(){
  // no need to register, simply enqueue. use get_stylesheet_directory_uri for child theme loading
  wp_enqueue_script( 'pan-script', get_stylesheet_directory_uri() . '/scripts/pan.js', array( 'jquery' ) );
}

    That’s all you need to do to load the pan.js file from the child theme’s folder. No need to edit any other files. Now, you can see I used the function get_stylesheet_directory_uri() instead only because I’m guessing you are using a child theme. That function returns the active theme’s folder path, the codex has some information about it:
    https://codex.wordpress.org/Function_Reference/get_stylesheet_directory_uri

    You will see that I also added array( 'jquery' ). That is because if your script needs jQuery to function then WordPress will load the corresponding file. The developer documentation has neat information about that:
    https://developer.wordpress.org/reference/functions/wp_enqueue_script/

    Hope that helps you out!

    Thread Starter qnmai

    (@qnmai)

    10 years, 1 month ago

    Okay, this helps a lot! Thank you.

Viewing 2 replies - 1 through 2 (of 2 total)

The topic ‘Registering javascript to pan image’ is closed to new replies.