jquery - Bootstrap 多个画廊

Question

我有三个不同的模式，每个模式都包含一些图像。模态的代码是这样的

 <div class="modal fade" id="modal-photo" tabindex="-1" role="dialog" aria-   labelledby="album_modal" aria-hidden="true">
   <div class="modal-dialog modal-lg">
    <div class="modal-content">
        <div class="modal-body">
            <div class="col-md-4 col-sm-6">
                <div class="pic">
                    <a href="PathOfImage1" id="hrefId1" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage1" alt="">
                        <div class="img_overlay"></div>
                    </a>

                    <a href="PathOfImage2" id="hrefId2" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage2" alt="">
                        <div class="img_overlay"></div>
                    </a>

                    <a href="PathOfImage3" id="hrefId3" class="gallery-item">
                        <img class="img-responsive img-thumbnail" src="PathOfImage3" alt="">
                        <div class="img_overlay"></div>
                    </a>

                </div>
            </div>
        </div>
    </div>
</div>

当显示三个模态之一并且我单击其中的图像时，图库就会出现。问题是图库包含所有模态的所有图像。如果每个模态框有 4 张图片，那么图库将包含 12 张图片。我只想在图库中显示打开模态的图像(在我的示例中只有 4 张图像)。有办法管理吗？提前致谢

Answer 1

这完全取决于您的图库脚本。一种方法是在您使用 modal events 打开一个特定模式时初始化您的画廊脚本。 .

$('#modal-photo').on('shown.bs.modal', function(evt) {
    var thisModal = $(evt.target);
    //init your gallery using images found in this modal only $('img', thisModal) 
});

信息太少，无法提供其他帮助。

也许你们有相同的模态 ID。如果您有 3 个模态框，则单数 id 名称会脱颖而出。或者您有一些参数等于所有 3 个模态，您的图库通过这些模态查找图像 url。