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

[dc-85]

Euh, et ce code, je dois le mettre où? 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 :

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

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é

[Watilin]

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 html :

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

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 JS :

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

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 !

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> ?

[dc-85]

Aha!!!

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

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

Code :

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

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

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

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

[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

[dc-85]

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 :

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

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 :

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

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">

[Watilin]

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.

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.

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.

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

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 :

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

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 :

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

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 html :

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

<!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 html :

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

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