Bootstrap Leuchtkasten Bild und Inhalt für einzelne Seite

Question

Ich habe 4 Bilder auf meiner Seite, jedes Bild besteht aus einem Titel und Inhalt, die ich mit erweiterten benutzerdefinierten Feldern aufrufen. Wenn ich auf eines dieser Bilder klicke, möchte ich eine Lightbox mit Bild, Header und Inhalt für welche auch immer ich geklickt habe.

Bisher habe ich es geschafft, es nur für das erste Bild arbeiten zu lassen.

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> 

Jetzt habe ich eine weitere 3 li i individuell in ihrem eigenen Leuchtkästen angezeigt werden sollen. Wie würde ich das erreichen?

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

Derzeit mein Skript funktioniert nur für die erste < li>, ich will es, ich habe für alle li arbeiten und ich habe 4 von ihnen auf der selben Seite.

Answer 1

Nevermind, im mit Bootstrap-Standard-Theme, ich habe gerade die zweite Liste Anzeige eine eindeutige ID div als angenommen, und es hat funktioniert ..

Beispiel zweiten < li>: fixed

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

Dies zeigte meine zweite li in seinem eigenen Leuchtkasten mit seinem einzigartigen Bild und Inhalt.