Les tutoriels de Jardinamel

1. Premières étapes de base pour la création d'un album avec jAlbum

Cette documentation s'applique à la dernière version de BananAlbum: v6.1

Pensez à vérifier de temps en temps, car il ya beaucoup de mises à jour ...

BananAlbum a de nombreuses possibilités et est très personnalisable. Vous pouvez créer des albums simples, mais réaliser aussi des albums pour sites Internet avec une structure de menu très bien conçue. Les BananAlbum peuvent facilement être mis en oeuvre dans un site existant.
Vous pouvez personnaliser BananAlbum pour le rendre parfaitement adapté à vos besoins. Vous avez le choix entre différents styles et polices de caractères, choisissez vos propres couleurs et de défininissez la position et la taille des vignettes et des images.

Il existe diverses façons de travailler avec BananAlbum.
Il est le plus communément utilisé comme un skin de l'application jalbum, générateur libre d'albums. Pour les utilisateurs de Mac, j'ai créé une application de base, le BananAlbumCreator.
BananAlbum est également disponible en tant que modèle de galerie pour Google Picasa, ainsi que Adobe Photoshop
Voici une très courte FAQ:

Les touches de direction ne fonctionnent pas en mode plein écran.
Le Player Flash désactive le clavier en mode plein écran... Ce problème sera résolu dans le prochain PlayerFlash 10!

J'ai une licence, mais elle ne fonctionne plus?!
La licence V5.x n'est pas compatible avec la dernière version de BananAlbum. Vous pouvez mettre à jour votre licence ici

Voici une introduction vidéo montrant comment produire votre premier BananAlbum avec jAlbum :
Allez voir la vidéo !

L' interface jAlbum :

2. Personnalisez votre album

Lorsque vous entrez dans les paramètres de jAlbum, vous pouvez personnaliser l'album en fonction de vos besoins.

Styles; diverses apparences de BananAlbum

BananAlbum (v6.1.9) possède divers styles. Chaque style possède sa propre apparence, la disposition peut varier ainsi que les polices de caractères et le type de menu utilisés. Chaque style a son propre ensemble de possibilités.
Par exemple, le style 'défaut', peut être réglé à une taille «fixe» et vous pouvez choisir une des polices de des caractères ou votre propre police.

Les précédentes versions de BananAlbum ont eu aussi d'autres styles. Si vous préférez utiliser un d'entre eux ('Rounded', 'Multi', etc ..), Cliquez ici
et vous pouvez l'installer manuellement dans votre skin BananAlbum.

default

C'est le style qui sera sélectionné par défaut. Un album généré ressemble à ce qui suit lorsque vous faites glisser des images sur l'interface de jAlbum :

ZOOM

Dans les paramètres, onglet 'General' vous pouvez activer
'Full Screen' (Plein écran), 'Slideshow' (Diaporama) et 'Download' (Télécharger) :

ZOOM

Lorsque vous générez un album avec des sous-dossiers, un menu sera affiché :

ZOOM

Lorsque vous utilisez le style par défaut, vous pouvez choisir différents types de caractères dans l'onglet 'more' de BananAlbum !

Vous pouvez spécifier la taille des caractères à l'aide des variables utilisateur dans l'onglet 'Avancées' de jAlbum :
titlesize ->11
descriptionsize -> 11
menusize -> 13

classic

Tel est le style utilisé par BananAlbum pour ressembler à l'époque ... Il a une belle police de caractères et les icônes pour le menu et les outils.
La police de caractères utilisée est la 'theofont', qui est disponible en téléchargement Ici

ZOOM

Les autres styles seront documentés dès que possible.

Définir la taille des vignettes et des images

Vous pouvez changer la taille des vignettes et des images dans l'onglet Images des paramètres de jAlbum. Il indique des paramètres par défaut, mais vous pouvez également tapez manuellement une valeur dans la case.

Définir la taille du texte

Il n'y a qu'avec le style default que vous pouvez choisir différents types de caractères et modifier la taille du texte.

Choisissez une police de caractères !

Voici un lien vers les Polices de caractères que vous pouvez choisir
Vous pouvez maintenant choisir votre police de caractères dans l'onglet paramètres BananAlbum «more».

Spécification de la taille des caractères :

Vous pouvez spécifier la taille des polices de caractères en utilisant les variables personnalisées suivantes :
titlesize -> 11
descriptionsize -> 11
menusize -> 13

Activez votre propre police !

Dans le dossier du skin, vous pouvez trouver trois fichiers qui vous permettent de créer vos propres fichiers de police pour les titres et les descriptions ainsi que pour le menu. Ils sont dans le dossier "res/typefaces/"

Vous avez besoin du logiciel Adobe Flash pour éditer ces fichiers.

Dans les paramètres jAlbum onglet 'Avancées' vous pouvez entrer une variable personnalisée pour activer vos polices de caractères personnalisées.
titletypeface -> custom_title.swf
descriptiontypeface -> custom_description.swf
menutypeface -> custom_menu.swf

Mais vous pouvez également sélectionner 'custom' dans la liste des types de caractères dans l'onglet 'more' des paramètres de BananAlbum.

Dans le fichier settings.xml ces variables seront mises en oeuvre comme suit :
typeface="[res]typefaces/custom.swf"

Changer les couleurs de votre BananAlbum

Vous pouvez personnaliser les couleurs de votre album dans l'onglet General des paramètres de BananAlbum.

Vous pouvez choisir des couleurs à partir d'une liste, entrer les valeurs de couleurs personnalisées, ou choisir une couleur prédéfinie dans la case 'or select a color scheme !

Personnalisez l'apparence des vignettes

Il y a beaucoup de choses que vous pouvez faire avec les vignettes !

La fonction la plus élémentaire de BananAlbum concernant les vignettes, c'est que vous pouvez les placer en haut (top)(par défaut), en bas (bottom), à droite (right) et à gauche (left).
L'apparence des vignettes peut être manipulée dans l'onglet 'More' des paramètres du skin BananAlbum.

Options XML des vignettes

La ligne suivante du xml décrit tous les paramètres :
<thumbs width="68" height="68" crop="false" spacing="" autohide="false" automove="true" center="true"
scrollbar="true" style="default" active="default" x="" y="" w="" h="">top</thumbs>

Le width (largeur) et height (hauteur) décrit la taille des vignettes. Si les vignettes apparaissent en haut de votre album, la hauteur sera utilisée pour la hauteur de la "Barre de vignettes".
Lors de la définition de 'crop' à 'true', assurez-vous que le côté le plus petit des vignettes qui sont en cours de chargement est au moins égale à la taille de la "largeur" ou "hauteur" spécifiée.

Personnalisez l'apparence de la transition de l'image

Il existe plusieurs caractéristiques configurables concernant l'image.
Grâce aux paramètres onglet 'More' de BananAlbum, vous pouvez spécifier quelle transition utiliser. La valeur par défaut de transition 'smooth' redimensionne sans heurts l'arrière-plan derrière l'image à la taille de la nouvelle image. Vous pouvez aussi activer la transition 'classic' qui fera redimensionner l'arrière-plan avec une animation composée d'un ensemble de lignes. Lors de la sélection 'none' il y aura simplement un d'échange de l'image courante à l'autre.
Par défaut, l'image a un contour qui sera également montré pendant la transition. Ce contour peut être supprimé.
Voici quelques aperçus des différentes transitions :

default transition : transition par défaut

defaulttransition with outline enabled : transition par défaut avec lignes de contour

classic : classique

none : pas d'effet de transition

Vous pouvez aussi activer/désactiver le fondu de l'image.

no transition, no outline, no fade : pas de transition, pas de contour, pas de fondu

La couleur de fond est la couleur appelée 'fill color' dans l'onglet paramètres de BananAlbum.

Ajouter des éléments de menu personnalisés

Une question très fréquemment posée est de savoir comment ajouter un lien ou un bouton de contact à votre album. Il ya plusieurs façons de faire cela.
Le moyen le plus simple est d'entrer dans l'onglet Menus items & plugings des paramètres du skin BananAlbum.

Vous devez entrer un extrait de code XML pour faire apparaître un nouvel élément de menu. Voici quelques exemples :

Vous pouvez ajouter des liens en ajoutant :

• <item>
•    <title>BananAlbum.net</title>
•    <link target="_top">http://www.BananAlbum.net</link>
• </item>

Ou un bouton de contact :

• <item>
•    <title>contact</title>
•    <link>mailto:you@hotmail.com</link>
• </item>

Ou quelques infos .. (Style par défaut uniquement) Modifier la largeur du texte en changeant le «370» :

• <item>
•    <title> info </ title>
•    <text w="370"> <[! CDATA [Quelques infos sur moi !]]></ text>
• </item>

Assurez-vous que vous transférez votre album sur votre site Internet ...
Les liens peuvent ne pas fonctionner lors de l'affichage de l'album de votre disque dur en raison de problèmes de sécurité. Pas d'idée, mais il arrive qu'il en soit ainsi.

Par défaut le menu est fermé (s'il y a des sous-albums dans votre album). Si vous voulez que le menu soit montré dans sa totalité en entrant dans l'album vous pouvez mettre la variable utilisateur "expandmenu à "true" dans les paramètres jAlbum onglet 'Avancées'.

Voir des infos sur le changement de la taille du texte !

Plugins

Avec des plugins vous pouvez également ajouter des améliorations supplémentaires à votre BananAlbum.
Vous avez besoin d'une licence pour utiliser certains plugins, vous pouvez toutefois essayer la fonctionnalité du plugin en utilisant la version gratuite de BananAlbum.

• Pour ajouter un plugin pour la peau BananAlbum, ouvrez les Paramètres de BananAlbum et dans l'onglet 'About' cliquez sur 'Open BananAlbum Skin Folder'.
• Vous trouverez dans le dossier 'res' un dossier 'plugins'. C'est l'endroit où placer le fichier du plugin (.jpg,.png ou .swf).
• Vous pouvez remplir l'extrait de code de votre plugin dans l'onglet 'Menu items & plugins' des paramètres de BananAlbum.

L'auteur du skin ajoutera bientôt un petit clip vidéo montrant comment faire en rapport à cette section...

Voici une liste des fonctionnalités que les plugins peuvent offrir:

Retour Accueil Ajouter un bouton personnalisé
audioPlayer Ajouter du son à vos BananAlbum
dropShadow (nouveau!) (Ajouter une ombre portée à votre image)
ambiColor (Modifications de couleur de fond basé sur les couleurs de l'image active)

Plus d'infos bientôt !

Intégrer un BananAlbum à votre site

Voici un tutoriel pour l'intégration dans votre site d'un BananAlbum. Il peut être fait facilement en utilisant un cadre IFRAME.

Par exemple, votre album est situé à http://www.votredomaine.com/album, le morceau de code HTML que vous aurez à utiliser est le suivant :
<iframe src="http://www.votredomaine.com/album" width="424" height="350" frameborder="0" scrolling="no"></iframe>

Voici un exemple, l'album est intégré à www.bananr.com/rudin

Et il y en a beaucoup d'autres à explorer :

Position de la description/commentaire de l'image

Image d'arrière-plan

Ajouter un En-Tête avec votre propre logo

Bouton de retour à votre page d'accueil

Ajouter une ombre portée à votre image

Modification de couleur de fond basée sur les couleurs de l'image active

Lecteur audio

Lecteur video ( lecture fichiers flv)

Vidéo YouTube

Ajouter infos EXIF

Faire des calculs (positionnement)

Installez votre licence

Position de la description de l'image

Avec BananAlbum vous pouvez choisir des styles différents ( les apparences ). Toutes les apparences viennent avec leur propre ensemble de posibilités :
Tous les styles ne peuvent pas être personnalisés sur commande... Certains styles cependant, comme les styles "défault" et "classic" vous offrent la posibilité de modifier la position des différents "objets" comme le titre, la description et les outils (diaporama, plein écran et téléchargement).

La position par défaut de la description dans ces styles est en bas. Si vous souhaitez qu'elle apparaisse sur le côté droit des images, vous aurez à ajouter une variable à jAlbum. Voici comment faire :
Entrez dans les paramètres jAlbum onglet Avancées sous-onglet Variables utilisateurs et ajoutez la variable suivante :
"descriptionpos" with value: "right"

Ajouter une image de fond à votre BananAlbum

Vous pouvez ajouter manuellement une image de fond à votre album.
Vous pouvez mettre l'image automatiquement de la taille de la fenêtre, mais vous pouvez également faire une mosaïque.

Le faire nécessite les étapes suivantes :
1. Entrez dans les paramètres jAlbum onglet Avancées sous-onglet Variables utilisateurs et ajoutez la variable suivante :
"bgimage" with the following value: "res/bg.jpg"
2. Si vous voulez que votre image d'arrière-plan et un effet mosaïque, ajouter le texte suivant à la variable ainsi :
"bgimagetile" with value "true"
3. Dans l'interface jAlbum, allez à "Outils", "Ouvrir un dossier" et sélectionnez "Dossier du skin". Placer une image appelée "bg.jpg" à l'intérieur du dossier res du skin.
4. Générer un album !

Ajouter un en-tête avec votre propre logo à votre BananAlbum

Vous pouvez ajouter manuellement un en-tête à votre album.
Le faire nécessite les étapes suivantes :
Copiez cet extrait de code dans la zone Plugins des paramètres BananAlbum onglet Menu items & plugins :
<header x="20" y="0" h="120" bg="#FF0000" link="http://www.BananAlbum.com" target="_top">res/header.jpg</header>
Assurez-vous que le fichier header.jpg se trouve dans le dossier res .
<header x="0" y="0" h="120" bg="#FF0000">res/header.swf</header>
À partir de ce fichier Flash, vous pouvez même charger des albums en utilisant le code suivant :
BananAction("album","directory/album.xml");

Retour à la page d'accueil

Vous pouvez ajouter un bouton retour à l'accueil à l'aide de la fonctionnalité du plugin.
Vous pouvez utiliser l'extrait de code suivant :
<plugin link="../index.html" target="_top" x="margin" y="album_h-180">res/plugins/Home.png</plugin>
Voici quelques boutons :
(ou si vous préfèrez, simplement utiliser votre propre logo)

Home.png

Back_to_Homepage.png

Des informations d'aide, étape par étape, sur l'ajout d'un plugin à votre BananAlbum peuvent être trouvées Ici.
Vous pouvez également créer un lien retour à l'accueil par l'ajout d'un lien au menu
( si la fonctionnalité est utilisée dans votre album ).

Ajouter une ombre portée à votre image

Plugin dropShadow

Avec ce plugin, vous pouvez ajouter un dropShadow à votre image.
Vous pouvez utiliser l'extrait de code suivant :
<plugin preload="true" below="true" thumbs="false">[res]plugins/dropShadow.swf</plugin>

Télécharger le plugin : dropShadow.zip


P.S. Si vous souhaitez personnaliser la couleur et / ou l'intensité de l'ombre portée, utiliser cet extrait :
<plugin preload="true" below="true" thumbs="false" alpha="0.5" color="#000000" distance="2" blur="7">[res]plugins/dropShadow.swf</plugin>

Modification de couleur de fond basée sur les couleurs de l'image active

Plugin ambiColor

Avec ce plugin, la couleur de fond de votre album va changer tout en naviguant à travers vos images ! La couleur sera basée sur les couleurs qui se retrouvent dans l'image active.
Vous pouvez utiliser l'extrait de code suivant :
<plugin preload="true">[res]plugins/ambiColor.swf</plugin>

Voir un extrait de l'Album : ambiColor

Télécharger le plugin : ambiColor.zip

Ajouter du son à vos BananAlbum ( avec licence seulement )

Vous pouvez ajouter du son à votre album en utilisant les fonctionnalités du plugin.
Vous avez besoin d'une licence pour permettre les fonctionnalités du plugin, mais vous pouvez voir un aperçu avec la version libre BananAlbum !



L'activation du lecteur audio nécessite les étapes suivantes :
1. Télécharger audioPlayer
2. Placez le fichier audioPlayer dans le dossier res du skin BananAlbum :
Dans l'interface jAlbum, allez à "Outils", "Ouvrir un dossier" et sélectionnez "Dossier du skin".
Placez le fichier "audioPlayer.swf" dans le dossier res-du skin, ainsi qu'un fichier mp3: "file.mp3".
3. Aller aux paramètres BananAlbum onglet Menu items & plugins et ajouter la ligne suivante dans la zone plugins :
<plugin file="res/file.mp3" title="Check this out!" autoplay="true" loop="true" volume="80" x="" y="">[res]audioPlayer.swf</plugin>

Pour lire des fichiers vidéo dans BananAlbum

Vous pouvez accéder à des fichiers video Flash (. flv) dans le menu ( vous devez avoir la dernière version de BananAlbum v6.0 )

1. Télécharger le Playervideo
2. Placez le lecteur vidéo dans le dossier res du skin BananAlbum :
Dans l'interface jAlbum, allez à "Outils", "Ouvrir un dossier" et sélectionnez "Dossier du skin". Placez le fichier "videoPlayer.swf" dans le dossier res du skin.
3. Aller aux paramètres BananAlbum onglet Menu items & plugins et ajouter les lignes suivantes dans la zone plugins :

• <item space="true">
•    <title>video</title>
•    <movie width="480" height="360" video="video.flv">res/videoPlayer.swf</movie>
• </item>

Cliquez ici pour un exemple !

Pour lire des vidéos YouTube dans BananAlbum

Vous pouvez accéder à des vidéos YouTube dans le menu
( vous devez avoir la dernière version de BananAlbum v6.1.9 )

1. Télécharger le lecteur YouTube
2. Placez le lecteur YouTube dans le dossier res du skin BananAlbum :
Dans l'interface jAlbum, allez à "Outils", "Ouvrir un dossier" et sélectionnez "Dossier du skin". Placez le fichier "youtube.swf" dans le dossier res du skin.
3. Alller aux paramètres BananAlbum onglet Menu items & plugins et ajouter les lignes suivantes dans la zone plugins :

• <item space="true">
•    <title>YouTube video</title>
•    <movie width="500" height="411" video="http://www.youtube.com/v/-XPaKnUthLM">res/youtube.swf</movie>
• </item>

Voir un exemple d'album

Ajouter des infos EXIF à vos descriptions

Vous pouvez facilement ajouter des infos EXIF (si disponible) à la description de votre image
en cochant la case 'add info' dans l'onglet Paramètres jAlbum BananAlbum.
Vous pouvez également spécifier les informations à montrer. Cela exige que les mesures suivantes soient prises :
La liste des paramètres par défaut est le suivant :
"camera, aperture, exposure, iso, focus, flash, metering, resolution, date" soit
"appareil, ouverture, exposition, iso, objectif, flash, focale, résolution, date"
Dans l'interface jAlbum onglet 'Avancées' sous onglet 'Variables utilisateur', vous pouvez spécifier votre propre jeu de données EXIF à montrer, par exemple :
"ISO, l'ouverture, l'exposition", le nom de la variable est : "exiflist".

Positionnement des différents éléments

Les noms des variables pour le positionnement des différents éléments ont changé depuis la version 6.0
Vous pouvez utiliser les variables suivantes :

Ces variables vous permettent de personnaliser la position de l'image, vignettes, titre, description, plugins, etc !
Vous pouvez entrer les calculs dans l'onglet Positioning du skin BananAlbum, par exemple :
image_x: album_w/6
image_w : album_w/6*4
title_y: image_y+image_h

Installez votre licence dans le skin BananAlbum jAlbum

Tout d'abord assurez-vous que vous avez bien la dernière version du skin BananAlbum.
Télécharger la dernière version du skin : Skin BananAlbum jAlbum
- Après avoir installé la version la plus récente, sélectionnez le skin BananAlbum v6.1.9 dans la liste des skins de jAlbum.
- Dans les menus de jAlbum allez à "Outils" - "Ouvrir les répertoires" - "répertoire du skin".
- Lorsque vous entrez dans le dossier "res"de BananAlbum, vous verrez un fichier nommé (BananAlbum.swf)
- Remplacez le fichier 'BananAlbum.swf' de BananAlbum avec le fichier qui peut être trouvé dans le fichier zip de la licence que vous avez téléchargé.
Voici une vidéo montrant la façon d'installer la licence :

Si vous utilisez Windows :Cliquez ici

Si vous êtes sur Mac :Cliquez ici

Sous Windows XP, les dossiers des skins de jAlbum peuvent être trouvés à "C:\Program Files\jAlbum\skins\"
Sous Windows Vista, les dossiers des skins de jAlbum peuvent être trouvés à "C:\Users\\AppData\Roaming\jAlbum\skins\"
Sur Mac cependant, il y a deux dossiers "skins". Les skins pré-installés sont mis dans Applications/jAlbum/skins/, mais lors de l'installation de la version la plus récente du skin BananAlbum, il sera mis à User/Library/jAlbum/skins/BananAlbum v6.0/
Veuillez noter : Si l'intro reste en permanence après l'installation, assurez-vous de nettoyer le cache de votre navigateur, vérifiez votre album avec un autre navigateur ou créez un nouveau projet jAlbum et voir comment ça va. Si vous ne pouvez toujours pas le recevoir pour travailler, envoyer moi un lien ou un fichier .zip de votre album.

3. Envoyez votre album

4. La résolution de problèmes

- Cliquez ici si vous vous intéressez à une licence BananAlbum
- Cliquez ici si vous souhaitez mettre à jour votre licence v6.0