replace SRC inside wordpress

  • Hello everyone!

    I’ve researched during this morning, but couldn’t fix the problem, so, if anyone could help, thanks a lot!

    I want to replace the atribute src of an image inside wordpress with jquery by clicking on a button, however I can’t.

    the image to change SRC

    <label for="id1">
<img src="<?php bloginfo( 'template_url' ) ?>/img/main-image.png" />
</label>

    the buttons to click

    <ul>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/blue.png" alt="blue">
</li>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/purple.png" alt="purple">
</li>
<li class="bt-color">
<img src="<?php bloginfo( 'template_url' ) ?>/img/pink.png" alt="pink">
</li>
</ul>

    the code on jquery

    /* offline code */   
$('.bt-color').click(function() {
    var alt = ($(this).children().attr('alt'));
    if ( alt === 'blue' ){
        $("label[for='id1']").children().attr('src', 'img/main-image-blue.png' );
    } else if ( alt === 'purple' ){
        $("label[for='id1']").children().attr('src', 'img/main-image-purple.png' );
    }
});

/* online with wordpress, my failed trial */   
jQuery('.bt-color').click(function() {
    var alt = (jQuery(this).children().attr('alt'));
    if ( alt === 'blue' ){
        jQuery("label[for='id1']").children().attr('src', '<?php bloginfo( 'template_url' ) ?>/img/main-image-blue.png' );
    } else if ( alt === 'purple' ){
        jQuery("label[for='id1']").children().attr('src', '<?php bloginfo( 'template_url' ) ?>/img/main-image-purple.png' );
    }
});

    offline doing with html for tests works perfectly, however not on wordpress. Am I doing something wrong?

    Thanks a lot!

    • This topic was modified 3 years, 8 months ago by FelipeANDRES.
    • This topic was modified 3 years, 8 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

    The page I need help with: [log in to see the link]

Viewing 4 replies - 1 through 4 (of 4 total)

  • If you are in JS, there is no way to run PHP there in the browser.
    Why are you hard-coding the image src?
    I suggest you change it to be a transparent image, or no image at all, and use CSS to make it different colors. You can even leave the alt="blue" and use it for the CSS, but that is bad for accessibility on an image tag.

    Thread Starter FelipeANDRES

    (@felipeandres)

    Hi Joy, thanks for the answer!
    Actually I made a gallery of images and used only css to change the main-image by clicking.
    What I am trying to do now is to replace all the existing images of the gallery, each one by its correspondent with alternative color by clicking on the ‘li.bt-color’ (now using jquery).

    This second part I don’t know if is possible to do by css. So I used jquery.

    Do you think I am hardcoding the img attribute SRC?
    Well, as far as I know, the img SRC tag on wordpress needs to be like this

    <img src="<?php bloginfo( 'template_url' ) ?>/img/main-image.png" width="80" class="thumbnail"/>

    Do you think I need to discard all the img tags?

    PS: Not running on browser, I said I made it on browser but When I put on my site it not works.

    • This reply was modified 3 years, 8 months ago by FelipeANDRES.
    • This reply was modified 3 years, 8 months ago by FelipeANDRES.
    • This reply was modified 3 years, 8 months ago by FelipeANDRES.
    • This reply was modified 3 years, 8 months ago by FelipeANDRES.

    What I am trying to do now is to replace all the existing images of the gallery, each one by its correspondent with alternative color by clicking on the ‘li.bt-color’ (now using jquery).

    It looks like it’s a one time thing (can’t go back to the original).

    This second part I don’t know if is possible to do by css.

    Yes, you likely can, especially if it’s just colors. Look up CSS filter and/or CSS mix-blend-mode if you want to do the colors by CSS. Or read about CSS only galleries at CSS Play (scroll down for galleries).

    So I used jquery.

    You aren’t utilizing jQuery very well. The alt attribute is for text to explain what the image is about, used by search engines and screen readers for blind people. If you want to have some other URL attached to each image, use a data attribute which is for scripts.

    Do you think I am hardcoding the img attribute SRC?

    Yes, you said the code that worked was
    $("label[for='id1']").children().attr('src', 'img/main-image-blue.png' );
    That looks hard-coded to me. Perhaps if you use string manipulation to add the color on the end of the existing image, or use a data attribute containing the entire URL for the color image, then it wouldn’t be a problem.

    Well, as far as I know, the img SRC tag on wordpress needs to be like this

    Yes, but that’s only in PHP. You are in Javascript, long past the PHP stage. The src attribute will already contain the entire URL for the image.

    PS: Not running on browser, I said I made it on browser but When I put on my site it not works.

    Yes you are running the Javascript in your browser. The PHP runs on your server, generates the page which the browser displays. The browser loads the Javascript referred to by the page, and runs it.

    Thread Starter FelipeANDRES

    (@felipeandres)

    Very kind of you for answering. I guess it will help me with my problem. So, thank! =)

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘replace SRC inside wordpress’ is closed to new replies.