1

Twitter Bootstrap Carousel の画像をポップアップモーダルで表示しようとしているので、視聴者が好きな画像を印刷できるようになります。現在、カルーセル画像をクリックすると、実際にクリックした画像ではなく、モーダルは常に配列の最後の画像のみを表示します。

カルーセル内部クラス内のカルーセル コードは次のとおりです。

<?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 を持つ 2 番目のループを設定しました。これにより、最初の写真はモーダルに表示されませんが、2 番目の写真は表示されます。(注: 上記の $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