Отображение изображений из массива с помощью цикла Еогеасп

Question

У меня есть цикл Еогеасп для отображения изображений, как так:

<? foreach ($fmx as $key): ?> 
    <li class="span3"> 
     <div class="thumbnail">        
      <h5 class ="cv-img-header">FMX</h5>         
       <div class="cv-icon-eye"> 
        <a href="#fmx" role = "button" class = "icon-eye-open" data-toggle="modal"> </a> 
       </div> 
       <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">  
      <div id="fmx" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h3>FMX</h3> 
       </div> 
       <div class="modal-body"> 
        <p><img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>"></p>       
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button> 
       </div> 
      </div> 
     </div> 
    </li> 

<? endforeach;?> 

Изображения все отображаемые в DIC миниатюр уже они должны быть, однако, когда я нажимаю, чтобы открыть модальное окно, изображение всегда является первым элементом массива (модальный открывает больший вид изображения). Как я могу соответствовать каждому модальному изображению с изображением thubnail?

Массив: некоторые элементы были вырезаны, потому что я не знаю, как их форматировать здесь читаемым способом.

array(22) { 
[0]=> 
array(1) { 
["file_name"]=> 
    string(37) "e00f50e3b0cf9a96357f16761e10d7a9.jpeg" 
} 
[1]=> 
array(1) { 
["file_name"]=> 
string(37) "e3f07180d4a01cca8021f0b31142840e.jpeg" 
} 
[2]=> 
array(1) { 
["file_name"]=> 
string(37) "c52127da0a36d737da527c2c32f07b9d.jpeg" 
} 
[3]=> 
array(1) { 
["file_name"]=> 
string(37) "1339aa888b253a50900e2e3c236b58f8.jpeg" 
} 

Answer 1

Проблема заключается в том, что вы ориентируетесь ваш модальность на основе id и не class. id может быть присвоено только одному из элементов. Когда вы вызываете document.getElementById('fmx'), он будет возвращать только один элемент, первый соответствующий элемент с этим id. Я предлагаю вам перейти на использование пронумерованных идентификаторов или имя класса

Допуская $id представляет собой целое число, вы могли бы сделать что-то вроде:

<? foreach ($fmx as $key): ?> 
    <? $image_ident = preg_replace('/[^a-zA-Z]*/', '', $key['file_name']); ?> 
    <li class="span3"> 
     <div class="thumbnail">        
      <h5 class ="cv-img-header">FMX</h5>         
       <div class="cv-icon-eye"> 
        <a href="#fmx-<?=$image_ident?>" role = "button" class = "icon-eye-open" data-toggle="modal"> </a> 
       </div> 
       <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">  
      <div id="fmx-<?=$image_ident?>" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true"> 
       <div class="modal-header"> 
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
        <h3>FMX</h3> 
       </div> 
       <div class="modal-body"> 
        <p><img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>"></p>       
       </div> 
       <div class="modal-footer"> 
        <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button> 
       </div> 
      </div> 
     </div> 
    </li> 

<? endforeach;?> 

Это сделает идентификатор каждого элемента уникален.

Как в стороне, если вы не полностью против javascript, кажется, что это должно быть просто модальным, когда вы меняете исходный код изображения при запуске модального. Например:

<? foreach ($fmx as $key): ?> 
    <li class="span3"> 
     <div class="thumbnail">        
      <h5 class ="cv-img-header">FMX</h5>         
     <div id="image-modal" class="cv-icon-eye"> 
      <a href="#fmx" data-src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>" role = "button" class = "icon-eye-open" data-toggle="modal"> </a> 
     </div> 
     <img src="<?= site_url('/files/fmx/' .$id.'/'.$var.'/fmx/'. $key["file_name"]); ?>">  
     </div> 
    </li> 
<? endforeach;?> 
<div id="fmx" class="modal hide fade cv-img-modal" tabindex="-1" role="dialog" aria-labelledby="fmx" aria-hidden="true"> 
    <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button> 
     <h3>FMX</h3> 
    </div> 
    <div class="modal-body"> 
     <p><img src="http://placehold.it/500x300&text=Image"></p>       
    </div> 
    <div class="modal-footer"> 
     <button class="btn btn-primary cv-modal-btn" data-dismiss="modal" aria-hidden="true">Close</button> 
    </div> 
</div> 
<script> 
    $(function(){ 
     $('#image-modal a').on('click', function(){ 
      var image_source = $(this).attr('data-src'); 
      $('#fmx .modal-body img').attr('src', image_source) 
     }) 
    }) 
</script>