BluImp Gallery позволяет перетаскивать изображение вертикально

Question

Я использую галерею изображений blueImp в карусели. Я разрешаю перетаскивать изображения для мобильного пользователя, но изображения можно перетаскивать как по вертикали, так и по горизонтали, что означает, что вы можете получить изображение наполовину перетаскиваемым за пределы экрана.

При перетаскивании элемент.slide изменяется в соответствии с размерами, такими как:style="transform:translate(-100px, 256px)"

Я пытался установить translateY(0) !important но это просто перезаписывает перетаскивание в целом.

Я использую jQuery, так что, возможно, есть способ наблюдать за событием перетаскивания? Любая помощь полезна.

Answer 1

Единственный способ, которым мне удалось это сделать, - это переписать функцию ontouchmove у blueimp. Вам просто нужно закомментировать вызов translateY. Я взял источник из https://github.com/blueimp/Gallery/blob/master/js/blueimp-gallery.js.

Поместите весь overwite где-нибудь в вашем js, в идеале отдельный файл с комментариями для будущего.

blueimp.Gallery.prototype.ontouchmove = function (event) {
    ...
    } else {
        // Removed move up/down funictionality
        //this.translateY(index, this.touchDelta.y + this.positions[index], 0);
    }
};

Надеюсь, это поможет вам! Возможно, blueimp может добавить опцию, чтобы переключить это поведение в будущем:)

Pav