图像显示模式的Onclick与更大的图像

Question

(pardon my English) I am trying to create a modal gallery every which will popup when ever the image is clicked on which is gotten from database with the query, so i want the a larger image of the image clicked on in the middle of the modal. i have some js but that doesn't work properly when clicked it only flashes the larger image, Meanwhile i want the larger image appended into the modal which all happens on the click of the image. Pls can someone help me with this, i'm new to all of this

This is the php query

include('includes/settings.php');
$user_id= $_SESSION['user_id'];
$result =  mysqli_query($con,"SELECT * FROM images where user_id='$user_id' ");


while($row = mysqli_fetch_array($result)) {
echo '    <img onclick="gmshow()" class="gallery-image" src="' . $row['img_loc'] . '">
<a href="" ><p>' . $row['img_name'] . '</p><a>

<button class="del-btn btn btn-danger" rel="' . $row['id'] . '">Delete</button>

and this is the html for the modal

<div id="g-modal" class="gallery-modal" onclick="gmleave()">
  <span class="">&times;</span>
  <div class="gm-imagebox">
  <img onclick="gmshow()" class="gallery-modal-picture" src="' . $row['img_loc'] . '">
</div>

here is the css

.gallery-container {
  text-align: center;
  border-radius: 4px;
  margin-left: 100px;
  height: 600px;
  width: 1000px;
  padding-left: 100px;
  padding-right: 20px;
}


.gallery-image {
  width: 300px;
  height: 200px;
  border-radius: 5px;
  cursor: pointer;
  transition: 0.3s;
}


.gallery-image:hover{
   opacity: 0.7;
}

.gallery-modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}


.gallery-modal-image {
  width: 80%;
  max-width: 700px;
  margin: auto;

}

here is the js

    $(".gallery-imagelink").click(function gmshow(){
    var photoSrc = $(this).find("img").attr("src");
    $(this).append("<img class src='"+photoSrc+"' />");
    $(".gallery-modal").fadeIn()

});