Adding event fotorama:touchstart, fotorama:touchend

[X4]

It would be really useful to have an event called touchstart and touchend.
For example, if you set the the transition to crossfade/dissolve and want to allow the more natural transition slide only to appear when a slide is dragged/touched.
Another use-case is to hide the thumbnails or dots, when you touch the screen.

[artpolikarpov]

Overkill. I plan to add alternative transition through new clicktransition option. So you’ll be able to use dissolve transition only after click, not swipe.

[X4]

Indeed, agree with you on that.

There appears to be a transition glitch for the keyboard navigation. It tries to complete the transition for each slide, which is correct behavior, but causes repeated keypressed to run the preceding transitions in a queue, instead of one flawless go. It may be fixed by using .stop(true,true), if the keypresses are higher than 3, or the cumulative transition time for the keypresses exceeds the transition time set by a factor of 2 or 1.5.

I've solved the problem in the meantime like this, btw.:

            $('.fotorama')
                .on("touchstart mousedown", ".fotorama__img", function (e) {
                    var a = $('.fotorama').data('fotorama');
                    var o = { transition: 'slide', autoplay: false };
                    a.setOptions(o);
                    $('.fotorama__caption, .fotorama__caption__wrap')
                        .stop(true).fadeOut(600);
                })
                .on("touchend touchcancel mouseup", function (e) {
                    e.preventDefault();
                    var a = $('.fotorama').data('fotorama');
                    var o = { transition: 'crossfade', autoplay: false };
                    a.setOptions(o);
                })
/* The following code isn't necessary, but added for completness */
                .on('fotorama:fullscreenenter', function (e, fotorama, extra) {
                    $(this).removeClass('fotorama-box-shadow');
                    fotorama.setOptions({
                        transition: 'crossfade', nav: 'dots'
                    });
                })
                .on('fotorama:fullscreenexit', function (e, fotorama, extra) {
                    $(this).addClass('fotorama-box-shadow');
                    fotorama.setOptions({
                        transition: 'crossfade', nav: false, autoplay: '5000'
                    });
                })
                .on('fotorama:show', function (e, fotorama, extra) {
                    $('.fotorama__caption, .fotorama__caption__wrap')
                        .stop(true).delay(1000).fadeIn(600);
                })
                .on('mouseenter', function (e, fotorama, extra) {
                    $('.fotorama__caption, .fotorama__caption__wrap')
                        .stop(true).delay(400).fadeIn(600);
                })
                .on('mouseleave', function (e, fotorama, extra) {
                    $('.fotorama__caption, .fotorama__caption__wrap')
                        .stop(true).delay(1681).fadeOut(600)
                });