Mobile touch events like Photoswipe

[dlewand691]

Love the plug-in but could really use some of the touch event capability similar to Photoswipe. Any thoughts on integrating something like this? Has it been done with any examples? Thank you!

[johannpinson]

+1

[dgobnto]

+1 ;)

[sam-g-roberts]

+1

[daslicht]

+1

[user928]

+1

[ghost]

+1

[dlewand691]

This new plugin might give some inspiration on how to add mobile touch events: http://desmonding.me/zooming/

[Sanabria]

+1

[xrat]

Am I right that this issue is the cause for the fact that Chocolat is almost not usable on small mobile devices because there is no way to move the image when zoomed?

[enkota]

@xrat This and that you cannot swipe gesture to the next slide easily.

[shangul]

+1

[nicolas-t]

More informations regarding swipe, and how it can be done : https://github.com/nicolas-t/Chocolat/issues/68

[yannicgraeser]

Am I right that this issue is the cause for the fact that Chocolat is almost not usable on small mobile devices because there is no way to move the image when zoomed?

I can't use this otherwise very cool plugin because of this :(

[isospin]

+1

[johansmitsnl]

This is my piece of code inspired by the comments:

$(document).ready(function () {
    $('.chocolat-parent').Chocolat({
        imageSize: 'contain',
        loop: true,
        enableZoom: false,
        afterImageLoad: function () {
            const chocolat = this;
            const hammertime = new Hammer(this.elems.img[0], {});
            hammertime.on('pan', function (ev) {
                if (ev.isFinal) {

                   // FIXME needs proper API for calling the zoom function (does not work properly)
                    chocolat.zoomOut();

                    if (ev.additionalEvent === 'panleft') {
                        chocolat.api().prev();
                    } else if (ev.additionalEvent === 'panright') {
                        chocolat.api().next();
                    }
                }
            });
            hammertime.on('doubletap', function (ev) {
                if (ev.isFinal) {
                    // FIXME needs proper API for calling the zoom function (does not work properly)
                    chocolat.zoomIn({pageX: ev.center.x, pageY: ev.center.y});
                }
            });
        }
    });
});

The only part missing is the Zoom implementation. It seems the API does not have zoom exposed and this implementation does not work. Suggestions?

Agree with @nicolas-t to not implement zoom because it is easy to implement with the library os choice.

[nicolas-t]

@johansmitsnl You could totally add zoom methods to the api. A pull request would be very welcome.

At this line :
https://github.com/nicolas-t/Chocolat/blob/master/src/js/jquery.chocolat.js#L663

Something like :

zoomIn: function(e) {
    return that.zoomIn(e)
},

zoomOut: function(duration) {
    return that.zoomOut(duration)
},

Then you would have to call it like this :

            hammertime.on('doubletap', function (ev) {
                if (ev.isFinal) {
                    chocolat.api().zoomIn(ev.srcEvent); // pass source event ev.srcEvent
                }
            });