Navigation améliorée

Ce guide va vous apprendre comment modifier l'apparence et les caractéristiques des albums générés, en allant plus loin que ce qui peut être fait à l'aide de l'interface utilisateur de JAlbum. Comme il n'est pas possible d'avoir toutes les possibilités de réglage dans l'interface, rien n'a été figé dans JAlbum afin de ne pas limiter les possibilités de création. Ne soyez pas effrayé par les lignes de codes qui vont suivre. Si vous avez quelques connaissances de base en HTML, cela sera suffisant.

Les Albums créés avec JAlbum ont toujours des boutons "next" (suivant) et "previous" (précédant) pour simplifier la navigation entre les images, mais comment faire si vous souhaitez disposer également des boutons "first" (premier) et "last" (dernier)? Ce guide va vous montrer comment procéder. Suivez le guide pas à pas et vous serez surpris de voir à quel point il est facile de faire d'autres modifications sur le même principe.

Vue des boutons "précédant" et "suivant" dans le skin "standard"

1. Ouvrir le skin pour l'édition

Si vous avez "joué" un peut avec JAlbum vous avez remarqué que l'on peut générer de nombreux style ou thèmes pour les albums. Ces thèmes sont ici appelé des "skins". Nous allons modifier le skin "standard". Cliquez sur l'icône "crayon" après avoir sélectionné le skin "standard" skin. Un dossier s'ouvre sur votre bureau. (Si cela ne fonctionne pas sur votre ordinateur, ouvrez le dossier ou est installé JAlbum puis le dossier skins/standard)

Ouvrir le skin standard pour l'édition

Le dossier avec le skin "standard"

Nous allons nous concentrer sur le dossier des gifs et sur le fichier slide.htt. Le dossier des gifs contient tous les éléments graphiques utilisés dans l'album. Nous allons créer ici deux nouveaux gifs, les boutons : first.gif et last.gif, et finalement nous éditeront le fichier slide.htt afin d'ajouter les lignes de commande nécessaires pour les afficher. mais commençons par les nouveaux boutons gif.

2. Créer les graphiques des boutons

Ouvrez le dossier des gifs et glissez les images dans votre programme de dessin favori. J'utilise Paint Shop Pro, mais vous pouvez utiliser n'importe quel logiciel capable de manipuler les images gifs comme paint par exemple. Utilisez les fichiers "next.gif" et "previous.gif" comme base pour créer les images "first.gif" et "last.gif". Cela peut être le moment de donner une petite touche personnelle à ces boutons si vous avez quelques peut d'imagination...

Utilisation de Paint Shop Pro pour dessiner un bouton de navigation "last"

3. Edition du fichier slide.htt

Maintenant démarrer Notepad ou tout autre éditeur de texte et ouvrez le fichier slide.htt. Conseil ! utilisez la fonction "Glisser" cela fait gagner beaucoup de temps. Repérer la section où il y a un commentaire "Previous button" HTML comment. Ajoutez le code suivant avant ce commentaire:

<!-- First button -->
<A HREF="$firstPage"><IMG SRC="../gifs/first.gif" BORDER=0 ALT="First page"></A>

Utilisation de Notepad pour ajouter le lien de navigation firstPage. L'ajout est en surbrilliance

Comme vous pouvez le voir un fichier slide.htt ressemble beaucoup à un fichier HTML ordinaire. C'est en fait le fichier "Modèle" qui sera utilisé par le skin standard pour créer vos pages. Je suppose que vous avez remarqué que le code $firstPage dans l'exemple ci-dessus, est une "variable" qui sera remplacée par un lien vers votre première page lors de la génération de l'album. De même il y aussi une variable a $lastPage que vous pouvez utiliser de la même manière pour créer un lien vers la dernière page. Insérez la ligne de code pour "lastPage" après la ligne code pour "next".

JAlbum a beaucoup d'autres variables que vous pouvez utiliser. Si vous vous demandez à quoi correspond l'élément <ja:if , cela est expliqué dans la rubrique Création de skins, mais tout d'abord, essayer la nouvelle page, que nous avons presque terminé.

4. Créer un album

Sauver les modifications faites dans slide.htt. Il est temps de voir le résultat. Choisissez votre dossier images, sélectionnez le skin "standard" et cliquez sur "Créer l'album". Visualisez l'album et cliquez sur une vignette pour aller sur une image, et voilà le résultat. Si vous n'avez pas fait d'erreur, il y a deux nouveaux boutons de navigation, s'il ne sont pas présent , vérifiez votre code dans le fichier "slide.htt" sauver et re-essayez.

Visualisation des effets du changement en créant un album

L'album avec les nouveaux boutons w first et last

J'espère que cet exemple aura permis de vous montrer comment il est possible de créer tout ce que vous voulez avec JAlbum. Vous avez juste besoin de quelques connaissances en HTML (et CSS) pour créer de nouveau skins. Si vous réalisez quelque chose de merveilleux, envoyez le moi pour que je puisse l'intégrer dans JAlbum. Ajoutez votre nom à l'intérieur du modèle afin de vous faire un peut de pub lorsque les autres utilisateurs choisiront votre skin pour leurs albums web.