Add swipe to lightbox gallery

Bootstrap Studio Help
1

Hi, Can someone explain how to add the posibilty to swipe trough the images in a lightbox gallery? Default, I only see arrows on the images to go to next or previous. For mobile devices Swiping would be much neater.

Thanks, Martin.

2

Try following this https://lazcreative.com/blog/how-to/how-to-adding-swipe-support-to-bootstraps-carousel/

It sound like it can be used even for the lightbox next/prev

Saj

3

Thanks for pointing this out Saj, looks like it fits my needs. However, I need little help to get it to work. As I did it now, it sadly does not work.

I added the minified version of the JQuery mobile part to my project (someName.min.js) I added the event next/prev part as a seperate min.js file to my project and renamed the #myCarousel to the ID I use for my gallery.

Any thoughts on what I do wrong?

Thanks for helping out... Martin.

4

So I had problems getting that to work myself, so I went a different route.

This is based on the Lightbox Gallery from the BS4 Components.

Link to this external JS file https://cdnjs.cloudflare.com/ajax/libs/jquery.touch/1.1.0/jquery.touch.min.js

Then add this JS function in your custom JS file.

$(function(){
    var e = $('#lightbox');

    e.touch({
        delegateSelector: '.lb-next, .lb-prev'
    });

    e.on('swipeLeft', '.lb-next', function(event) {
        $('.lb-next').trigger("click")
    }).on('swipeRight', '.lb-prev', function(event) {
        $('.lb-prev').trigger("click")
    });
});

I was able to use the BS4 Component Lightbox Gallery with Chrome Dev Tools and toggled the device toolbar and selected tablet. I can click on a gallery image and then swipe left and right to scroll through the photos in lightbox.

I'll be using this myself I'm sure :)

Saj

1 Like
5

I should have linked the homepage for that script too, so you can see all the functions etc..

https://github.com/ajlkn/jquery.touch

Saj

1 Like
6

You can now see it in action here http://saj.bss.design/lightbox-gallery.html

:)

Saj

7

Works like a charm. Say, you are the best! Thanks...

1 Like
8

Your welcome, glad I could help :)

Saj