CODEWITHSUNDEEP
phpjavascriptwordpress
BDGapps
BDGapps

Reputation: 3356

Wordpress Javascript File SRC File Path

In my Wordpress site I am using some JavaScript code for an interactive part.

When the file is local I just call anyPlus.src = "solarZoom.png";.

I have tried many ways and can't figure out how to get the image from the file path once it's on my server. I tried /powerbox/Tour/solarZoom.png, ../Tour/solarZoom.png, Tour/solarZoom.png, /Tour/solarZoom.png, /solarZoom.png.

In my style I would call it as "../Tour/solarZoom.png" but it is not working in the javascript.

I have attached an image of my hierarchy. My root is /powerbox/index.php.

enter image description here

Upvotes: 0

Views: 3410

Answers (3)

Александр Фишер
Александр Фишер

Reputation: 1507

With all the informations I could collect about your problem I can only solve it by this:

Take your index.php - file on the same level where your javascript.js - file is located, add 

<script>var ABSPATH = "<?php bloginfo('template_url'); ?>/";</script>
<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/Tour/javascript.js"></script>

into your <head> - tag. Now you have your Template-URL-prefix in the variable ABSPATH. Change your function hotSpotFunc(part) located in here: http://frankfusion.com/powerbox/wp-content/themes/powerbox/Tour/javascript.js on line 24:

anyPlus.src="http://frankfusion.com/powerbox/wp-content/themes/powerbox/"+imgName;

must be now

anyPlus.src=ABSPATH+imgName;

and then it should work without hardcoding the template url as you have it right now.

Worth to mention some other things:

  1. every wordpress theme has a header.php - file where this stuff shall go. Read something about WP Theme Development: http://codex.wordpress.org/Theme_Development
  2. Do not use global variables or global function names as you do right now in your javascript.
  3. make a solid structure in your wordpress - folder. Do you really need a child theme for this project? It looks a bit messy right now.
  4. The current "solution" is a dirty one. Use the advice from @brasofilo, as he showed up a clean solution.

Upvotes: 2

Seth
Seth

Reputation: 10454

Try this, in your header define this above all scripts that will reference your images....

<script type="text/javascript">
    var ABSPATH = "<?php bloginfo('template_url'); ?>";
</script>

Now when referencing an image do anyPlus.src = ABSPATH + "/Tour/solarZoom.png";

Upvotes: 1

brasofilo
brasofilo

Reputation: 26055

Enqueue your JavaScript using wp_enqueue_scripts and pass the correct URL through wp_localize_script.

Like so:

add_action( 'wp_enqueue_scripts', 'b5f_enqueue_scripts' );

function b5f_enqueue_scripts()
{
    wp_register_script(
        'tour-script', // Handle
        get_stylesheet_directory_uri() . '/Tour/javascript.js', // File url
        array( 'jquery' ) // Dependencies
    );
    wp_enqueue_script( 'tour-script' );
    wp_localize_script( 
        'tour-script', 
        'localize_vars', 
        array( 
            'url' => get_stylesheet_directory_uri(),
            'path' => get_stylesheet_directory(),
            'solar' => get_stylesheet_directory_uri() . '/Tour/solarZoom.png'
        ) 
    );
}

And in your javascript.js file:

jQuery(document).ready(function($) {  
    console.log( localize_vars.url ); 
    $("body").prepend('<img src="'+ localize_vars.solar + '" />');
});

wp_localize_script was created to pass translated strings to JavaScript files, but it can be used to pass anything really. Just fill that array with other data and access it in the JS variable localize_vars.DATA.

Upvotes: 2

Related Questions