Skip to content

Instantly share code, notes, and snippets.

@csavoronin
Created October 28, 2019 06:31
Show Gist options
  • Save csavoronin/97f432bab10e44b0fb96678b296e41fb to your computer and use it in GitHub Desktop.
Save csavoronin/97f432bab10e44b0fb96678b296e41fb to your computer and use it in GitHub Desktop.
[!] Design: On mobile when scrolling product images, the page was scrolling.
diff --git a/js/tygh/product_image_gallery.js b/js/tygh/product_image_gallery.js
index 46f58502f4..5f438fb27c 100644
--- a/js/tygh/product_image_gallery.js
+++ b/js/tygh/product_image_gallery.js
@@ -220,7 +220,10 @@
addClassActive: true,
afterInit: function (item) {
var thumbnails = $('.cm-thumbnails-mini', item.parents('[data-ca-previewer]')),
- previewers = $('.cm-image-previewer', item.parents('[data-ca-previewer]'));
+ previewers = $('.cm-image-previewer', item.parents('[data-ca-previewer]')),
+ previousScreenX = 0,
+ newScreenX = 0,
+ swipeThreshold = 7;
previewers.each(function (index, elm) {
$(elm).data('caImageOrder', index);
@@ -229,6 +232,20 @@
thumbnails.on('click', function () {
item.trigger('owl.goTo', $(this).data('caImageOrder') ? $(this).data('caImageOrder') : 0);
});
+
+ item.on('touchstart', function (e) {
+ previousScreenX = e.changedTouches[0].screenX;
+ })
+
+ item.on('touchmove', function (e) {
+ newScreenX = e.changedTouches[0].screenX;
+
+ if (Math.abs(newScreenX - previousScreenX) > swipeThreshold && e.cancelable) {
+ e.preventDefault();
+ }
+
+ previousScreenX = newScreenX;
+ })
$('.cm-image-previewer.hidden', item).toggleClass('hidden', false);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment