Question

我遇到的问题是我的模态只显示第一张图像。我想要做的是我想要显示一个动态画廊。每个＆＃34;帖子＆＃34;可以有0- *图像，并根据此帖子的数据库中有多少图像显示有多少图像。我遇到了这个问题，发现其他人有类似的问题，但不完全一样。

此代码基本上是生成帖子的局部视图。模态显示的次数正确，但仅显示第一张图片。

非常感谢

<ul class="imageRow">
@foreach (var item in Model)
{

    <div class="col-lg-3 col-md-4 col-xs-6">
        <a class="thumbnail" href="#" data-image-id="" data-toggle="modal" data-target="#image-gallery">
            <img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,@item">
        </a>
    </div>
    <div class="modal fade" id="image-gallery" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
                    <h4 class="modal-title" id="image-gallery-title"></h4>
                </div>
                <div class="modal-body">
                    <img class=" img-responsive" id=" imageresource" src="data:image/jpeg;base64,@item">
                </div>
                <div class="modal-footer">

                    <div class="col-md-2">
                        <button type="button" class="btn btn-primary" id="show-previous-image">Previous</button>
                    </div>
                    <div class="col-md-2">
                        <button type="button" id="show-next-image" class="btn btn-default">Next</button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script src="//code.jquery.com/jquery-1.10.2.min.js"></script>
    <script src="~/Scripts/bootstrap.min.js"></script>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min.js" type="text/javascript"></script>

    <script>

        $(document.body).on('hidden.bs.modal', function () {
            $('#image-gallery').removeData('bs.modal');
        });
        $(document).ready(function () {

            loadGallery(true, 'a.thumbnail');

            //This function disables buttons when needed
            function disableButtons(counter_max, counter_current) {
                $('#show-previous-image, #show-next-image').show();
                if (counter_max == counter_current) {
                    $('#show-next-image').hide();
                } else if (counter_current == 1) {
                    $('#show-previous-image').hide();
                }
            }

            function loadGallery(setIDs, setClickAttr) {
                var current_image,
                    selector,
                    counter = 0;

                $('#show-next-image, #show-previous-image').click(function () {
                    if ($(this).attr('id') == 'show-previous-image') {
                        current_image--;
                    } else {
                        current_image++;
                    }

                    selector = $('[data-image-id="' + current_image + '"]');
                    updateGallery(selector);
                });

                function updateGallery(selector) {
                    var $sel = selector;
                    current_image = $sel.data('image-id');
                    $('#image-gallery-caption').text($sel.data('caption'));
                    $('#image-gallery-title').text($sel.data('title'));
                    $('#image-gallery-image').attr('src', $sel.data('image'));
                    disableButtons(counter, $sel.data('image-id'));
                }

                if (setIDs == true) {
                    $('[data-image-id]').each(function () {
                        counter++;
                        $(this).attr('data-image-id', counter);
                    });
                }

                $(setClickAttr).on('click', function () {
                    updateGallery($(this));
                });
            }

        });
    </script>
}

Answer 1

您对模式的所有使用相同的ID（id="image-gallery"）。 HTML元素ID应该是唯一的！您需要为每个模态生成不同的ID。

模态仅显示第一张图像

1 个答案: