Web Analytics Made Easy -
StatCounter Jquery to change JS variable value, enter into <img url> - CodingForum

Announcement

Collapse
No announcement yet.

Jquery to change JS variable value, enter into <img url>

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

  • Jquery to change JS variable value, enter into <img url>

    Hello all,

    I have a page with 5 buttons and 5 different images. I want only one image shown at a time that depends on which button is pressed.

    I was thinking of having the image url as -

    <img src="http://www.blah.com/wp-content/themes/twentysixteen-child/pictures/" . Variable1 . ".png" />

    And then having a Javascript variable in the url (Variable1) that points to the correct picture for each button.

    and then some Jquery where ' If button one is pressed, Variable1 = "A" ', and 'If button two is pressed, Variable1 = "B" ', and so on.

    Is this the best route? If it is, could someone help me with the syntax?

  • #2
    You don't need jQuery to do this as a vanilla JavaScript solution only needs about three lines of code.

    See MouseOver Images for a script that uses thumbnail images to select the main image to display - you'd just need to substitute your buttons for the thumbnails.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

    Comment


    • #3
      Thanks felgall, and sorry for trying to simplify my actual question into the one I posted, but if I understand the tutorial properly then it isn't a good solution for my task.

      There are actually upwards of 10,000 image files in the source folder, and they change often, which is why I can't list them all in a div class on the page. I think I really need to just change the address to each one as they have a unique code and the buttons refer to which folder they are held.

      Comment


      • #4
        I think I really need to just change the address to each one as they have a unique code and the buttons refer to which folder they are held.
        Don't yet understand. Is there only one folder containing all the images? Or is there a tree like folder structure? Do the buttons specify a folder? How can you address 10,000 images by only three static buttons?

        Comment


        • #5
          Originally posted by Sempervivum View Post
          Don't yet understand. Is there only one folder containing all the images? Or is there a tree like folder structure? Do the buttons specify a folder? How can you address 10,000 images by only three static buttons?
          There is a tree like folder structure. The buttons specify the folder. There is an entry field where a unique code (there are thousands of these) is entered and used as a $_POST value in PHP, which will also be included in the Img url. There are 5 pictures associated with each of the unique codes.

          So you enter the code, and click the button to determine which picture is shown for that specific code.

          For example: code 5555 is entered into the field, and then button one is pressed. The end result would be:

          <img src="http://www.blah.com/wp-content/themes/twentysixteen-child/pictures/5555/A/5555A.png" />

          When the second button is pressed:
          <img src="http://www.blah.com/wp-content/themes/twentysixteen-child/pictures/5555/B/5555B.png" />

          Comment


          • #6
            Now I understand, thanks for this explanation. So the folders and the parts of the file name are identical and defined through an input field or the button being pressed.
            I would recommend the following code:
            Code:
                    <button class="btn" value="A">Button A</button>
                    <button class="btn" value="B">Button B</button>
                    <button class="btn" value="C">Button C</button>
                    <input id="code" type="text"><label for="code">Code</label>
                    <img id="im">
                    <script>
                        $(".btn").on("click", function () {
                            var code = $("#code").val();
                            var id = $(this).val();
                            var imgurl = "http://www.blah.com/wp-content/themes/twentysixteen-child/pictures/" + code + "/" + id + "/" + id + code + ".png"
                            $("#im").attr("src", imgurl);
                        });
                    </script>
            If you need the button code (I called it id) for further usage it might be necessary to make it public. If you need it in your form you can assign it to a hidden input field.
            It might be recommendable to validate the value of the input element. I recommend HTML5 form validation for doing this.
            Last edited by Sempervivum; Sep 14, 2016, 06:27 PM.

            Comment


            • #7
              There still isn't much reason for using jQuery - the plain JavaScript version would only be a couple of lines longer.
              Stephen
              Learn Modern JavaScript - http://javascriptexample.net/
              Helping others to solve their computer problem at http://www.felgall.com/

              Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

              Comment

              Working...
              X