Tétraèdre

Navigateur d'images: visionneuse de photos pour internet

Version pour écran d'ordinateur

Scripts PHP

Télécharger (download) les programmes PHP

Télécharger navim.zip
Décompresser le fichier navim.zip
Extraire les trois fichiers navim0.php, navim1.php, repert.php

Installer (upload) les programmes PHP

Sur le serveur, créer un dossier pour visualiser les images. A titre d'exemple, ce dossier sera dénommé navim
Monter les trois fichiers navim/navim0.php, navim/navim1.php, navim/repert.php

Version de base

Télécharger les images originelles

Créer un sous-dossier pour un lot d'images. A titre indicatif, un lot d'images comporte entre 1 et 160 images. Pour l'exemple, ce dossier sera dénommé navim/berlin
Y télécharger les images (upload) dans leur définition originelle (pour offrir à l'utilisateur la fonction téléchargement).
navim/berlin/IMG_7502.JPG, ...

Placer les vignettes dans le sous-dossier 160x160

Avec un logiciel adéquat, par exemple VSO Image Resizer, créer des images ayant au maximum 160 pixels de largeur et au maximum 160 pixels de hauteur. En conservant le même nom de fichier, placer ces "vignettes" dans le sous-dossier navim/berlin/160x160, puis télécharger (upload) le dossier avec son contenu
navim/berlin/160x160/IMG_7502.JPG, ...

Placer les images de visualisation dans le sous-dossier 810x810

Avec un logiciel adéquat, par exemple VSO Image Resizer, créer des images ayant au maximum 810 pixels de largeur et au maximum 810 pixels de hauteur. En conservant le même nom de fichier, placer ces images destinées à la "visualisation à la taille de l'écran" dans le sous-dossier navim/berlin/810x810, puis télécharger (upload) le dossier avec son contenu
navim/berlin/810x810/IMG_7502.JPG, ...

Pour les images 810x810 qui manqueraient à l'appel, le script téléchargera les images originelles.

Prendre note du lien vers la page de vignettes

L'URL à donner est celle du programme navim0.php
Cette adresse est à compléter avec l'argument GET suivant:
dir= "dossier contenant les images originelles par rapport au dossier du script navim0.php"; dans notre exemple:
http://monsite/navim/navim0.php?dir=berlin

Exemple 1

Exemple sans liens de navigation, ni commentaire:
navim0.php?dir=1-berlin_2013

Liens de navigation (fonction visionneuse)

Liens de navigation

La fonction visionneuse est réalisée par des liens de navigation placés auprès de chaque photo visualisée:
< Image précédente | Image suivante >

Créer les listes des prédécesseurs et successeurs

L'URL à donner est celle du programme repert.php
Cette adresse est à compléter avec l'argument GET suivant:
dir= "dossier contenant les images originelles par rapport au dossier de repert.php"; dans notre exemple:
http://monsite/navim/repert.php?dir=berlin
Exemple de résultat obtenu

Installer la liste des prédécesseurs et successeurs

Créer le dossier local navim/berlin/php
Y enregistrer la page reçue sous le nom navim/berlin/php/repert.php
Monter le dossier navim/berlin/php sur le serveur.

Commentaires

Editeur UTF-8

A chaque commentaire d'image correspond un fichier texte. Il en est de même pour le titre et le lien de retour. Ces fichiers doivent être rédigés avec un éditeur de textes bruts (c'est-à-dire dépourvu du formatage habituellement ajouté par les traitements de textes). De plus, ce texte doit être encodé en UTF-8. Sous Windows, on peut utiliser Bloc-notes, en spécifiant UTF-8 lors de l'enregistrement. On peut aussi utiliser l'éditeur de texte brut UTF-8.
Le contenu du fichier peut comporter des balises HTML, par exemple <br> pour signifier un retour à la ligne ou <i>Nom propre</i> pour un nom propre en italique.
Créer le sous-dossier local des commentaires navim/berlin/com

Commentaire d'une photo

Le commentaire d'une photo doit porter le même nom que la photo, mais avec l'extension .txt et être placé dans le sous-dossier com. Par exemple, le commentaire de la photo berlin/IMG_7502.JPG s'appelle navim/berlin/com/IMG_7502.txt
Pour placer des balises HTML dans le commentaire d'une photo, il faut tenir compte du fait que le script place le titre entre les balises <b>Commentaires</b>. Pour ôter ce formatage, on peut écrire: </b>Commentaires<b>.

Titre de la page de vignettes et texte introductif

Le titre de la page de vignettes berlin doit s'appeler navim/berlin/com/titre.txt
Ce titre vient remplacer le titre par défaut Lot de photos téléchargeables une à une
Pour placer des balises HTML dans le titre, il faut tenir compte du fait que le script place le titre entre les balises <p><b><big>Titre</big></b></p>.
Pour placer un texte introductif entre le titre et les vignettes, on utilisera les balises suivantes: Titre</big></b></p>Texte introductif<p><b><big>. Par contre, dans la partie Titre proprement dit, les balises ne sont pas tolérées.

Lien de retour au bas de la page de vignettes et texte de bas de page

Le lien de retour au bas de la page de vignettes berlin doit s'appeler navim/berlin/com/lien.txt
Le contenu du fichier est un lien HTML vers une page d'accueil; dans notre exemple: <a href="index.html">Navigateur d'images</a>.
On peut y adjoindre un texte de bas de page.

Installer les commentaires

Monter le dossier navim/berlin/com sur le serveur.

Contact Accueil > PHP