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个，我想在他们自己的灯箱内单独展示。我将如何实现这一目标？

第二个例子＆lt; 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>

目前我的脚本仅适用于第一个＆lt; li> ，我希望它能为我所拥有的所有人工作，并且我在同一页面上有4个。

Answer 1

没关系，即时通讯使用bootstrap默认主题，我只是给了第二个列表显示div一个唯一的ID，假设它有效..

第二个例子＆lt; 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>

这显示了我在自己的灯箱中的第二个李，其独特的图像和内容。

单页的bootstrap灯箱图像和内容

1 个答案: