Здравствуйте, уважаемые программисты. Искал информацию в интернете и на этом ресурсе, но так и не нашел решения.
Я написал скрипт мобильной галереи для фотографий. При клике по фото оно открывается во всю ширину экрана в модальном окне (в блоке imgShowGalery)
.galeryBody {display:none;position:fixed;width:100%;height:100%;text-align:center;left: 0;top: 0;overflow: auto;background: rgba(0,0,0,1);z-index: 9999;}
.imgBoxGaleryAbs { background-repeat: no-repeat;background-position: center center;background-size: contain;width:100%;height:100%;position:absolute;left: 0;top: 0;z-index: 10000;}
.imgBoxGalery {background-repeat: no-repeat;background-position: center center;background-size: contain;width:100%;height:100%;}
<div id="mobileGalery" class="galeryBody">
<div id="imgShowGalery" class="imgBoxGalery" data-dist="0" data-vis="9"></div>
</div>
и дальше пользователь может закрыть модальное окно, если сделает свайп вверх или вниз.
При свайпе класс у элемента imgShowGalery меняется на imgBoxGaleryAbs и средствами jquery изображение двигается в след за пальцем и галерея закроется если пользователь сместил изображение более чем на 300px относительно начального положения. И если это значение будет меньше 300 пикселей, то после того как пользователь уберет пальцы от экрана - изображение вернется на свое начальное место.
Все работает отлично, НО... Если пользователь захочет увеличить изображение, то оно не будет вписываться в экран и он захочет его сдвинуть свайпом вверх, допустим, чтобы просмотреть его нижнюю часть. Но скрипт в этот момент начнет процесс подготовки к закрытию галереи и после того как пользователь отпустит палец, то изображение опять вернется на тот момент откуда начали движение и он не сможет разглядеть нижнюю область изображения. Задача состоит в том, чтобы как-то отследить изменение масштабирования и при увеличении модального окна запретить начинать процесс его закрытия свайпом...
