팝업 부트 스트랩을 사용하여 간단한 이미지 갤러리를 만들려고합니다.

Question

100x100 축소판 이미지가있는 간단한 이미지 갤러리를 만들고이를 클릭하면 부트 스트랩 팝업을 사용하여 전체 크기의 모든 이미지를 봅니다.

<?php 
$eventFiles1 = scandir($eventDir); 
$eventFiles = array_diff($eventFiles1, array('.', '..')); 

foreach($eventFiles as $eventFile) 
{ 
    $image = "./".$eventDir."/".$eventFile; 

    list($width, $height) = getimagesize($image); 

    if($width > $height) 
    { 
     ?> 
     <a data-toggle="modal" data-target="#myModal" href=""><div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('<?php echo $image; ?>');background-size:auto 100%;"></div></a> 

     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-body"> 
         <img src="<?php echo $image; ?>" class="img-responsive"> 
        </div> 
       </div> 
      </div> 
     </div> 

     <?php 
    } 
    else 
    { 
     ?> 
     <a data-toggle="modal" data-target="#myModal" href=""><div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('<?php echo $image; ?>');background-size:100% auto;"></div></a> 

     <div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-body"> 
         <img src="<?php echo $image; ?>" class="img-responsive"> 
        </div> 
       </div> 
      </div> 
     </div> 
     <?php 
    } 
} 
?> 

지금과 같이 원하는대로 작동하지 않습니다. 이유를 설명해 드리겠습니다.

내 갤러리에 이미지 5 개 (image1.jpeg, image2.jpeg ...... image5.jpeg) 이미지가 포함되어있는 경우 이미지가 모달에 표시되는지 여부에 관계없이 항상 image1.jpeg입니다.

지금, 나는 내 모델은 항상 동일한 ID를 가지고 될 문제를 생각했다 - #myModal,하지만 경우에도 나는 그것을 예를 들어 divModal$image에 ID를 변경하여 동적 ID를주는 시도하지만,이 중 하나가 작동하지 않았다 - 이미지를 클릭해도 아무 일도 일어나지 않았습니다.

누군가 나를 도와 줄 수 있습니까?

미리 감사드립니다.

Answer 1

당신은 내가 솔루션이 작고 간단한 그 것이다 믿을 수 없었다, 모달에 다른 ID를 넣어 및

foreach($eventFiles as $key => $eventFile) 

및 HTML에 대한

data-target="#myModal'.$key.'" 

<div id="myModal'.$key.'" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">