how to open (full-screen) images with onclick on anchor tag based on image thumbnail

Question

I want to show the image on the pop-up div depend on the image thumbnail. like on clicking onclick of images/thumbnails/apple.jpg will open a pop-up image images/actual/apple.jpg

HTML

<div class="row">
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil.jpg" alt="1">
                    </a>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
                    <a onclick="showImg()" class="d-block mb-4 h-100">
                        <img class="img-fluid img-hov" src="images/thumbnails/pencil2.jpg" alt="1">
                    </a>
                </div>
//another option is using onclick in img tag if this makes easy.
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 web zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/web.jpg" alt="">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch.jpg" alt="1">
                    </div>
                </div>
                <div name="filter-img" class="col-lg-3 col-md-4 col-6 sketch zoom">
                    <div class="d-block mb-4 h-100">
                        <img onclick="showImg()" class="img-fluid img-hov" src="images/thumbnails/sketch2.jpg" alt="">
                    </div>
                </div>
</div>

let's say I want to show the image inside this

HTML

<div id="imgbox" class="d-none">
    <div id="mainimg">

    </div>
</div>

My idea was to get the src of the clicked link and then replacing thumbnails with actual on src and adding to HTML.

JS

function showImg() {
    var imgbox = document.getElementById("imgbox");
    imgbox.classList.toggle("d-none");
    document.getElementById("mainimg").innerHTML = "<img class='img-fluid' src='I dont know'>";
}

Please help me with the showImg() function for making this thing work.

Answer 1

You must define "actual image url". In this case, you can define this value in the function.

<div name="filter-img" class="col-lg-3 col-md-4 col-6 pencil zoom">
  <a onclick="showImg('images/actual/pencil.jpg')" class="d-block mb-4 h-100">
    <img class="img-fluid img-hov" src="images/thumbnails/pencil.jpg" alt="1">
  </a>
</div>

And you can access value in the function like this:

function showImg(imageUrl) {
  document.getElementById("mainimg").innerHTML = "<img class='img-fluid' src='"+imageUrl+"'>";
}