jQuery mobile image gallery default vertical scroll issue

Question

I have an image gallery with a series of thumbs. Both are loaded dynamically depending on how many images are associated with a product. You can click on a thumb to get that series of images. On a mobile device you can swipe left and right to see all the images. That all works fine.

Here's my issue: When you try to scroll down the page and you happen to be touching one of the main images you get stuck and the page doesn't move. For the life of me I cannot figure out a work around for this. I am wondering if anyone has ever encountered this and figured out a solution. I think there could be a way to control this via the touch-punch.js but cannot figure it out. Thank you.

Here is my simplified gallery HTML:

<ul id="Gallery" class="gallery productGalleryInner">
<li>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
<a href="#"><img src="img.jpg" />/a>
</li>
</ul>

</div>

css:

#productGalleryWrap {
overflow: hidden;
margin: 7px 10px 0;
}

#productGalleryWrap .productGalleryInner {
white-space: nowrap;
}

#productGalleryWrap .productGalleryInner li {
display: inline;
}   

#productGalleryWrap .productGalleryInner img {
display: inline;
width: 50%;
}

I am using touch-punch.js to control the horizontal drag. Here is the code:

(function ($) {

  // Detect touch support
  $.support.touch = 'ontouchend' in document;

  // Ignore browsers without touch support
  if (!$.support.touch) {
return;
  }

      var mouseProto = $.ui.mouse.prototype,
      _mouseInit = mouseProto._mouseInit,
      touchHandled;

  /**
   * Simulate a mouse event based on a corresponding touch event
   * @param {Object} event A touch event
  * @param {String} simulatedType The corresponding mouse event
  */
  function simulateMouseEvent (event, simulatedType) {

    // Ignore multi-touch events
    if (event.originalEvent.touches.length > 1) {
     return;
   }

    event.preventDefault();

    var touch = event.originalEvent.changedTouches[0],
        simulatedEvent = document.createEvent('MouseEvents');

// Initialize the simulated mouse event using the touch event's coordinates
simulatedEvent.initMouseEvent(
  simulatedType,    // type
  true,             // bubbles                    
  true,             // cancelable                 
  window,           // view                       
  1,                // detail                     
  touch.screenX,    // screenX                    
  touch.screenY,    // screenY                    
  touch.clientX,    // clientX                    
  touch.clientY,    // clientY                    
  false,            // ctrlKey                    
  false,            // altKey                     
  false,            // shiftKey                   
  false,            // metaKey                    
  0,                // button                     
  null              // relatedTarget              
    );

    // Dispatch the simulated event to the target element
event.target.dispatchEvent(simulatedEvent);
  }

  /**
   * Handle the jQuery UI widget's touchstart events
   * @param {Object} event The widget element's touchstart event
   */
  mouseProto._touchStart = function (event) {

   var self = this;

    // Ignore the event if another widget is already being handled
    if (touchHandled || !self._mouseCapture(event.originalEvent.changedTouches[0])) {
      return;
    }

    // Set the flag to prevent other widgets from inheriting the touch event
touchHandled = true;

    // Track movement to determine if interaction was a click
self._touchMoved = false;

    // Simulate the mouseover event
simulateMouseEvent(event, 'mouseup');

    // Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');

    // Simulate the mousedown event
simulateMouseEvent(event, 'mousedown');
  };

            mouseProto._touchMove = function (event) {

    // Ignore event if not handled
    if (!touchHandled) {
  return;
    }

// Interaction was not a click
this._touchMoved = true;

// Simulate the mousemove event
simulateMouseEvent(event, 'mousemove');
  };

   /**
   * Handle the jQuery UI widget's touchend events
   * @param {Object} event The document's touchend event
   */
  mouseProto._touchEnd = function (event) {

// Ignore event if not handled
if (!touchHandled) {
  return;
}

// Simulate the mouseup event
simulateMouseEvent(event, 'mouseup');

// Simulate the mouseout event
simulateMouseEvent(event, 'mouseout');

// If the touch interaction did not move, it should trigger a click
if (!this._touchMoved) {

  // Simulate the click event
  simulateMouseEvent(event, 'click');
}

// Unset the flag to allow other widgets to inherit the touch event
touchHandled = false;
  };

  /**
   * A duck punch of the $.ui.mouse _mouseInit method to support touch events.
   * This method extends the widget with bound touch event handlers that
   * translate touch events to mouse events and pass them to the widget's
   * original mouse event handling methods.
   */
  mouseProto._mouseInit = function () {

var self = this;

// Delegate the touch handlers to the widget's element
self.element
  .bind('touchstart', $.proxy(self, '_touchStart'))
  .bind('touchmove', $.proxy(self, '_touchMove'))
  .bind('touchend', $.proxy(self, '_touchEnd'));

// Call the original $.ui.mouse init method
_mouseInit.call(self);
  };

})(jQuery);

Please let me know if more info is needed. Thanks.

score 0 · Answer 1 · edited May 23 '17 at 11:56

Kind of late answer but I had this same problem on a current project I'm working on.

Comment out:

event.preventDefault();

Add this after:

document.ontouchmove = function(e) {
    var target = e.currentTarget;
    while(target) {
        if(checkIfElementShouldScroll(target))
            return;
        target = target.parentNode;
    }

    e.preventDefault();
};

Dolla dolla bills y'all.

Code taken from this thread: document.ontouchmove and scrolling on iOS 5

jQuery mobile image gallery default vertical scroll issue

1 Answers1