1

我正在尝试在弹出模式中显示来自我的 Twitter Bootstrap Carousel 的图像,以便我可以允许查看者打印他们喜欢的图像。现在,当我单击任何轮播图像时,模态总是仅显示数组中的最后一个图像,而不是我实际单击的图像。

我的 carousel-inner 类中的轮播代码是:

<?php
foreach($photos as $photos):
  $image_now = $photos->image_path();
  <div class="item">
      <a href="#launch" data-toggle="modal">
        <img src="../<?php echo $image_now; ?>"  />
      </a>
  </div>
  <?php 
endforeach; 
?>

我的#launch 模态代码是:

<section id="launch" class="modal hide fade">
  <div id="printThis">
    <div class="modal-body">
        <img src="../<?php echo $image_now; ?>"  />
    </div>
  </div>
</section>

按照 Skelly 的建议,我现在设置了具有唯一启动 ID 的第二个循环。这导致第一张照片没有显示在模态中,但第二张照片会显示。(注意:上面的 $photo 循环使用 $i 计数器,而这个模态循环使用 $j 计数器):

$j = 0;
foreach($photos as $photos): 
  $j++;
  $launch = "launch" . $j;  
  if ( $i == $j ) {  ?>
    <section id=<?php echo $launch; ?> class="modal hide fade">

    <div id="printThis">
      <div class="modal-body">
            <img src="../<?php echo $image_now; ?>"  />
      </div>
    </div>

  </section>
  <?php 
  } 
endforeach;
4

1 回答 1

2

您是否循环通过 $photos 来创建每个模态?

每个部分都应该有一个唯一的 id(即:launch1、launch2 等),由href="#launch..".item DIV 中的

这是一个演示: http ://bootply.com/61231

于 2013-05-13T16:42:24.700 回答