Question

我正在尝试添加next / prev，然后将事件滑动到bootstrap模态图库。缩略图显示在网格中，因此当我尝试closest()，siblings()和next()时，我只能在同一列而不是其他列中转到下方和上方的图像在网格中。

每个缩略图都有一个ID，其中包含数据库中的图像ID。即：

<a class="image-gallery-item" id="img-1002" href="#showImageModal" data-toggle="modal" onclick="..."><img src="..." /></a>
<a class="image-gallery-item" id="img-4664" href="#showImageModal" data-toggle="modal" onclick="..."><img src="..." /></a>

每个链接都将图像src，标题和ID传递给一个函数，该函数会更改显示模态的信息。一切正常，我试图触发下一个项目时似乎无法获得下一个/上一个工作。

理想情况下，我不想使用next()和closest()以及sibling()方法，而是将目标ID定义为大于当前ID的第一个下一个并且小于当前ID如果元素存在，则触发点击。

感谢。

<小时/> 的更新

根据@ Ersian的建议，我创建了一个数组并通过索引循环显示图像。他们仍然按专栏进行，但至少他们正在进入下一专栏。对于用户来说，这会给用户带来一点混淆，我想，在进入下一行方形缩略图之前，谁会期望图像从左到右显示。

$('.image-gallery-item').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                index = $imgvalues.indexOf(thisIMG);
                if (index >= 0 && index < $imgvalues.length - 1)
                    nextItem = $imgvalues[index + 1];

                $('#' + nextItem).trigger('click');
            }, 1000);

<小时/> 更新 - 工作代码

通过向数组添加sort来找到解决方案，然后使用类image-gallery-item命中项目的结束或开始时循环下一个/ prev。我会发布工作代码作为答案，以防其他人发现这个问题，并希望制作一个带有网格，同位素或砖石布局的引导模态图库。

Answer 1

请记住，您需要在模式中添加带show-next-image和show-previous-image类的按钮。之后，以下代码将允许您使用类image-gallery-item循环使用图像。

    $('#show-next-image, #show-previous-image').click(function () {
        if ($(this).attr('id') == 'show-previous-image') {
            $('#showImageModal').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                var lastIMG = $('.image-gallery-item').length;
                $imgvalues.sort();
                index = $imgvalues.indexOf(thisIMG);
                if (index <= lastIMG - 2) {
                    nextItem = $imgvalues[index + 1];
                } else {
                    nextItem = $imgvalues[0];
                }
                $('#' + nextItem).trigger('click');
            }, 1000);
        } else {
            $('#showImageModal').modal('hide');
            setTimeout(function () {
                var thisIMG = $("#imgid").html();

                var imgs = document.getElementsByClassName("image-gallery-item");
                var $imgvalues = Array.prototype.map.call(imgs, function (el) {
                    return el.id;
                });

                var lastIMG = $('.image-gallery-item').length;
                $imgvalues.sort();
                index = $imgvalues.indexOf(thisIMG);
                if (index >= 1) {
                    nextItem = $imgvalues[index - 1];
                } else {
                    nextItem = $imgvalues[lastIMG - 1];
                }
                $('#' + nextItem).trigger('click');
            }, 1000);
        }
    });

添加下一个和上一个按钮以引导目标链接ID

1 个答案: