自舉燈箱圖像和單頁內容

我在我的頁面上有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> 
    <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>

目前我的劇本是爲第一< LI>，我希望它爲所有李時珍我有工作，只有工作我有他們的4在同一頁上。

來源

2017-03-28 Ylama

沒關係，使用引導默認主題的IM，我只是給了第二個列表顯示的div一個唯一的ID爲猜想和它的工作..第二<李

例子>：固定

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

這顯示了我的第二個李在他自己的燈箱，其獨特的形象和內容。

來源

2017-03-28 14:43:19 Ylama

自舉燈箱圖像和單頁內容

回答

相關問題