title: trying to make a simple image gallery with popup bootstrap
body: <p>I'm trying to create a simple image gallery with 100x100 thumbnails and using bootstrap popup to view every image in its full size when you click it.</p>
  
  <pre><code>&lt;?php
  $eventFiles1 = scandir($eventDir);
  $eventFiles = array_diff($eventFiles1, array('.', '..'));
  
  foreach($eventFiles as $eventFile)
  {
      $image = "./".$eventDir."/".$eventFile;
  
      list($width, $height) = getimagesize($image);
  
      if($width &gt; $height)
      {
          ?&gt;
          &lt;a data-toggle="modal" data-target="#myModal" href=""&gt;&lt;div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('&lt;?php echo $image; ?&gt;');background-size:auto 100%;"&gt;&lt;/div&gt;&lt;/a&gt;
  
          &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;img src="&lt;?php echo $image; ?&gt;" class="img-responsive"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;?php
      }
      else
      {
          ?&gt;
          &lt;a data-toggle="modal" data-target="#myModal" href=""&gt;&lt;div style="height:100px;width:100px;margin:10px;background-color:black;display:inline-block;background-position:center;background-image:url('&lt;?php echo $image; ?&gt;');background-size:100% auto;"&gt;&lt;/div&gt;&lt;/a&gt;
  
          &lt;div id="myModal" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
              &lt;div class="modal-dialog"&gt;
                  &lt;div class="modal-content"&gt;
                      &lt;div class="modal-body"&gt;
                          &lt;img src="&lt;?php echo $image; ?&gt;" class="img-responsive"&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;?php
      }
  }
  ?&gt;
  </code></pre>
  
  <p>As it is now, it doesn't work the way I want it. I'll explain why:</p>
  
  <p>say my gallery contains 5 images (image1.jpeg, image2.jpeg......image5.jpeg)
  no matter which image I click to enlarge, the image appearing in the modal is always image1.jpeg.</p>
  
  <p>Now, I did believe the problem to be that my model always has the same ID - <code>#myModal</code>, but even when I tried giving it a dynamic ID by for example changing the ID <code>divModal</code> to <code>$image</code>, but this did not work either - it resulted in nothing happening at all when I click the images.</p>
  
  <p>Could someone please help me with this?</p>
  
  <p>Thanks in advance.</p>