Générateur de visualiseurs d'images tous écrans pour présenter des photos sur un site internet

Un visualiseur d'images est un fichier HTML qui contient des images.

Un exemple de visualiseur

Il peut être créé par un script PHP que j'appelle générateur de visualiseurs d'images.

Version sans dossier vignettes pour un petit nombre de photos

1^e étape: sur l'ordinateur, préparer le dossier du visualiseur

Le dossier du visualiseur est le dossier de l'ordinateur qui correspond au dossier du serveur internet destiné à la visualisation des images. Il sert de «dossier racine» pour tout ce qui suit.

Télécharger (download) le générateur de visualiseurs, puis le décompresser.

Dans le dossier du visualiseur, enregistrer les deux fichiers generateur-itec.html et generateur-itec.php

2^e étape: sur l'ordinateur, préparer le dossier des photos

Le dossier des photos originelles non redimensionnées n'apparaît pas dans le site internet. Dans le dossier du visualiseur, créer le dossier des photos qui contient de préférence les images redimensionnées, par exemple de taille maximale 1440 × 1080. Dans l'exemple «Morteys», il s'agit du sous-dossier «Morteys».

3^e étape: monter sur le serveur (upload)

Monter le dossier du visualiseur sur le serveur. Dans l'exemple joint, il s'appelle www.deleze.name/marcel/exemples/itec, avec le sous-dossier www.deleze.name/marcel/exemples/itec/Morteys.

Dans le dossier dossier du visualiseur, activer la mise en cache des images: pour un serveur Apache, il peut s'agir d'un fichier .htaccess

4^e étape: exécuter le générateur en cliquant sur le bouton "Créer le visualiseur"

Le générateur generateur-itec.html doit être exécuté sur le serveur qui héberge les photos. L'appel du générateur se fait par son URL. Dans notre exemple, il s'agit de www.deleze.name/marcel/exemples/itec/generateur-itec.html. Le générateur se présente sous la forme d'un formulaire HTML (zone grisée ci-dessous). Son exécution est lancée en cliquant sur le bouton Créer le visualiseur.

5^e étape: installer le visualiseur

La page reçue en retour est le visualiseur.

• Télécharger le visualiseur dans le dossier du visualiseur. Proposé sous le nom visualiseur-01.html, il se nomme tessin.html dans notre exemple.
• Le visualiseur peut être édité et modifié à volonté, à condition de respecter la syntaxe HTML5, ce qui permet d'ajouter une introduction et des sous-titres. Un commentaire de chaque photo peut être inséré dans la ligne vide située au-dessous du lien vers l'image.
• Le visualiseur doit être monté sur le serveur dans le même dossier que generateur-itec.php
• Il est conseillé d'enregistrer le formulaire generateur-itec.html avec les champs remplis sur le serveur afin de faciliter les éventuelles modifications futures du visualiseur.

6^e étape: diffuser l'adresse du visualiseur

L'adresse du visualiseur, par exemple www.deleze.name/marcel/exemples/itec/mortheys.html, peut être distribuée par messagerie.

Corrections

Pour modifier l'ordre des images

Les photos sont ordonnées selon l'ordre lexicographique, c'est-à-dire selon une sorte d'ordre alphabétique dont l'alphabet a été augmenté avec les chiffres et d'autres symboles ASCII. Pour changer l'ordre des photos, il suffit de les renommer, dans l'ordinateur et surtout dans le serveur. Une méthode radicale consiste à les numéroter 01-, 02-, 03-, ... et à placer les numéros au début du nom de fichier:

• dans l'ordinateur, renommer des photos du dossier des photos;
• sur le serveur, renommer des photos du dossier des photos.

Pour ajouter ou supprimer des images

Pour ajouter une ou plusieurs photos, il suffit de les ajouter dans le dossier des photos de l'ordinateur puis de les monter dans le serveur.

Pour supprimer une ou plusieurs photos, il suffit de les supprimer dans le dossier des photos de l'ordinateur puis de les supprimer dans le serveur.

Le script PHP s'adapte automatiquement aux images qui existent dans le dossier des photos du serveur.

Pour un plus grand nombre d'images

il faut utiliser une version avec dossier de vignettes

Liens vers les versions

Le critère déterminant est la vitesse à laquelle le visualiseur affiche les photos.

• ITEA: version avec dossier de vignettes capable de traiter un grand lot de photos.
• ITEC: version simple sans dossier de vignettes pour un petit nombre de photos (c'est la présente page).

Date de la dernière version: consulter le lien "Scripts PHP" en bas de page.