Phonegap-(Android/iphone) La galerie d'images avec plusieurs images pose des problèmes ?

Question

J'ai créé une galerie d'images en HTML5, JavaScript et CSS en utilisant jQuery mobile. IE Phonegap platform ok.
Les images viennent dynamiquement et sont chargées dans le fichier, comme ceci :
http://torontographic.com/wordpress/mouseSwipe/mouseSwipe.html

Au-dessus de mouseSwipe Slider :

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

Le problème est que je ne peux pas cliquer sur l'image et passer à la page suivante, car deux événements se produisent en même temps.

Le deuxième problème est que je ne peux pas faire glisser la page de haut en bas, à partir de l'endroit où la galerie est placée, sauf dans l'autre zone où la galerie n'est pas présente.

Pour être plus clair, je crée une application d'actualités dans laquelle j'ai ajouté 5 à 10 galeries comme dans l'application Pulse.

Answer 1

Je ne comprends pas très bien certains détails du problème, mais je ne voudrais pas que cette question reste sans réponse au cas où quelqu'un d'autre serait confronté à ce problème.

Ce plugin (mouseSwipe) remplace la fonctionnalité de glissement par défaut pour les appareils mobiles. Alors que normalement les appareils feraient défiler la page lors de l'événement de démarrage de la souris, ce plugin outrepasse ce comportement pour détecter le mouvement d'un clic sur un élément. Puisqu'il interrompt cette fonctionnalité, le glissement dans la direction opposée (pour le défilement) est également interrompu. Si le plugin était encore maintenu par son propriétaire (il ne semble pas l'être), il pourrait être mis à jour pour corriger ce problème, ou émettre des événements qui pourraient être utilisés pour créer manuellement la fonctionnalité que vous souhaitez.

Je suppose que c'est également ce qui vous pose problème lorsque vous cliquez pour aller à la page spécifiée.

Si vous voulez mon avis honnête, je choisirais une autre bibliothèque, peut-être une qui se concentre uniquement sur le swipage des appareils mobiles, et qui gère séparément les fonctionnalités pour les ordinateurs de bureau (bien que, si vous utilisez PhoneGap, il est probable que vous ne publiez pas cela sur une plateforme web pour les ordinateurs de bureau). Si c'est pour le web, vous pouvez utiliser modernizr (ou autre) pour déterminer si l'appareil supporte l'entrée tactile, et ensuite implémenter quelque chose comme ce qui suit :

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

Pour les appareils qui ne sont pas tactiles, vous pouvez revenir à une navigation basée sur des boutons ou des flèches (après tout, en tant qu'utilisateur d'un ordinateur de bureau, je ne m'attends pas à pouvoir faire glisser le document d'avant en arrière à l'aide de la souris).

Answer 2

Dans le fichier http://torontographic.com/wordpress/mouseSwipe/jquery.mouseSwipe.js La fonction onmousedown contient le code ci-dessous. Cela arrêtera l'événement du comportement par défaut et, dans certains cas, arrêtera la capture/la bulle. Vous pouvez vous pencher sur ces éléments ou sur la manière dont les bibliothèques gèrent les événements.

e.preventDefault()

Voici plus d'informations sur la façon d'arrêter la propagation de JQuery et le comportement régulier.

event.preventDefault() vs. return false Qu'est-ce que le bouillonnement et la capture d'événements ?

Answer 3

La raison pour laquelle vous ne pouvez pas glisser vers le haut ou vers le bas est probablement due au fait que l'événement "swipe" monopolise l'événement "movestart" ou "move".

J'ai rencontré un problème similaire une fois en utilisant ce plugin : http://stephband.info/jquery.event.swipe/

Leur solution, comme indiqué sur leur site web, était d'appeler la méthode preventDefault sur l'événement pour éviter qu'il ne se bloque, comme on peut le voir ici.

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();
  }
});

Je n'ai pas d'expérience avec jQuery mobile, mais je pense que les problèmes sont similaires.