Changing img src depending on text clicked

  • Hey guys,

    im looking how to add the following functionality

    i have a couple of rows of text and image to the left of the text and image should change depending what text is clicked ( if user clicks text1, picture changes to pciture 1, for text2, it will be picture2 etc etc)

    do you have any idea how to do that? any plugin or similar solution?

    Thanks in advance

Viewing 1 replies (of 1 total)

  • You can do that with a little jQuery quite easily. 

    
let img1 = "//sitename.com/wp-contents/uploads/../../filename.jpg";
let img2 = "//sitename.com/wp-contents/uploads/../../filename.jpg";
let img3 = ...

    jQuery("#text1").on('click', function() {
        jQuery("#image").attr('src', img1);
    });
    jQuery("#text2").on('click', function() {
        jQuery("#image").attr('src', img2);
    });
    jQuery("#text3").on('click', function() {
        jQuery("#image").attr('src', img3);
    });

    Obviously, modify the code as needed. You can just include this in your HTML inside of a <script></script> tag in the text editor (not the visual editor). If you’re using Gutenberg, you can use an HTML block to put this in.

    • This reply was modified 5 years, 1 month ago by Jasonian. Reason: fixed spaces formatting of code
Viewing 1 replies (of 1 total)
  • The topic ‘Changing img src depending on text clicked’ is closed to new replies.