Bouton passer en plein écran (et inversement)

Version imprimable

23/10/2014, 01h07
dc-85

Bouton passer en plein écran (et inversement)

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:

<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?
23/10/2014, 23h56
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.
29/10/2014, 18h32
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!
30/10/2014, 05h58
Watilin
Essaye ça :
Code:

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 :P 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…

Citation:

Envoyé par Firefox

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

Citation:

Envoyé par Google Chrome

Uncaught TypeError: Illegal invocation

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

Code:

<input ... onclick="(this.requestFullscreen || this.mozRequestFullScreen || this.webkitRequestFullscreen)();"> 

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 ;)
30/10/2014, 17h32
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!!!

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:

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:

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

Euh, et ce code, je dois le mettre où? :oops: Dans mon fichier php? Dans la balise de mon bouton cliquable?

J'ai fait ça mais ça ne fonctionne pas, ni sous safari (je suis bien en 5.1) ni sous firefox...
Code:

1 2 3 4 5 6 7 <input type="image" src="img/plein_ecran.png" name="plein écran" onclick="function fullscreen(document.body) { return (document.body.requestFullscreen || document.body.webkitRequestFullscreen || document.body.mozRequestFullScreen || document.body.msRequestFullscreen).call(document.body); }">
Y a certainement un truc (ou plusieurs) que j'ai pas capté :mouarf:

Citation:

Envoyé par dc-85

Euh, et ce code, je dois le mettre où?

Dans une balise <script>.

Je viens de remarquer que pour afficher la page entière, avec le background et les barres de défilement, il faut demander le plein écran sur <html> au lieu de <body>. Pour accéder à <html> en JS, c'est document.documentElement.

Un petit aparte puisque tu dis débuter en JS : on préfère éviter les attributs comme onclick qui obligent à mélanger du JS avec le code HTML. Hier je t'ai parlé de gestionnaire onclick, il s'agit d'un gestionnaire d'évènement (en anglais event listener), c'est simplement une fonction que tu attaches à un évènement sur l'élément donné, grâce à la méthode addEventListener.
Code:

1 2 3 4 5 6 <input type="image" src="img/plein_ecran.png" name="plein écran" id="plein-ecran"> <script> // ici le code JavaScript </script>
Je place le code JS dans un autre bloc de code pour qu'il soit coloré correctement :
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 // je déclare la fonction fullscreen function fullscreen(element) { return (element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen).call(element); } // je récupère le bouton grâce à son id que j'ai rajouté dans le code HTML var $bouton = document.getElementById('plein-ecran') // j'attache le gestionnaire de click $bouton.addEventListener('click', function() { // j'appelle la fonction fullscreen sur le <html> fullscreen(document.documentElement); });
Attention à l'ordre des balises : le <script> doit être après le <button>, autrement le getElementById ne marchera pas. J'avoue, je ne t'ai pas tout dit… Mais on va garder ça pour plus tard si tu veux bien ;)

Pour l'occasion j'ai resssorti le Safari 5.1.7 que j'avais gardé sans trop savoir pourquoi sur mon Windoz XP, et j'ai testé webkitRequestFullscreen : je peux te garantir que ça marche !

Citation:

Envoyé par dc-85

Y a certainement un truc (ou plusieurs) que j'ai pas capté

Je pense que tu ne maîtrises pas les notions de base sur les fonctions.

J'ai une question à te poser, qui a son importance : est-ce que par hasard ton <input type="image"> se trouve dans une balise <form> ?

Aha!!!

Ca fonctionne sous Firefox... mais toujours pas sous Safari...

J'ai mis le code que tu m'as donné, à savoir
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 <div class="bouton2"> <input type="image" src="img/plein_ecran.png" name="plein écran" id="plein-ecran"> <script> // ici le code JavaScript // je déclare la fonction fullscreen function fullscreen(element) { return (element.requestFullscreen || element.webkitRequestFullscreen || element.mozRequestFullScreen || element.msRequestFullscreen).call(element); } // je récupère le bouton grâce à son id que j'ai rajouté dans le code HTML var $bouton = document.getElementById('plein-ecran') // j'attache le gestionnaire de click $bouton.addEventListener('click', function() { // j'appelle la fonction fullscreen sur le <html> fullscreen(document.documentElement); }); </script> </div>
Pour répondre aux autres éléments de ton mail, il est certain que je ne maitrise pas les notions de base sur les fonctons, ni pas grand chose d'autre d'ailleurs :ptdr: A part me débrouiller en html et en css....... d'où le fait que je galère avec mes pages en php qui mixent en plus du flash/javascript...

Et mon <input type="image"> ne se trouve pas dans une balise <form>... Si je remonte les différentes balises, j'ai

Code:

<?php <table><tr><td><div>

02/11/2014, 03h16
Watilin

Pour Safari, honnêtement, d'après les statistiques de canIuse.com, la version la plus utilisée aujourd'hui est la 7. Et ceux qui ne peuvent pas avoir de version récente sont les utilisateurs de PC, utilisateurs qui, sauf cas de masochisme aggravé, vont utiliser un autre navigateur. Ne perds pas ton temps avec la version 5 ;)

J'ai été jeter un œil à ta page en ligne et je l'ai soumise à un test que je fais souvent quand on me demande mon avis en HTML : je l'ai passée au validateur.

En quelques mots, ce que fait la validateur, c'est examiner le code HTML généré par ton serveur. Il reçoit le document HTML comme un le ferait un navigateur normal, et il examine le code HTML brut, celui qui apparaît quand tu fais Ctrl+U. Il ignore le code JavaScript et les ressources externes (images, flash, feuilles de style, etc.).

Les avertissements du validateur ne sont pas toujours à prendre au pied de la lettre. Avec l'expérience on apprend à faire la différence entre ce qui est simplement du tâtillonnage sur un petit écart par rapport au DOCTYPE (*), et ce qui est une réelle erreur de conception. Ici, les principales erreurs de conception portent sur ta <table>.

(*) Par exemple, la balise <embed> n'est pas standard mais on l'utilise couramment pour des raisons pratiques.

Tu as peut-être déjà lu ou entendu l'expression balisage sémantique. La sémantique c'est ce qui touche au sens, à la signification, au rôle. Chaque balise HTML a un rôle. Le rôle de <table> c'est de présenter des données sous forme de tableau, comme une feuille excel, une page d'agenda, ou encore une facture. Ce n'est pas fait pour la mise en page.

Là je suis en train de dévier vers la séparation du contenu et de l'apparence. Si tu changes ton DOCTYPE en XHTML 1.0 Strict (voir recommended list of DTDs) et que tu re-soumets ta page au validateur, tu verras que les attributs cellpadding, align, bgcolor et autres, ne sont plus autorisés. Quasiment tous les attributs qui gèrent l'apparence ont été supprimés, car c'est au CSS de gérer ça.

Si tu reconstruis ta page de manière sémantique, il y a de fortes chances que tu abandonnes cette <table>. Tu auras un code HTML beaucoup plus léger, facile à lire et qui va à l'essentiel. La mise en page sera entièrement faite par ton CSS.

Du reste, ta mise en page est assez classique : un corps principal à deux colonnes et un pied de page. La seule petite difficulté est de centrer verticalement la colonne de gauche, mais ça se résoud plutôt facilement. Je ne vais pas rentrer dans les détails ici car ce serait hors sujet ; si un jour tu poses une question dans le forum CSS, fais-moi un signe, je passerai jeter un œil ;)

Hello!

Pour Safari 5.1.7, moi je l'utilise encore et je suis sur mac... Ce qui est bizarre c'est que tu l'as testé et que la fonction fonctionne, mais pas chez moi...

Pour ce qui est de la sémantique de la page, c'est une page que j'ai prise telle quelle et un peu adaptée, d'où la construction en tableau et les balises embed... En plus, y a des choses que j'arrive pas à identifier dans le code et donc à modifier... Comme la position du lien simpleviewer en bas de la page ou la taille du titre de la galerie...

Je vais essayer de refaire une page plus correcte, mais j'ai jamais touché à du php, mais je suppose que c'est globalement les même balises que du xhtml et du css...

EDIT : en même temps, je viens de me rendre compte que le reste de mon site (qui n'est pas encore en ligne) que j'ai fait avec dreamweaver n'utilise pas de CSS, tout est dans les fichiers html, contrairement à la version précédente que j'avais créée avec mon notepad :?

Et autre chose qui me vient en tête : comment je change le doctype en xhtml strict? Dans mes fichiers html je suppose que c'est dans le code en "intro" de la page
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
? (celui là, c'est celui des pages faites sur dreamweaver)
Mais y a pas ce morceau de code dans mon fichier SimpleViewer.php (qui est appelé par index.php où je trouve
Code:

1 2 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

Citation:

Envoyé par dc-85

Pour Safari 5.1.7, moi je l'utilise encore et je suis sur mac... Ce qui est bizarre c'est que tu l'as testé et que la fonction fonctionne, mais pas chez moi...

Parce que le logiciel que j'ai testé est Safari/Windows. Ce n'est pas le même logiciel que Safari/Mac. Il y a une partie commune évidemment, mais la base de code n'est pas la même, donc il n'y a pas les mêmes bugs.

Citation:

Pour ce qui est de la sémantique de la page, c'est une page que j'ai prise telle quelle et un peu adaptée, d'où la construction en tableau et les balises embed...

Les balises <embed> ne posent pas de problème, c'est une pratique courante. Je soulignais juste le fait que le validateur les signale comme incorrectes et qu'il ne faut pas en tenir compte.

Citation:

En plus, y a des choses que j'arrive pas à identifier dans le code et donc à modifier... Comme la position du lien simpleviewer en bas de la page ou la taille du titre de la galerie...

Ça fait partie de l'objet Flash, tu ne peux pas y toucher.

Citation:

Je vais essayer de refaire une page plus correcte, mais j'ai jamais touché à du php, mais je suppose que c'est globalement les même balises que du xhtml et du css...

Ce n'est pas exactement ça. PHP génère du code HTML, il n'y a pas vraiment de « balise PHP », à part la balise <?php ... ?> qui est en fait un délimiteur. Je t'encourage à comparer ton code PHP avec le code généré (Ctrl+U), mets les deux codes côte-à-côte si ton écran est assez large, tu verras les endroits qui subissent des transformations et ceux qui restent inchangés. Ça a l'air idiot mais fais-le, moi ça m'a aidé à comprendre plein de trucs, tu verras ;)
Citation:
Et autre chose qui me vient en tête : comment je change le doctype en xhtml strict? Dans mes fichiers html je suppose que c'est dans le code en "intro" de la page
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">
? (celui là, c'est celui des pages faites sur dreamweaver)
Mais y a pas ce morceau de code dans mon fichier SimpleViewer.php (qui est appelé par index.php où je trouve
Code:

1 2 3 4 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
Le DOCTYPE c'est juste la première balise. Peu importe les sauts de ligne, ça marche avec et sans. En gros un DOCTYPE c'est ça :

Code:

<!DOCTYPE html PUBLIC "une adresse" "une autre adresse">

Ce sont ces deux adresses qui définissent le type de document.

Pour changer de DOCTYPE il suffit d'en copier un autre à la place. Dans la page que je t'ai donnée avant-hier (Recommended List of DTDs), il y a le DOCTYPE XHTML 1.0 Strict :
Code:

1 2 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
Quant aux attributs sur la balise <html>, des fois on les met, des fois on les met pas. L'attribut xmlns signifie « XML namespace » et il est obligatoire avec XHTML parce que c'est un mélange entre XML et HTML. En HTML seul tu ne dois pas le mettre.

L'attribut lang est une méta-donnée qui indique la langue principale du document. C'est bien pour les moteurs de recherche, et certains outils comme les CMS, widgets, etc. peuvent s'en servir. Ça donne un peu plus de richesse à ton document, à condition de mettre la bonne information bien sûr :roll: Pour une page en français, c'est lang="fr".

Et l'attribut xml:lang… Je suppose qu'il fait la même chose mais, honnêtement, j'avoue que j'ai l'impression qu'il ne sert à rien :aie: