jquery wordpress template path

Question

Need a little help with a bit of jQuery. Im a bit of a noob jQuery wise.

I got my template_dir in a var:

$('#someID').click(function() {
    var templateDir = '<?php bloginfo("template_directory") ?>';
    if(autoStart) {
        $(this).html('<img src=" 'TEMPLATEDIR HERE' /images/pauze-play.png" />');
    } else {
        $(this).html('<img src=" 'TEMPLATEDIR HERE' /images/pauze-play.png" />');
    }
    autoStart = !autoStart;
    $('#mainSlider.royalSlider').royalSlider('toggleAutoPlay');
 });

I did some stackoverflow searches and tried to figure it out but what I do it ain't working due lacking skills, though I feel it is rather simple.

Thought it was something like this:

<img src=" 'templateDir +' /images/pauze-play.png" />'

But no...

Thanks in advance

/Paul

You're trying to include serverside technology in clientside javascript. That is not going to work. — Tdelang, Jul 31 '13 at 08:59
so http://stackoverflow.com/questions/2856600/path-to-wordpress-template-directory-inside-jquery is bad practice? — Kortschot, Jul 31 '13 at 09:05

score 1 · Accepted Answer · answered Jul 31 '13 at 09:20

The code danyo poste would work fine, but on the route you chose with defining templateDir as a javascript variable you would have :

$(this).html('<img src="' + templateDir + '/images/pauze-play.png" />');

Notice: there are no spaces between "' and '/ . This might have been where you went wrong.

Also you might want to declare templateDir as a global variable instead. so you would have:

var templateDir = '<?php bloginfo("template_directory"); ?>';
jQuery('.selector').click(function(){ ...

score 0 · Answer 2 · answered Jul 31 '13 at 09:05

0

Maybe you can put the variable into a hidden span, placed somewhere with php, like this:
<span class='hidden mythemepath'>yourtheme</span>, then you can catch it with javascript:
var mytheme = $(".mythemepath").text();

answered Jul 31 '13 at 09:05

ToX 82

1,064
12
35

danyo · Answer 3 · 2013-07-31T09:29:18.860

You making it to complicated. I dont understand why you are assigning the template directory to a var when you are not calling the image in javascript?

the following will work fine:

<img src="<?php bloginfo("template_directory") ?>/images/pauze-play.png" />

EDIT

<script>
$('#someID').click(function() {
    if(autoStart) {
        $(this).html('<img src="<?php bloginfo("template_directory") ?>/images/pauze-play.png" />');
    } else {
        $(this).html('<img src="<?php bloginfo("template_directory") ?>/images/pauze-play.png" />');
    }
    autoStart = !autoStart;
    $('#mainSlider.royalSlider').royalSlider('toggleAutoPlay');
 });
</script>

Well it needs to swap the images from pauze to play. The code you provide I all ready have in use in the template file. — Kortschot, Jul 31 '13 at 09:16

jquery wordpress template path

3 Answers3