显示PHP图像

Question

如何ID的渲染页面：

代码波纹管将显示所有的照片对我来说，为了从“资源/ PHP/disImg”目录。

我的目标是点击图像并从目录中以图像模式显示'onclick'图像。

<!-- The Modal --> 
<div id="myModal" class="modal"> 
    <span class="close">&times;</span> 
    <img class="modal-content" id="img01"> 
</div> 

<!-- Displays all photos from folder --> 
<div class="containerPhotos"> 
     <?php 
      $dirname = "resources/php/disImg/"; 
      $images = glob($dirname."*.{jpg,jpeg,png}",GLOB_BRACE); 
      natcasesort($images); 

      foreach($images as $randomImage) { 
       echo '<img id="myImg" src="'.$randomImage.'" class="photo" />'; 
      } 
     ?> 
</div> 

目前我能够靶向与来自PHP /图像目录（ID =“myImg”）的第一图像和具有它在模态显示。点击第一张照片后

模式弹出：

<script> 
// Get the modal 
var modal = document.getElementById('myModal'); 

var img = document.getElementById('myImg'); 
var modalImg = document.getElementById("img01"); 
    img.onclick = function(){ 
    modal.style.display = "block"; 
    modalImg.src = this.src; 
} 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 
</script> 

任何人都知道如何使它所以我点击使用id =“myImg”无论图像会弹出和模态内显示？

• 我不能得到一个解决方案，但与第ñ选择工作，但我认为这将工作。

下面是该模式弹出名为.css

#myImg { 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.3s; 
} 

#myImg:hover {opacity: 0.7;} 

/* The Modal (background) */ 
.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 */ 
} 

/* Modal Content (image) */ 
.modal-content { 
    margin: auto; 
    display: block; 
    width: 100%; 
    max-width: 1000px; 
} 

/* Add Animation */ 
.modal-content, #caption {  
    -webkit-animation-name: zoom; 
    -webkit-animation-duration: 0.6s; 
    animation-name: zoom; 
    animation-duration: 0.6s; 
} 

@-webkit-keyframes zoom { 
    from {-webkit-transform:scale(0)} 
    to {-webkit-transform:scale(1)} 
} 

@keyframes zoom { 
    from {transform:scale(0)} 
    to {transform:scale(1)} 
} 

/* The Close Button */ 
.close { 
    position: absolute; 
    top: 15px; 
    right: 35px; 
    color: #f1f1f1; 
    font-size: 40px; 
    font-weight: bold; 
    transition: 0.3s; 
} 

.close:hover, 
.close:focus { 
    color: #bbb; 
    text-decoration: none; 
    cursor: pointer; 
} 

/* 100% Image Width on Smaller Screens */ 
@media only screen and (max-width: 700px){ 
    .modal-content { 
     width: 100%; 
    } 
} 

Answer 1

有几种不同的方式来做到这一点，但第一个把我的头的顶部是一个onclick事件添加到每个您的PHP foreach循环中的img HTML元素。

 foreach($images as $randomImage) { 
      echo '<img id="myImg" onclick="showImage(this)" src="'.$randomImage.'" class="photo" />'; 
     } 

然后你需要一个同名的javascript函数，你可以像这样获得源字符串。

function showImage(imgElement) { 
    var src = imgElement.getAttribute("src"); 
    /* Do the stuff with your modal */} 

Answer 2

感谢您们的帮助，这里是最终的构建工作！

的JavaScript/

var modal = document.getElementById('myModal'); 
var modalImg = document.getElementById('img01'); 

function showImage(imgElement) { 
    var src = imgElement.getAttribute("src"); 
    modal.style.display = "block"; 
    modalImg.src = src; 
} 

// Get the <span> element that closes the modal 
var span = document.getElementsByClassName("close")[0]; 

// When the user clicks on <span> (x), close the modal 
span.onclick = function() { 
    modal.style.display = "none"; 
} 

PHP/

foreach($images as $randomImage) { 
    echo '<img class="photo" onclick="showImage(this)" id="myImg" src="'.$randomImage.'" />'; 
}