Question

我有一个foreach循环来显示图像：

<? 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;?>

图像全部显示在缩略图中，但是，当我单击打开模态窗口时，图像始终是数组的第一个元素（模态打开图像的更大视图）。如何让每个模态图像与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。我建议你切换到使用编号的ids或类名

假设$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;?>

这会使每个元素的id都是唯一的。

顺便说一下，除非你完全反对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>

使用foreach循环显示数组中的图像

1 个答案: