ブートストラップライトボックスとシングルページのコンテンツ

Question

私のページには4つのイメージがあります。各イメージは、高度なカスタムフィールドを使用して呼び出すヘッダータイトルとコンテンツで構成されています。これらの画像のいずれかをクリックすると、画像、ヘッダー、およびコンテンツが表示されるライトボックスが表示されます。

これまでのところ、私は最初のイメージでしか動作しませんでした。

Javascriptを：

$(document).ready(function(){ 
$(".toggle-modal").click(function(){ 
    $("#lightBoxId").modal('toggle'); 
}); 
}); 

HTML：

<li class="list-item-1"> 
    <a data-toggle="modal" href="#lightBoxId"> 
    <?php if (isset($images['url']) && !empty($images['url'])) : ?> 
     <img src="<?php echo $images['url']; ?>" alt="<?php echo $images['alt']; ?>" /> 
     <p class="name-field"><?php echo $images['description']; ?></p> 
     <p class="text-field"><?php echo $images['caption']; ?></p> 
    <?php endif; ?> 
    </a> 

    <div id="lightBoxId" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <img src="<?php echo $images['url']; ?>" alt="<?php echo $images['alt']; ?>" /> 
        <p class="name-field"><?php echo $images['description']; ?></p> 
        <p class="text-field"><?php echo $images['caption']; ?></p> 
       </div> 
      </div> 
     </div> 
    </div> 

</li> 

は、今私が持っている他の3李さん私は自分自身のライトボックスの中に個別に表示したいです。これを達成するにはどうすればいいですか？二<のLi

例>：

<li> 
    <a data-toggle="modal" href="#lightBoxId"> 
    <?php if (isset($images2['url']) && !empty($images2['url'])) : ?> 
     <img src="<?php echo $images2['url']; ?>" alt="<?php echo $images2['alt']; ?>" /> 
     <p class="name-field"><?php echo $images2['description']; ?></p> 
     <p class="text-field"><?php echo $images2['caption']; ?></p> 
        <?php endif; ?> 
        </a> 
    <div id="lightBoxId" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <img src="<?php echo $images['url']; ?>" alt="<?php echo $images['alt']; ?>" /> 
        <p class="name-field"><?php echo $images['description']; ?></p> 
        <p class="text-field"><?php echo $images['caption']; ?></p> 
       </div> 
      </div> 
     </div> 
    </div> 

<li> 

現在、私のスクリプトは、最初の<李のために働いている>、私はそれがすべての李さん、私が持っていると私はそれらの4を持っているために仕事をしたいです同じぺージに。

Answer 1

はネヴァーマインド、ブートストラップデフォルトのテーマを使用してイムは、私はちょうど2番目のリスト表示をすると仮定して一意のIDをDIV与え、それが働いた。.. <第二のLi

例>：固定

<li> 
    <a data-toggle="modal" href="#lightBoxId-second"> 
    <?php if (isset($images2['url']) && !empty($images2['url'])) : ?> 
     <img src="<?php echo $images2['url']; ?>" alt="<?php echo $images2['alt']; ?>" /> 
     <p class="name-field"><?php echo $images2['description']; ?></p> 
     <p class="text-field"><?php echo $images2['caption']; ?></p> 
    <?php endif; ?> 
    </a> 

    <div id="lightBoxId-second" class="modal fade"> 
     <div class="modal-dialog"> 
      <div class="modal-content"> 
       <div class="modal-header"> 
        <img src="<?php echo $images2['url']; ?>" alt="<?php echo $images2['alt']; ?>" /> 
        <p class="name-field"><?php echo $images2['description']; ?></p> 
        <p class="text-field"><?php echo $images2['caption']; ?></p> 
       </div> 
      </div> 
     </div> 
    </div> 

</li> 

これは、独自のイメージとコンテンツで自分のライトボックスに自分の2番目の李を表示しました。