Getting gallery to loop back to beginning on last image

[jimcallender]

Hi there,

I would like to return the slide back to the first gallery image.

Currently, when you get to the last image, the user gets 'stuck'.

Please provide support on how to fix this?

[feimosi]

Hi,
currently it's not possible without rerunning the lightbox (that means closing it and opening again).
It's an interesting suggestion as an enhancement. I'll look into that in my free time, but for now I'm too busy.

[XhmikosR]

This would be very handy indeed. So far, it seems only this is missing.

[XhmikosR]

Maybe just hiding the button(or marking it as disabled) if there's no next image or previous one might make sense until this is implemented.

[feimosi]

That's also an option, but I've always really liked the bounce effects :)

[XhmikosR]

Agreed, but it can be confusing because one might click on next and nothing will happen :P

[feimosi]

Do you mean when CSS animations are not supported? Because the effect itself is quite self-explaining :P

[XhmikosR]

Generally, it's bad UI practice, that is all I'm saying. We need to consider the end users like they know nothing :)

[feimosi]

@XhmikosR I always think about the end users and UX. Consider the case when someone quickly click next button, then it suddenly disappears and he closes the whole lightbox by mistake. Another case, someone moves the images using the keyboard, then it stops working, but he doesn't see any visual indication (he may not notice the hidden right button or they may be hidden - e.g. mobile users). Anyway, it shouldn't be discussed in this issue :)

@jimcallender why did you close this? It's an approved feature for v.2.0.

[XhmikosR]

But the visual indication is the button's disabled state. That's the proper
way to show that there's no more going next or previous.
On Apr 3, 2016 00:12, "Marek Grzybek" [email protected] wrote:

@XhmikosR https://github.com/XhmikosR I always think about the end
users and UX. Consider the case when someone quickly click next button,
then it suddenly disappears and he closes the whole lightbox by mistake.
Another case, someone moves the images using the keyboard, then it stops
working, but he doesn't see any visual indication (he may not notice the
hidden right button or they may be hidden - e.g. mobile users). Anyway, it
shouldn't be discussed in this issue :)

@jimcallender https://github.com/jimcallender why did you close this?
It's an approved feature for v.2.0.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#41 (comment)

[feimosi]

What about mobile users then?

[XhmikosR]

They don't see any button by default, do they? Apart from the close one.
On Apr 3, 2016 00:23, "Marek Grzybek" [email protected] wrote:

What about mobile users then?

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#41 (comment)

[feimosi]

That's right, so here's my question, how to handle this case, if you're saying we should put button's state to disabled instead of the bounce effect.

[XhmikosR]

Well that case remains the same.

I'm mostly talking about the case where the button's are visible.
On Apr 3, 2016 00:27, "Marek Grzybek" [email protected] wrote:

That's right, so here's my question, how to handle this case, if you're
saying we should put button's state to disabled instead of the bounce
effect.

—
You are receiving this because you were mentioned.
Reply to this email directly or view it on GitHub
#41 (comment)

[feimosi]

Okay, now I get it. Let's keep this idea open for future releases :)

[zArubaru]

Hey, this loop back functionality is definitely something that would be nice to have, at least as an option, if you ever have the time to make it! Excellent plugin either way.

[XhmikosR]

@feimosi: this is still valid please open the issue.

[feimosi]

Yes, I agree. This feature is still on the radar, when only I have more time.

[Discipol]

any update on this? Would love to infinitely loop it

[feimosi]

I've planned this feature for the v2.0 release, which should roll out later this year (hopefully).

Would it be satisfying to use a programmatic solution by now? Bind to the onChange event and use showImage(0) API method (which will be implemented soon)?

[Discipol]

That would work. Do you have a programatic solution for not having the modal as big as the screen? Maybe css stuff? thank you!

[feimosi]

You want to have images of smaller size than 100%? Maybe overriding this CSS would help?

[Discipol]

thanks! web stuff is not my forte :(

[feimosi]

No problem! Give it a try :)

[mountaineer25]

I would love to have this loop feature, it is the only thing that has been missing for me when using this on various sites. If you have a little custom code I could add into the current version that would be great. Thank you for your work on this, it is one of the best performing lightboxes on a wide variety of devices.

[feimosi]

@mountaineer25 @Discipol I've prepared a working example of what I was talking about in my previous comments about onChange / showImage(0). Please check out the branch gallery-loop:
https://github.com/feimosi/baguetteBox.js/tree/gallery-loop

You can use it e.g. like this:
https://github.com/feimosi/baguetteBox.js/blob/gallery-loop/demo/index.html#L233

Let me know if that works for you.

[XhmikosR]

@feimosi: can't we add a new option which will just do this?

[feimosi]

Yeah, I just wanted to provide a very quick solution many people asked for. By the way, it could be tested by others before releasing.

[mountaineer25]

I have tried using this on a couple of pages with no success. The only differences are the class of .gallery and the options for captions and buttons.

<script> window.onload = function() { var shouldLoop = false; baguetteBox.run('.gallery', { captions: true, buttons: 'auto', onChange: (currentIndex, imagesCount) => { if (currentIndex + 1 === imagesCount && !shouldLoop) { shouldLoop = true; } else if (shouldLoop) { shouldLoop = false; baguetteBox.showImage(0); } } }); }; </script>

[voltidev]

Just in case, here is how I'm looping the gallery in the both directions:

      (function() {
        var previousImageIndex = -1;

        baguetteBox.run('.js-gallery', {
          onChange: function(currentImageIndex, imagesCount) {
            var firstImageIndex = 0;
            var lastImageIndex = imagesCount - 1;
            var isFirstImage = currentImageIndex === firstImageIndex;
            var isLooping = currentImageIndex === previousImageIndex;

            if (isLooping) {
              if (isFirstImage) {
                baguetteBox.showImage(lastImageIndex);
              } else {
                baguetteBox.showImage(firstImageIndex);
              }
            } else {
              previousImageIndex = currentImageIndex;
            }
          },

          afterHide: function() {
            previousImageIndex = -1;
          },

          animation: false
        });
      })();

I used the gallery-loop branch where showImage method is implemented.

[feimosi]

Closed in favor of #167.

[miladmhp]

I have cloned gallery-loop branch but the loop functionality does not work at all.

[feimosi]

The following PR implements gallery looping. I'm waiting for feedback before merging it.
#207