diff --git a/README.md b/README.md index 66ae65d..b4c2f3b 100644 --- a/README.md +++ b/README.md @@ -233,25 +233,19 @@ To display a caption, add a `data-caption` attribute with the desired text or HT `onChangeImage` runs when a gallery image is changed and provides useful data about the current image. ```javascript -// example of how scrolling can be disabled using callbacks +// example of how scrolling can be disabled using henrygd.me/hide-show-scroll BigPicture({ el: e.target, - animationStart: function () { - // executed immediately before open animation starts - document.documentElement.style.overflowY = 'hidden' - document.body.style.overflowY = 'scroll' - }, + // animationStart executed immediately before open animation starts + animationStart: hideShowScroll.hide, + // animationEnd executed immediately after open animation finishes animationEnd: function () { - // executed immediately after open animation finishes console.log('it has opened') }, - onClose: function () { - // executed immediately after close animation finishes - document.documentElement.style.overflowY = 'auto' - document.body.style.overflowY = 'auto' - }, + // onClose executed immediately after close animation finishes + onClose: hideShowScroll.show, + // onChangeImage executed on gallery image change onChangeImage: function (props) { - // executed on gallery image change console.log('gallery image changed', props) }, }) diff --git a/src/BigPicture.js b/src/BigPicture.js index 9154695..a64c127 100644 --- a/src/BigPicture.js +++ b/src/BigPicture.js @@ -188,7 +188,7 @@ export default (options) => { // create all needed methods / store dom elements on first use function initialize() { - let startX + let startX, isPinch // return close button elements function createCloseButton(className) { const el = document[createEl]('button') @@ -223,24 +223,21 @@ function initialize() { container.onclick = close closeButton = createCloseButton('bp-x') container[appendEl](closeButton) - // gallery swipe listeners - if ('ontouchstart' in window) { + // gallery touch listeners + if ('ontouchend' in window && window.visualViewport) { supportsTouch = true - container.ontouchstart = ({ changedTouches }) => { + container.ontouchstart = ({ touches, changedTouches }) => { + isPinch = touches.length > 1 startX = changedTouches[0].pageX } - container.ontouchmove = (e) => { - e.preventDefault() - } container.ontouchend = ({ changedTouches }) => { - if (!galleryOpen) { - return + if (galleryOpen && !isPinch && window.visualViewport.scale <= 1) { + let distX = changedTouches[0].pageX - startX + // swipe right + distX < -30 && updateGallery(1) + // swipe left + distX > 30 && updateGallery(-1) } - const distX = changedTouches[0].pageX - startX - // swipe right - distX < -30 && updateGallery(1) - // swipe left - distX > 30 && updateGallery(-1) } }