Question

（原谅我的英文）我正在尝试创建一个模态库，每当点击图像时会弹出这个图库，这是从数据库中获取的查询，所以我想要在模态中间点击一个更大的图像图像。我有一些js，但单击时它不能正常工作它只会闪烁较大的图像，同时我希望更大的图像附加到模态，这一切都发生在图像的点击。请有人帮我这个，我是所有这一切的新手

这是php查询

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>

这是模态

的html

<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>

这是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;

}

这是js

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

});

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

0 个答案: