顯示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.'" />'; 
}