CODEWITHSUNDEEP
javascriptjqueryhtmlcss
MrJustin
MrJustin

Reputation: 1076

jQuery Background Image change, help needed please

Ok, I've been trying to wrap my head around this for about an hour and a half, done multiple searches, and nothing to my avail. I have to go about it this way, so I cannot change how the structure of this.

In the admin panel, I have a div set (#background-preview)

When the select option(s) change (#pbi) then it will change the background image of (#background-preview).

I'm not used to vars in jQuery, and this is my most major problem at the moment.

I would make a fiddle, but it doesn't really help too much since I have a lot of functions.

Here is my jQuery code:

$( "#pbi" ).on('change', function() {
    var templateDir = '<?php bloginfo("template_directory"); ?>';
    $('#background-preview').css('background-image','url(templateDir + "/images/logo.png")');
});

If I remove the tempateDir from the .css area, then it works. It just won't work with the templateDir, and this is really bugging me! I just can't wrap my head around it.

and then on top of that.. it will look like this in the end

templateDir + '/images/backgrounds/' $(this).val() <-- val of #pbi. I just haven't made it this far, so any help with that would be nice, or I will just attempt that hurtle next ;)

----EDIT----

This is my PHP/HTML

<div id="background-preview" style="background-image: url('<?php echo get_template_directory_uri(); ?>/images/backgrounds/<?php echo get_option('peridot_background_image'); ?>');">
    <select name="peridot_background_image" id="pbi">
        <?php peridot_background_images(); ?>
    </select>
</div>

Upvotes: 0

Views: 144

Answers (3)

MrJustin
MrJustin

Reputation: 1076

The answer to my problem was that templateDir was reporting back as the PHP script.. I had to put the variable in the head section of admin panel.

-- Final Results --

jQuery:

jQuery(document).ready(function($){

    $( "#ptc" ).on('change', function() {
        $("#colour-preview").removeClass();
        $("#colour-preview").addClass($(this).val());
    });

    $( "#pbi" ).on('change', function() {
        $('#background-preview').css('background-image','url(' + templateDir + $(this).val());
    });
});

Now to include the script into header:

/* Add Scripts Into Admin Head
-----------------------------------------------------------------*/
function peridot_admin_head(){
    echo "<script> var templateDir = '";
    echo bloginfo("template_directory");
    echo "/images/backgrounds/'; </script>";
}
add_action('admin_head', 'peridot_admin_head');

It worked like a charm, thanks for your help everyone.

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Your string concatenation syntax was little off

$( "#pbi" ).on('change', function() {
    var templateDir = '<?php bloginfo("template_directory"); ?>';
    $('#background-preview').css('background-image','url(' + templateDir + '/images/logo.png)');
});

Upvotes: 2

Claudio Redi
Claudio Redi

Reputation: 68400

You're using templateDir as a literal string. Try with this

'url("' + templateDir + '/images/logo.png")'

Upvotes: 2

Related Questions