ios/android - loop option isn't working on touch event

[alex-w0]

It isn't possible to loop the gallery when the swipe event will be used.

To Reproduce

1. Enable the option 'loopAtEnd'
2. Open the gallery on a mobile device
3. Swipe to the last image
4. Gallery don't go to the first image

[biati-digital]

Hi @DevelGitH I'm aware of that but it still needs work, it can be enabled really easy but I don't like how the animation is handled (when going from the first to last or last to first), as soon as I have some free time I'll work on this to improve it.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[ghost]

I'm trying wit hthe latest 3.0.8, and am seeing the same behavior: looping does not work with mobile swipe.

[adambichler]

@biati-digital any updates on this? If not, is there a workaround one can use? Even if the animation is not handled perfectly? Thank you!

[babobski]

I ran into the same problems, but made a small change to make it work for mobile ( swipe events ). I made two changes to the swipe function:

      swipe: function swipe(evt) {
        if (imageZoomed) {
          return;
        }

        if (doingZoom) {
          doingZoom = false;
          return;
        }

        if (evt.direction == 'Left') {
          // Added a check here
          // Don't reset the slide when in loop mode
          if (instance.index == instance.elements.length - 1 && !instance.loop()) {
            return resetSlideMove(media);
          }

          instance.nextSlide();
        }

        if (evt.direction == 'Right') {
          // And added a check here
          // Don't reset the slide when in loop mode
          if (instance.index == 0 && !instance.loop()) {
            return resetSlideMove(media);
          }

          instance.prevSlide();
        }
      }

I also made a small change to the go to slide function:

      value: function goToSlide() {
        var index = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;
        console.log(index);
        this.prevActiveSlide = this.activeSlide;
        this.prevActiveSlideIndex = this.index;

        if (!this.loop() && (index < 0 || index > this.elements.length - 1)) {
          return false;
        }

        if (index < 0) {
          index = this.elements.length - 1;
        } else if (index >= this.elements.length) {
          index = 0;
        }

        if (index == 0) {
          // Added this, if index is 0 pass the first parameter so it got a different animation
          this.showSlide(index, true);
        } else {
          this.showSlide(index);
        }

      }

And this is my lightbox configuration:

   var lightbox = GLightbox({
        touchNavigation: true,
        loopAtEnd: true,
        loop: true
    });