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

Answer 1

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(){ ...

Answer 2

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();

Answer 3

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>