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个模态。

引导多个画廊

1 个答案: