Discussion :

[dc-85]

Bonjour,

Je suis novice en php (que j'utilise pour créer des galeries photos via SimpleViewerAdmin). Je suis à la recherche d'une solution pour inclure à mes galeries un bouton qui permette de passer en plein écran quand on clique dessus et qui ramène à l'écran normal quand on reclique dessus. Les galeries SimpleViewer normales permettent ça mais ne sont pas en php...

Juste à coté de ce bouton plein écran, j'ai placé un bouton retour à la page précédente avec ce code :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input type="image" src="img/precedent.png"  name="précédent" onclick="javascript:history.back()">

Le mieux, ce serait que le bouton plein écran ait le mê^me genre d'architecture... (en tout cas au niveau de l'affichage)

Quelqu'un pour m'aider?

[Tsilefy]

Bonsoir,

PHP est un langage côté serveur, il ne peut pas décider de la taille de l'affichage dans le navigateur. Ce genre de problèmes se règle avec javascript.

[dc-85]

Bonsoir,

Personne d'autre pour me donner un coup de main là dessus? Je suis pas contre le javascript, mais j'y connais rien!

Dans la version de base de simpleviewer (mais moins complète), il y a une page xml qui appelle un js où le fullscreen est sans doute caché, mais comment le récupérer et l'appeler a partir de ma page php?

Je peux transmettre les fichiers xml et js si besoin! Ou bien, ils sont téléchargeables ici

Merci d'avance pour votre aide!

[Watilin]

Essaye ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
<input type="image" src="img/precedent.png"  name="précédent"
       onclick="(this.requestFullscreen || this.mozRequestFullScreen || this.webkitRequestFullscreen).call(this)">

C'est pas forcément ce qu'il y a de plus propre Mais l'idée est là. L'API JavaScript Fullscreen est encore toute récente et pas bien implémentée par les différents navigateurs.

J'ai été forcé d'avoir recours à une bidouille à base de call : les navigateurs me sortaient une erreur bizarre…

TypeError: 'mozRequestFullScreen' called on an object that does not implement interface Element.

Uncaught TypeError: Illegal invocation

… Et j'ai fini par comprendre que le this ne passait pas en faisant simplement comme ça :

Code html :

Sélectionner tout - Visualiser dans une fenêtre à part

<input ... onclick="(this.requestFullscreen || this.mozRequestFullScreen || this.webkitRequestFullscreen)();"> <!-- ne marche pas -->

Si tu as ce genre de messages un jour, tu sauras d'où ça vient

Note que ce sera certainement plus lisible si tu places le gestionnaire onclick dans un script, en plus ça te permettra de déterminer à l'avance quelle variante de la fonction (moz, webkit ou sans préfixe) tu dois utiliser.

Attention à la casse : Mozilla dit FullScreen avec un S majuscule ; les autres disent Fullscreen avec un s minuscule.

Ça va sans doute demander un peu d'adaptation avec CSS pour avoir quelque chose de joli. En l'état actuel des choses, Firefox a tendance à modifier le ratio des images et ça donne une effet déformé tout à fait désagréable.


Quant au SimpleViewer, il triche : il utilise un objet Flash.

PS de dernière minute : je viens de voir qu'il existe la fonction msRequestFullscreen sur IE11, il faut donc rajouter cette variante à la liste, ce qui rallonge le code d'autant plus… Encore une bonne raison pour mettre tout ça dans un script externe

[dc-85]

Ben zut, ça fonctionne pas! En copiant le morceau de code, la fenêtre va bien en plein écran, mais ce qui est affiché, c'est uniquement l'icone du bouton plein écran... Et pas de réaction sous safari...

Si simpleviewer triche et utilise du flash, j'ai rien contre, et si c'est possible d'utiliser la même chose, je prends!!!

Et cette petite manip aura eu l'avantage de me faire remarquer une erreur d'affichage sous firefox (que je n'arrive pas à régler!) quelqu'un aurait une idée? Ma page se trouve à[URL="http://www.macrobapt.be/galeries/index.php?album=Tournage_sur_bois"][cette adresse/URL]

Merci!!!

[Watilin]

Tu peux choisir n'importe quel élément à afficher en fullscreen. Si tu veux que ce soit la page entière, utilise document.body.

Voici un exemple de fonction qui te permet d'invoquer le plein écran sur n'importe quel élément, sous n'importe quel navigateur compatible :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
function fullscreen(element) {
   return (element.requestFullscreen ||
      element.webkitRequestFullscreen ||
      element.mozRequestFullScreen ||
      element.msRequestFullscreen).call(element);
}

Tu peux l'appeler sur le <body> comme ceci :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

fullscreen(document.body);

Sous Safari ça marche depuis la version 5.1, vérifie que tu es à jour. Le préfixe est webkit, le même que Chrome.
Voir : http://caniuse.com/#search=fullscreen

Je suis pas expert en Flash donc si tu veux adopter cette solution, il te faudra l'aide de quelqu'un d'autre