How to: Javascript get file name on click without path and insert it into a new image link?

Question

The idea is the visitor clicks on a thumbnail and a modal opens with the bigger image. I am trying to get the file name onClick (when the visitor clicks on the image) and then I would like to insert it into a link of the now open modal to show the bigger image. So far I just have created a modal for every image, but this is getting ridiculous long.

This is what I tried now so far:

This is the image with the tag to open the modal. The image is in the thumbnail folder and I would like to save the name inst01.jpg into a variable.

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="getName()"></a>

This is the modal. The original image is in the gallery folder and I would like to insert the saved file name inst01.jpg into the link to open the original image:

<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <img src="images/gallery/inst01sm.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

I tried to google for a javascript function and I came up with this one:

function getName() {
     var fullPath = document.getElementById("img1").src;
     var filename = fullPath.replace(/^.*[\\\/]/, '');
     // or, try this, 
     // var filename = fullPath.split("/").pop();

    document.getElementById("result").value = filename;
 }

But I have no idea where I have to create the filename variable, nor do I know how to create function which would insert the filename into another link when the modal opens.

I hope it is clear what I want to do. Thanks for reading so far and helping out.

ic3b3rg · Accepted Answer · 2018-12-24 00:53:17Z

1

I'm not sure if I follow what you're trying to do, but I gave it a shot. I renamed getName to setModalImageSrc and changed it to take the current image as a parameter. I pull out just the image name (ignoring the rest of the path) and use it to set the modal image source using the pattern /images/gallery/${clickedImageName}sm.jpg. If that's not quite right, let me know where my assumptions are wrong and I'll adjust.

function setModalImageSrc(img) {
  const fullPath = img.src;
  const imageName = fullPath.match(/\w+(?=\.jpg$)/)[0];
  document.getElementById("imgModal").src = `/images/gallery/${imageName}sm.jpg`
 }

<a href="#" data-toggle="modal" data-target="#imageModal"><img class="img-fluid" src="/images/thumbs/inst01.jpg" onclick="setModalImageSrc(this)"></a> 

<div class="modal fade" tabindex="-1" role="dialog" id="imageModal">
        <div class="modal-dialog modal-dialog-centered" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Image 1</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <div class="container">
                        <img id="imgModal" src="/images/gallery/inst01sm.jpg" alt="" class="img-fluid">
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>

edited Dec 24, 2018 at 0:53

answered Dec 24, 2018 at 0:19

ic3b3rg

15k4 gold badges33 silver badges55 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

RjC Over a year ago

No this is sadly not working, although I guess you understood what I am trying to accomplish. The modal just shows nothing now. No image at all (not even a broken image link).

ic3b3rg Over a year ago

I just noticed that the modal image src should be /images instead of images

RjC Over a year ago

I am not editing this above. It is working now. I was typing the code to learn and misspelled something. It works now. Thanks so much. Could you explain in a sentence how this is working. I know myself around html and css, but have never deep dived into javascript. As far as I understand the function is triggered when image is clicked, right? But why is the id (imgModal) all that is needed to create or load the new src link?

ic3b3rg Over a year ago

The onclick event is invoked with setModalImageSrc(this) where this is the current image, which is passed in as the img parameter. We figure out what the image name is and then use a predetermined pattern to map that to a gallery image. Make sense?

RjC Over a year ago

I understand the script (except for the pattern, but that's ok). What I don't understand why I can embed the script right before the closing body tag and still the onClick on the image works. I believed that since the browser goes through the html code from top to bottom, that it would try to interpret the onClick event before even knowing that a script file exists.

|

Collectives™ on Stack Overflow

How to: Javascript get file name on click without path and insert it into a new image link?

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related