(feat) Implement gallery looping

[feimosi]

To enable gallery looping set the loop option

baguetteBox.run('.gallery', {
    loop: true
});

[kavitha-pitchaikannu]

After cloning the gitcode also gives bounce effect for image looping , because Bounce effect is mentioned in show(index,gallery) function in baguttebox.js file... instead use the below code in show(index.gallery) function -> if index is less than 0 - showfirstimage and if index is greater than array length - showlastimage.

function show(index, gallery) {
        if (!isOverlayVisible && index >= 0 && index < gallery.length) {
            prepareOverlay(gallery, options);
            showOverlay(index);
            return true;
        }
        if (index < 0) {
            if (options.animation) {
                showLastImage();
            }
            return false;
        }
        if (index >= imagesElements.length) {
            if (options.animation) {
                showFirstImage(0);
            }
            return false;
        }
        currentIndex = index;
        loadImage(currentIndex, function() {
            preloadNext(currentIndex);
            preloadPrev(currentIndex);
        });
        updateOffset();
        if(options.onChange) {
            options.onChange(currentIndex, imagesElements.length);
        }
        return true;
    }

[feimosi]

@kavithakavithap your code doesn't make sense. I've tested my solution on several devices and it works fine. Make sure you enable the looping with loop: true.

I'm waiting for more people to confirm that.

[mountaineer25]

Adding loop: true has had no effect. Do I need a newer version of baguetteBox? I am using version 1.8.1.

[feimosi]

@mountaineer25 you need to clone the repository and check out to the branch gallery-looping. This feature is not released yet.

[Pont]

I've tested this and it works, but the effect is not as nice as I would have hoped. When moving from the last image to the first the "image roll" very quickly rolls back through all the images to the first one. Sort of like a quick rewind. And vice versa in the other direction. It would be nicer if the animation went directly to the first/last image without moving through every image in between.

[feimosi]

@Pont sorry, that's currently out of scope, it would require too many changes in the code.

[ketonik]

So the looping is some kind of 'rewind' effect?
If the gallery had 4 images for example, ideally it should function something like this:

click image 1
then repeated right arrow key click or swipe:
image 2 displays
image 3 displays
image 4 displays

image 1 displays
image 2 displays
image 3 displays
image 4 displays

image 1 displays
image 2 displays
image 3 displays
image 4 displays

no rewinding effect just a round and round we go 1 2 3 4 1 2 3 4 even increments.

[feimosi]

@ketonik as mentioned in my previous comment, that's currently not possible.

[ketonik]

2>feimos, that deserves unhappy face 😢
So is not possible now but is there some magic you have to make possible soon?

Donation of $$, can help to create the magic?
also wanna (disable body scroll) resolved:
#211

[ketonik]

Here is one called colorbox, this all can do continuous cycling 123,123, maybe can check his code and get some clues to make work same in Baguettebox?
http://www.jacklmoore.com/colorbox/example1/

loop true If false, will disable the ability to loop back to the beginning of the group when on the last element.

http://www.jacklmoore.com/colorbox/

[feimosi]

Sorry, to implement that I'd have to rewrite a significant part of the script, the current logic underneath does not support it what basically means creating v2. I'm very busy now and can't address it anytime soon.
This pull request is the most I could do for the time being.

[rubenberendsen]

Is this something that will be released soon? Or does anyone know a workaround?

[martipk]

@rubenberendsen easy work around to have seemingly infinite looping for your gallery is just add all the photos again below with anchor tags a few times. This won't slow your page as it's just links. and as there is no content in the a tags, they'll be invisible.

<a href="./image1.jpg">
    <img src="./image1.jpg" style="width: 100px; height: 100px;">
</a>
<a href="./image2.jpg">
    <img src="./image3.jpg" style="width: 100px; height: 100px;">
</a>
<a href="./image3.jpg">
    <img src="./image2.jpg" style="width: 100px; height: 100px;">
</a>

<a href="./image1.jpg"></a>
<a href="./image2.jpg"></a>
<a href="./image3.jpg"></a>
<a href="./image1.jpg"></a>
<a href="./image2.jpg"></a>
<a href="./image3.jpg"></a>
<a href="./image1.jpg"></a>
<a href="./image2.jpg"></a>
<a href="./image3.jpg"></a>
`