L'application permet d'afficher et de naviguer dans une galerie de photos. Le nombre et le type des photos sont paramètrables via un fichier externe. On peut également classer les photos par chapitre, afin de faciliter la navigation.
La galerie se lance dès que l'application s'est initialisée, c'est à dire, une fois que les informations externes ont été correctement chargées et traitées.
La galerie affiche la première image et se met en pause.
Les images externes doivent être complètement chargées avant d'être affichées. Si une image est en cours de chargement, sa progression s'affiche. La durée du chargement est indépendante de l'application.
Pour naviguer dans la galerie, l'utilisateur dispose :
| 1 | Image précédente |
| 2 | Défilement automatique rapide en arrière |
| 3 | Défilement automatique en arrière |
| 4 | Arrête de défilement automatique |
| 5 | Déclenche le défilement automatique (normal) |
| 6 | Défilement automatique rapide en avant |
| 7 | Image suivante |
| 8 | Affichage en plein écran |
Vous devez diposer des fichiers suivants:
galerie.swf
galerie.xml
Au démarrage l'application récupérera les informations du fichier
galerie.xml
. Celui-ci doit être situé au même niveau dans l'arborescence. Si vous désirez cibler un autre fichier xml, lisez le paragraphe
Configuration des paramètres
.
Par commodité, il est recommandé également de placer toutes les images dans un même répertoire nommé
img
et situé au même niveau que l'application (même si ce n'est pas obligatoire).
La structure du fichier xml se présente sous la forme:
<?xml version="1.0" encoding="utf-8"?>
<galerie>
<chapitre titre="chapitre1">
<image src="img/01_grande_aigrette_fremond_a_2010.jpg" titre="Combat de grandes aigrettes" espece="Grande aigrette" auteur="" annee=""/>
<image src="img/02_grande_aigrette_avignon_p_2008.jpg" titre="Grande aigrette au lever du jour" espece="Grande aigrette" auteur="" annee=""/>
<image src="img/03_sterne_pierregarin_cochard_g_2010.jpg" titre="Sterne pierregarin" espece="Sterne" auteur="" annee=""/>
<image src="img/04_foulque_macroule_avignon_p_2010.jpg" titre="Combat" espece="Foulque macroule" auteur="" annee=""/>
</chapitre>
</galerie>
Cette structure globale doit être conservée pour le bon fonctionnement de l'application.
Les paramètres:
chapitre
: Vous pouvez modifier le titre du chapitre qui sera affiché en modifiant la valeur
titre
. L'application peut afficher jusqu'à cinq boutons de chapitre.
image
:
src
: indique le chemin
absolu ou relatif
(à l'emplacement de l'application) de l'image.
titre
: Le titre de l'image à afficher
espece
: le nom de l'espèce qui sera affiché.
auteur
: le nom de l'auteur.
annee
: l'année de la prise de vue.
Pour ajouter des images, dupliquez le nombre de fois nécessaires la balise
<image ... />
à l'intérieur du bloc chapitre et renseignez les valeurs comme vu précédemment.
Pour ajouter des chapitres, dupliquez (ou ajoutez) un bloc
<chapitre>...</chapitre>
à la suite du premier autant de fois que nécessaire et renseignez vos balises
<image ... />
à l'intérieur.
Si vous déclarez plus de 5 blocs
chapitre
, les blocs supplémentaires ne seront pas pris en compte.
Attention
: Veillez à ce que toutes les données soient contenues dans la balise globale
<galerie>...</galerie>
Par défaut, l'application posséde les paramètres suivants:
| Nom du paramètre | Valeur par défaut | Définition |
|---|---|---|
displayDuration
|
5 secondes | Durée d'affichage d'une image |
transitionDuration
|
0.5 secondes | Durée de transition entre deux images |
xmlURL
|
"galerie.xml"
|
chemin d'accés au fichier xml (relatif à l'application) |
speed
|
2
|
coefficient de vitesse pour les modes rapides |
Ces paramètres peuvent être configurés manuellement dans le code source de la page en utilisant la technique des
FlashVars
.
Dans le fichier
index.html
livré avec l'application, le flash est embarqué en utilisant le javascript
swfObject
. La définition des
flashVars
se fait dans l'en-tête, juste avant l'appel au script (en rouge dans l'extrait de code ci-dessous).
<script type="text/javascript">
var flashvars = {};
flashvars.xmlSource = "";
flashvars.displayDuration = "";
flashvars.transitionDuration = "";
flashvars.speed ="4";
var params = {};
params.bgcolor = "#000000";
params.allowfullscreen = "true"
swfobject.embedSWF("galerie.swf", "demo", "980", "600", "9.0.0", null,
flashvars
, params);
</script>
Il suffit d'affecter la valeur souhaitée à la variable à modifier.
Par exemple, ici, on a indiqué à l'application que la vitesse rapide est 4 fois la vitesse normale.
flashvars.speed ="4";
Remarque: Les valeurs attribuées doivent être entre guillemets.
Pour plus d'informations concernant cette méthode, reportez-vous à la documentation du script disponible ici
Pour les autres méthodes d'inclusion du flash, reportez-vous à la documentation correspondante.