Phonegap- (Android/iphone) ¿La galería de imágenes con imágenes múltiples está dando problemas?

Question

He creado una galería de imágenes en HTML5, JavaScript y CSS utilizando jQuery mobile. IE Phonegap platform está bien.
Las imágenes están llegando de forma dinámica y se cargan en el mismo, así:
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

Por encima de mouseSwipe deslizante:

TYPE: 'mouseSwipe' 
HORIZ: true 
plugin available at 
torontographic.wordpress.com 

El problema viene con ella es que no puedo hacer clic en la imagen e ir a página siguiente, porque dos eventos están ocurriendo juntos.

El segundo problema es que no puedo deslizar la página hacia abajo, desde el lugar donde se coloca la galería, excepto en la otra área donde la galería no está presente.

Para hacerlo más claro, estoy haciendo una aplicación de noticias en la que he agregado 5 - 10 galería como la aplicación de noticias Pulse.

Answer 1

Estoy un poco confundido acerca de algunos de los detalles del problema, pero odio ver esta pregunta completamente sin respuesta en caso de que alguien más tenga este problema.

Este complemento (mouseSwipe) anula la funcionalidad de arrastre predeterminada para dispositivos móviles. Mientras que normalmente los dispositivos desplazarían la página en el evento de inicio del mouse, este complemento anula ese comportamiento para detectar el movimiento del clic en un elemento. Como interrumpe esa funcionalidad, arrastrar la dirección opuesta (para desplazarse) también se rompe. Si el propietario todavía mantiene el complemento (no parece que lo esté), podría actualizarse para solucionar este problema o emitir eventos que podrían utilizarse para crear manualmente la funcionalidad que usted desea.

Supongo que esto también es lo que le está causando problemas al hacer clic para ir a la página especificada.

Si quiere mi opinión sincera, elegiría una biblioteca diferente, tal vez una que se centre únicamente en la capacidad de los dispositivos móviles, y luego maneje la funcionalidad de escritorio por separado (aunque, si usa PhoneGap, es probable que no esté incluso publicar esto en una plataforma web para computadoras de escritorio). Si va a estar en la web, puede utilizar Modernizr (o similar) para averiguar si el dispositivo es compatible con la entrada táctil, y luego implementar algo como lo siguiente:

http://labs.rampinteractive.co.uk/touchSwipe/demos/Image_gallery_example.html

Para los dispositivos que no lo hacen soporte táctil, podría recurrir a la navegación basada en botones/flechas (después de todo, como usuario de escritorio, no espero poder arrastrarlo hacia adelante y hacia atrás con el mouse).

Answer 2

En el archivo http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js la función onmousedown tiene el siguiente código. Esto detendrá el evento del comportamiento predeterminado y, en los casos, dejará de capturar/burbujear. Es posible que desee ver estos o la forma en que las bibliotecas manejan el evento.

e.preventDefault() 

Aquí encontrará más información sobre cómo detener la propagación de JQuery y el comportamiento normal.

event.preventDefault() vs. return false What is event bubbling and capturing?

Answer 3

La razón por la que no se puede deslizar hacia arriba y hacia abajo es probablemente debido a que el evento "golpe" está acaparando la "MoveStart" o evento "movimiento".

me encontré con un problema similar una vez al usar este plugin: http://stephband.info/jquery.event.swipe/

Su solución como se ha señalado en en su página web era para llamar al método preventDefault en el evento para evitar que bloquee como se ve aquí.

jQuery('.mydiv') 
.on('movestart', function(e) { 
    // If the movestart is heading off in an upwards or downwards 
    // direction, prevent it so that the browser scrolls normally. 
    if ((e.distX > e.distY && e.distX < -e.distY) || 
     (e.distX < e.distY && e.distX > -e.distY)) { 
    e.preventDefault(); 
    } 
}); 

No tengo experiencia con jQuery mobile, pero creo que los problemas son similares.