Guide — Créer une galerie fixe

ℹ

Comprendre le système en 2 fichiers

Une galerie fixe repose sur deux fichiers qui travaillent ensemble :

Un fichier de données JS (ex. fixed-gallery-data.mon-groupe.js) — c'est là que vous listez manuellement toutes vos images. Il n'y a aucun scan automatique.
Une page HTML (ex. galerie.html) — elle affiche la galerie et le lightbox. Elle est toujours identique ; seul le fichier de données change d'une galerie à l'autre.

Le moteur de rendu (js/galleries-fixes/fixed-gallery-renderer.js) est partagé par toutes les galeries fixes du site. Vous n'avez jamais besoin de le modifier.

Fichiers utiles à connaître js/galleries-fixes/fixed-gallery-renderer.js — moteur (ne pas toucher)
js/galleries-fixes/data/exemples/fixed-gallery-data.example.js — modèle de données vierge
templates/annexes/template_galerie_fixe.html — modèle de page HTML

1

Créer le fichier de données JS

Dans le dossier js/, créez un nouveau fichier en copiant fixed-gallery-data.example.js. Nommez-le selon votre galerie, par exemple :

📁 js/galleries-fixes/data/fonctions-equipes/fixed-gallery-data.mes-personnages.js

window.FIXED_GALLERY = {
  title: "Mes Personnages",
  description: "Une sélection manuelle de personnages importants.",
  items: [

    // ── Premier personnage ──────────────────────────────────────
    {
      src:     "../images/naruto/kakashi.png",
      title:   "Kakashi Hatake",
      alt:     "Portrait de Kakashi Hatake",
      caption: "Maître copiste, Seigneur des Shinobi",
      badge:   "Naruto"
    },

    // ── Deuxième personnage ─────────────────────────────────────
    {
      src:     "../images/onepiece/shanks.png",
      title:   "Shanks",
      alt:     "Portrait de Shanks",
      caption: "Empereur de la mer",
      badge:   "One Piece"
    }

    // Ajoutez autant d'items que nécessaire, séparés par des virgules.
  ]
};

Conseil nomenclature Utilisez toujours le préfixe fixed-gallery-data. suivi d'un identifiant en minuscules avec des tirets. Exemple : fixed-gallery-data.veilleurs-du-coeur.js

Attention aux chemins d'images Le chemin src est relatif à la page HTML qui chargera ce fichier, pas au fichier JS. Si votre page est dans annexes/mon-groupe/, utilisez ../images/....

2

Créer la page HTML

Copiez templates/annexes/template_galerie_fixe.html dans votre dossier de destination (par exemple annexes/mon-groupe/galerie.html) et remplacez les variables entre crochets :

Variable dans le template	Ce qu'il faut mettre
`[TITRE_PAGE]`	Titre de l'onglet navigateur — ex. Mes Personnages \| Galerie
`[ROOT_PREFIX]`	Chemin relatif vers la racine du site. — Si votre page est à la racine : `./` — Si dans `annexes/mon-groupe/` : `../../` — Si dans `annexes/` : `../`
`[TITRE_GALERIE]`	Titre affiché dans le `<h1>` et le `<h2>` — ex. Mes Personnages
`[DESCRIPTION_GALERIE]`	Courte description affichée sous le titre — ex. Sélection manuelle de personnages.
`[RETOUR_LIEN]`	URL du lien "Retour" dans le menu — ex. `../../personnages.html`

Ensuite, changez le <script> de données pour pointer vers votre fichier JS :

<!-- AVANT (dans le template) -->
    <script src="[ROOT_PREFIX]js/galleries-fixes/data/exemples/fixed-gallery-data.example.js"></script>

<!-- APRÈS (remplacez par votre fichier) -->
    <script src="../js/galleries-fixes/data/exemples/fixed-gallery-data.example.js"></script>

Ordre des scripts — important ! L'ordre dans le <body> doit toujours être :
1. hamburger-menu.js
2. votre fichier de données (il définit window.FIXED_GALLERY)
3. fixed-gallery-renderer.js (il lit window.FIXED_GALLERY)

3

Vérifier les chemins

Avant d'ouvrir dans le navigateur, passez en revue ces points :

CSS — les deux balises <link> pointent vers [ROOT_PREFIX]css/general.css et [ROOT_PREFIX]css/galerie.css. Vérifiez que [ROOT_PREFIX] a été remplacé.
Images dans le fichier JS — chaque src doit être un chemin valide depuis la page HTML. Testez en ouvrant une image directement dans le navigateur.
Scripts JS — les trois <script src="..."> en bas de page doivent tous avoir des chemins corrects.

Astuce de débogage rapide Ouvrez la console du navigateur (F12 → onglet Console). Si une image ne se charge pas, une erreur 404 Not Found s'affichera avec le chemin exact qui est incorrect.

4

Tester dans le navigateur

Ouvrez votre page HTML dans le navigateur et vérifiez :

Le titre et la description affichés correspondent à ceux du fichier JS.
Toutes les images apparaissent dans la grille.
Le compteur (ex. 7 image(s)) affiche le bon nombre.
Un clic sur une image ouvre le lightbox.
Les touches ← / → naviguent entre les images dans le lightbox.
La touche Échap ou le bouton ✕ ferme le lightbox.
Un clic en dehors de l'image (sur le fond sombre) ferme aussi le lightbox.

Message "Aucune image" Si vous voyez le message "Aucune image pour cette galerie", c'est que le tableau items est vide ou que le fichier de données n'a pas bien été chargé. Vérifiez l'ordre et les chemins des scripts.

★

Référence : propriétés d'un item

Chaque objet dans le tableau items accepte les propriétés suivantes :

Propriété	Obligatoire	Description
`src`	✅ Oui	Chemin relatif vers l'image. Ex. `../images/naruto/kakashi.png`
`title`	✅ Oui	Nom affiché sous l'image dans la grille et dans le lightbox si pas de `caption`.
`alt`	Recommandé	Texte alternatif pour l'accessibilité. Si absent, le `title` est utilisé à la place.
`caption`	Optionnel	Légende affichée sous l'image dans le lightbox. Si absent, le `title` est utilisé.
`badge`	Optionnel	Étiquette d'univers affichée sur la carte (ex. "One Piece"). Si absent, aucun badge ne s'affiche.

✓

Checklist rapide

Avant de considérer la galerie comme terminée, cochez chaque point :

J'ai créé js/galleries-fixes/data/fonctions-equipes/fixed-gallery-data.mon-nom.js avec window.FIXED_GALLERY = { ... }
Le title et la description sont remplis dans le fichier JS
Chaque item a au minimum src et title
J'ai copié le template HTML et remplacé toutes les variables [...]
Le [ROOT_PREFIX] est correct selon la profondeur du dossier
Le <script src> de données pointe vers mon fichier JS (pas vers example.js)
L'ordre des scripts est respecté : données → renderer
La galerie s'affiche correctement dans le navigateur (grille + lightbox)
Aucune erreur 404 dans la console F12