Piwigo.org

Toomka · 2014-05-03 13:02:08

Bonjour,

J'ai fait des tests avec mon téléphone sous android (idem sur ma tablette) et je viens de me rendre compte que le thème SmartPocket ne fonctionnait pas/plus avec Firefox mobile lorsque l'option "Voir version ordinateur" n'était pas coché. Comme par défaut ce n'est pas coché et que je pense que les 3/4 des utilisateurs ne penseront pas à cette option pour que ça fonctionne, c'est assez problématique.

Il y a t-il un hack connu pour faire fonctionner la galerie ou y'a t-il des outils connu pour tester le code sous mobile (sachant que sur Firefox sur Windows ça fonctionne très bien).

Merci d'avance pour vos réponses !

Version de Piwigo: 2.6.2
Version Android : 4.2.2
Version de Firefox : 29 et 28.0.1
URL Piwigo: http://piwigo.org/demo/index.php?/categ … obile=true

Dernière modification par Toomka (2014-05-03 13:39:32)

flop25 · 2014-05-03 14:07:47

Bonjour
malheureusement le navigateur mobile Firefox est un des pires existants notamment en ce qui concerne l'interprétation java script. Je pense qu'à terme on se dirigera vers un thème par défaut responsive

Toomka · 2014-05-06 11:41:58

Salut Flop,

C'est un peu une non réponse que tu fais là et ça aide pas à résoudre les problèmes ;)

Du coup j'ai tapé un peu dans le code après avoir trouvé comment déboguer Firefox mobile sur ordinateur (je mets les liens car ça peut toujours servir à d'autres : https://developer.mozilla.org/en-US/doc … or_Android et https://hacks.mozilla.org/2012/08/remot … r-android/) et j'ai enfin les miniatures sur mobile en modifiant cette ligne dans code.photoswipe.jquery.min.js (le user agent de firefox mobile n'est pas android x.x, mais "Android; Mobile; rv:xx.x") :

Code:

if(a.Browser.android&&e.navigator.userAgent.match(/Android (\d+.\d+)/).toString().replace(/^.*\,/,"")>=2.1)

en

Code:

if(a.Browser.android&&e.navigator.userAgent.match(/Android/).toString())

Ceci étant, ça ne résout que le problèmes des miniatures et pas le problème d'affichage des vues uniques pour les images ni le problème des flèches de navigation lorsque l'image fait toute la hauteur.

Au final j'ai je me suis penché vers le plugin lightbox car il s'ouvre par défaut avant d'afficher la page de l'image. Et j'ai trouvé qu'en modifiant le z-index: 9999 pour #colorbox, #cboxOverlay, #cboxWrapper { } en z-index: 1 ça fonctionne.

Les deux seuls problèmes qu'ils restent maintenant c'est :
1. Gérer lors du chargement en vue unique (lorsque l'on affiche le diaporama), afin de ne pas avoir un "débordement" de la page sur la droite (il charge toutes les images les unes après les autres, du coup on se retrouve avec un width gigantesque) ;
2. Le problème de fermeture de la lightbox (quand on clique sur le petit "X" en bas de page, l'image réapparait en grand dans la lightbox).

Toomka · 2014-05-06 12:06:14

En fait il suffit d'éditer la ligne 161 de code.photoswip.jquery.min.js (bon c'est un peu une rustine, j'aime pas trop ça, mais du coup ça fonctionne correctement) :

Code:

target:this,action:b.action,index:b.cacheIndex})},onToolbarTap:function(b){switch(b.action){case f.ToolbarAction.next:this.next();break;case f.ToolbarAction.previous:this.previous();break;case f.ToolbarAction.close:this.hide();break;case f.ToolbarAction.play:this.play()}a.Events.fire(this,{type:h.EventTypes.onToolbarTap,target:this,toolbarAction:b.action,tapTarget:b.tapTarget})},onMouseWheel:function(b){var c=a.Events.getWheelDelta(b);if(!(b.timeStamp-(this.mouseWheelStartTime||0)<this.settings.mouseWheelSpeed))this.mouseWheelStartTime=

en

Code:

target:this,action:b.action,index:b.cacheIndex})},onToolbarTap:function(b){switch(b.action){case f.ToolbarAction.next:this.next();break;case f.ToolbarAction.previous:this.previous();break;case f.ToolbarAction.close:this.hide();if(document.getElementById('cboxOverlay')){document.getElementById('cboxOverlay').style.display=document.getElementById('colorbox').style.display="none"}break;case f.ToolbarAction.play:this.play()}a.Events.fire(this,{type:h.EventTypes.onToolbarTap,target:this,toolbarAction:b.action,tapTarget:b.tapTarget})},onMouseWheel:function(b){var c=a.Events.getWheelDelta(b);if(!(b.timeStamp-(this.mouseWheelStartTime||0)<this.settings.mouseWheelSpeed))this.mouseWheelStartTime=

flop25 · 2014-05-06 13:42:59

c'est une explication d'un état de fait, pour un navigateur extrèmement marginal

bravo pour ce débeugage ; maintenant il faudrait ce raprocher de photswipe et voir si ça a été maj et leur reporter sinon

Dernière modification par flop25 (2014-05-06 13:45:20)

Toomka · 2014-05-06 14:29:13

Je ne pense pas que ce soit photoswipe.com qui ai fait cette version, car elle ressemble plutôt à un Fork (le numéro de version ne correspond pas car ici on est en 3.0.5 alors que sur photswipe.com c'est du 1.xx).

Par contre je viens de trouver ce code sur Gitub qui fonctionne très bien : https://github.com/benroy73/bpg/tree/ma … pe-3.0.5.1

Il y a toujours la lightbox (colorbox) qui fait ch**. Mais on peut passer outre en modifiant le fichier theme.css et en ajoutant après @import "photoswipe.css"; :

Code:

#colorbox, #cboxOverlay, #cboxWrapper {
  display:none;
  left: 0;
  overflow: hidden;
  position: absolute;
  top: 0;
  z-index:-1;
  opacity:0 !important
}

A tester, car de mon coté, ça fonctionne très bien :)

Dernière modification par Toomka (2014-05-06 14:29:34)

flop25 · 2014-05-06 14:37:42

https://github.com/dimsemenov/PhotoSwipe est du 3.0.5
c'est quoi la diff entre le sien et le notre et celui officiel?

en tt cas merci pour le debugging

Dernière modification par flop25 (2014-05-06 14:38:14)

Toomka · 2014-05-06 15:18:44

J'avais vu cette page sur Gitub, mais je n'avais pas remarqué que l'auteur était aussi celui du site (je pensais que c'était un fork). Sur le site de photoswipe.com le code n'est pas à jour (version 1.0.11 en téléchargement et 1.0.8 dans les exemples) d’où la confusion.

En espérant en tout cas avoir pu aider ceux qui comme moi se utilisent smart pocket, car au final ça reste quand même très embêtant de proposer un "outils" aux visiteurs alors que celui ci ne fonctionne pas bien (avec Firefox mobile) !

fcoiffie · 2014-08-28 14:06:45

Merci Toomka pour toute ces recherches, je vais essayer de les reporter chez moi.

Car dire que Firefox est marginale comme toute excuse, je trouve ça limite... A croire que certains veulent que Chrome retrouve la position dominante qu'avait IE...

fcoiffie · 2014-08-28 14:22:11

Je confirme que ça marche parfaitement :
* en remplaçant code.photoswipe.min.js et code.photoswipe.jquery.min.js à partir de https://github.com/benroy73/bpg/tree/ma … pe-3.0.5.1
* en modifiant le fichier theme.css

Encore merci Toomka ! Ca fait des mois que ça rendait le thème SmartPocket inutile !

Piwigo.org

Annonce

#1 2014-05-03 13:02:08

[Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#2 2014-05-03 14:07:47

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#3 2014-05-06 11:41:58

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

Code:

Code:

#4 2014-05-06 12:06:14

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

Code:

Code:

#5 2014-05-06 13:42:59

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#6 2014-05-06 14:29:13

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

Code:

#7 2014-05-06 14:37:42

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#8 2014-05-06 15:18:44

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#9 2014-08-28 14:06:45

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

#10 2014-08-28 14:22:11

Re: [Résolu] [SmartPocket] Bug avec firefox utilisé sans "Voir version ordinateur"

Pied de page des forums