Piwigo.org

f_trt · 2011-05-05 00:49:02

Je souhaite adapter le thème DARK à l'affichage de l'IPAD 2 qui posséde une résolution d'écran de 1024x768

Mon but étant de pouvoir afficher les images en lui octroyant la plus grand plcace possible.
Pour cela je laisse le minimum vital au dessus de l'image.
Je remonte les deux miniatures de navigation à droite de l'image et j'affiche la légende en dessous de ces miniatures.

J'ai donc commencé un petit travail dessus.
Dans un premier temps je pense modifier uniquement un petit peu picture.tpl

L'idéal pour la suite :
Permettre d'avancer et reculer à l'aide du tactile en faisant glisser le doigt (je ne sais pas si javascript version safari est enrichi pour le tactile ?)
Détecter automatiquement l'ipad pour switcher sur le bon thème directement, je ne pense pas non plus que ce soit possible sans un plugin.

Voici un premier exemple de résultat :

ddtddt · 2011-05-05 06:55:54

Super :-)

Zaphod · 2011-05-05 09:49:02

f_trt a écrit:
Je souhaite adapter le thème DARK à l'affichage de l'IPAD 2 qui posséde une résolution d'écran de 1024x768:

Sur les sites de stat, on peut voir que cette résolution d'écran est une des plus courantes...
Donc dans l'absolu, n'importe quel thème doit être bien affiché en 1024x768 (ce qui n'est pas évident à faire... car c'est vraiment minuscule).

La navigation spécifique pour ipad c'est une bonne idée, le switch du theme auto aussi.

Gotcha · 2011-05-05 14:58:37

Pèle mêle :
http://dev.neowebmag.com/php/detecter-n … tilisateur
http://www.guillaumevoisin.fr/blog/jque … vec-jquery
http://blog.ebuildy.com/2010/06/25/dete … droid.html
http://www.diplotomatic.com/2010/07/21/ … res-bases/

f_trt · 2011-05-09 15:17:40

Merci pour ces liens Gotcha

J'ai un petit contre-temps et qui m'empêche de consacrer beaucoup de temps pour l'instant à cette conversion.

De mon côté j'ai trouvé les balises meta à ajouter qui font que le thème ou je dirais la galerie se comporte comme une application.
Avantage cela enlève la partie haute de safari et nous laisse ainsi de la place.

Je bute actuellement sur le fait que le moindre clique sur une image ou un lien nous fait repasser sous safari (à priori il faudrait faire un rechargement de page via ajax cela permettrait de rester en mode application)

<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">

Pour ajouter un peu au lien de GOTCHA
Un tuto pour transformer son site en application

Du coup en mode appli si cela réussi on gagne encore de la place pour l'image voir l'exemple ci-dessous

Il y a aussi un truc qui me chiffonne dans la gestion des thèmes, si il y a présence d'une image en haute def, l'image s'enrichie alors d'un lien et surtout un paragraphe indiquant "cliquez pour afficher en grand" c'est peuplé par {$ELEMENT_CONTENT} cela génère donc un <p>Cliquez pour agrandir l'image</p>

Malhereusement même ne mettant un no display via css cela casse la mise en page si quelqu'un peut me donner une piste pour eventuellement supprimer dans un premier temps ce <p>Cliquez pour agrandir l'image</p> je suis preneur

f_trt · 2011-05-12 16:08:19

ça avance doucement, voici ci-dessous ce que j'ai retenu pour la présentation d'une image

La navtool est passée à droite, cela permet d'avoir les boutons piles poils sous le pouce pour faire défiler les photos et permettre de gagner des pixels pour la photo, du coup j'ai sucré aussi les vignettes "avant" et "suivante".

J'ai augmenté la taille de la barre de navigation au dessus pour la rendre plus confortable au doigt

Il me reste encore un petit problème avec cette vue:
- l'ipad adapte bien tout lors du passage automatique de paysage à portrait, mais lors d'un retour en mode paysage il laisse sortir un peu l'image de l'écran.

Dernière modification par f_trt (2011-05-12 19:04:50)

ddtddt · 2011-05-12 22:32:58

Cool ci cela avance :-)
Je n'ai pas Ipad pour tester mais si tu as une version en ligne je peux essayer de voir pour effectuer des test.

f_trt · 2011-05-20 22:46:48

J'ai mis le zip sur un billet dédié sur un de mes blogs:

- www.myouaibe.com/index.php/post/Theme-I … rie-PIWIGO

Idéalement il faudrait encore :
- agir sur la feuille de style via javascript lorsque l'on passe du mode portrait a paysage en détectant l'événement provoqué par le changement d'orientation de l'écran (Des liens qui devraient aider : Lien 1, Lien 2)
- faire un plugin pour switch automatique du thème quand détection d'un IPAD

Au passage un des thèmes bien adapté à l'IPAD est STRIPPED avec son atout de cachage du menu et le passage de next a prev à l'aide d'une grande zone de detection de chaque côté de l'image ce qui permet avec les pouces d'agir facilement.

Dernière modification par f_trt (2011-05-20 22:54:05)

f_trt · 2011-05-21 09:32:33

Je viens de découvrir cela http://neteye.github.com/touch-gallery.html cela permet de passer d'une photo à une autre avec le glissé du doigt, je vais essayer de l'intégrer.

En fait pas trop possible je pense car nous pouvons avoir une grande liste de photo qu'il faudrait dans la même page. Par contre je devrais pouvoir m'en inspirer pour declancher le next ou le prev par glissé du doigt et du coup nous nous approcherions du tactile.

Bon j'ai implementé dans la version 0.2 http://plugins.jquery.com/content/touchswipe-124

Le défilement des photos droite gauche au doigt fonctionne, problème le glissé verticale du doigt sur l'image ne fait plus monter ou descendre la page

Dernière modification par f_trt (2011-05-21 14:25:06)

f_trt · 2011-05-24 00:25:29

Version 0.3 dispo, j'ai mis une petite video pour que vous puissiez voir un peu, j'avais pas mis un bon éclairage alors c'est sombre et baveux, mais vous pourrez voir un peu de navigation.

Doxaid · 2011-05-24 23:51:07

Hâte de voir le résultat final !

Perso j'attends avec impatience la possibilité de consulter ses photos piwigo sur iphone (ipad).

Avec une prise en charge similaire au gestionnaire photo ios.

(La prise en charge existe avec facedebook ou jaipho (http://www.jaiphodemo.info/ par exemple))

Bon courage

Gotcha · 2011-05-28 20:20:39

f_trt a écrit:
Version 0.3 dispo, j'ai mis une petite video pour que vous puissiez voir un peu, j'avais pas mis un bon éclairage alors c'est sombre et baveux, mais vous pourrez voir un peu de navigation.

Je redonne le lien : http://www.myouaibe.com/index.php/post/ … rie-PIWIGO

C'est prometteur. Merci ;-)

Piwigo.org

Annonce

#1 2011-05-05 00:49:02

Adaptation thème dark pour IPAD

#2 2011-05-05 06:55:54

Re: Adaptation thème dark pour IPAD

#3 2011-05-05 09:49:02

Re: Adaptation thème dark pour IPAD

f_trt a écrit:

#4 2011-05-05 14:58:37

Re: Adaptation thème dark pour IPAD

#5 2011-05-09 15:17:40

Re: Adaptation thème dark pour IPAD

#6 2011-05-12 16:08:19

Re: Adaptation thème dark pour IPAD

#7 2011-05-12 22:32:58

Re: Adaptation thème dark pour IPAD

#8 2011-05-20 22:46:48

Re: Adaptation thème dark pour IPAD

#9 2011-05-21 09:32:33

Re: Adaptation thème dark pour IPAD

#10 2011-05-24 00:25:29

Re: Adaptation thème dark pour IPAD

#11 2011-05-24 23:51:07

Re: Adaptation thème dark pour IPAD

#12 2011-05-28 20:20:39

Re: Adaptation thème dark pour IPAD

f_trt a écrit:

Pied de page des forums