Wordpress Javascript File SRC File Path
Question
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.
3 answers
solution1
2 2013-08-19 00:08:01
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 .
solution2
2 ACCPTED 2013-08-22 13:53:57
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:
- 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
- Do not use global variables or global function names as you do right now in your javascript.
- 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.
- The current "solution" is a dirty one. Use the advice from @brasofilo, as he showed up a clean solution.
solution3
1 2013-08-19 15:45:02
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";
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.