Adding Next and Previous Buttons to Bootstrap Targeting Link IDs

Question

I am attempting to add next/prev and then swipe events to a bootstrap modal image gallery. The thumbnails are displayed in a grid so when I try closest() , siblings() , and next() I am only able to go to the images below and above in the same column and not the other columns in the grid.

Each thumbnail has an id with the images ID in the database. ie:

<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>

Every link passes the images src, caption, and ID to a function which changes out the info displayed the modal. All that works fine, I just can't seem to get next/prev working when trying to trigger the next item.

Ideally, instead of using next() and closest() and sibling() methods, I would LIKE to just target the ID greater than the current id for first next and lesser than the current ID for the first previous and trigger a click if the element exists.

Thanks.

---

UPDATE

Per @Ersian's suggestion, I created an array and cycle thru the images by index. They're still going by column but at least they're moving to the next column after. This will present a little confusion for users, I feel, who will expect the images to display left to right before going to the next row of square thumbnails.

 $('.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); 

---

UPDATE - WORKING CODE

Found the solution by adding sort to the array and then looped the next/prev if hitting the end or start of items with the class image-gallery-item. I'll post the working code as an answer in case anyone else finds this question and wants to make a bootstrap modal image gallery with gridalicious, isotope, or masonry layouts with columns.

Answer 1

Keep in mind you will need to add buttons with show-next-image and show-previous-image classes to your modal. After that, the following code will let you cycle thru images with the class 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);
        }
    });