Question

我试图以弹出模式显示我的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;

Answer 1

你是否正在循环拍摄$ photos来创建每个模态？

每个部分都应该有一个唯一的ID（即：launch1，launch2等等），由你的.item DIV中的href="#launch.."引用

Twitter Bootstrap Carousel：在Modal Popup中显示单击的图像

1 个答案:

以下是演示： http://bootply.com/61231