Bannière du site

Les tutoriels de Jardinamel

fleche_haut

Le skin BananAlbum

Traduction française (non officielle) de la documentation officielle du créateur du skin

Réalisée par Danamel avec le skin BananAlbum
Mise à jour du 22/01/2013 pour la version 6.2.6

Pour voir la version imprimable faites -> Fichier -> Aperçu avant impression
Pour imprimer cliquez ci-contre

NOTE 1 : Il faut être conscient que ce skin utilisant le système Flash d'Adobe, les albums ne seront pas visibles sur les appareils Apple iPhone, iPad.

NOTE 2 : Pour la partie spécifique au logiciel jAlbum (téléchargement, installation, prise en main) vous pouvez vous reporter au tutoriel de Jeff

"Présentation de jAlbum - Création modifications trucs et astuces"  lien externe

Pour télécharger le skin, cliquez sur l'image  lien externelogo BananAlbum

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 y a 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  lien externe

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

L' interface jAlbum :

Image1

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  lien externe
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 :

Image2

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

Image3

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

Image4

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'.

Image5

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.

Image6

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   lien externe

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 !

Image7

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.

Image8

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 du réglage du recadrage à true, assurez-vous que le côté le plus court des vignettes qui sont en cours de chargement est au moins la taille de la 'height' ou 'width' 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

transition par défaut

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

transition par défaut avec lignes de contour

classic : classique

classique

none : pas d'effet de transition

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

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.

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.

Image9

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 :

Ou un bouton de contact :

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

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.

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 !

Image10

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   lien externe

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

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 !

Image11

Image12

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 ...

Vous pouvez également charger un fichier swf dans l'en-tête. :
<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

Image13

Back_to_Homepage.png

Image14

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>

dropshadow

Télécharger le plugin : dropShadow.zip   lien externe

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>

ambiColor

Voir un extrait de l'Album : ambiColor   lien externe

Télécharger le plugin : ambiColor.zip   lien externe

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 !

Note de Danamel

L'audioPlayer n'étant accessible qu'à ceux qui possèdent une licence, vous pouvez quand même mettre de la musique à votre BananAlbum en utilisant l'outil Add music to site et en pointant votre album sur le fichier default.html au lieu de index.html - Pour plus de détails reportez-vous au tutoriel de Jeff
"Mettre de la musique sur un jAlbum"   lien externe

L'activation du lecteur audio nécessite les étapes suivantes :
1. Télécharger audioPlayer   lien externe
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>

image15

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.2.6   lien externe

1. Télécharger le Playervideo   lien externe
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 :

Cliquez ici pour un exemple !   lien externe

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.2.6   lien externe

1. Télécharger le lecteur YouTube   lien externe
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 :

Voir un exemple d'album   lien externe

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".

Image16

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 :

album_w la largeur de votre album (was sw)
album_h la hauteur de votre album (was sw)
margin marge autour de votre album (was b)
thumbs_top_h l'espace utilisé par les vignettes en haut (was tth)
image_x x-position de votre image (was ix)
image_y y-position de votre image (was iy)
image_w largeur de l'image (was iw)
image_h hauteur de l'image (was ih)
title_h hauteur du titre (was lh)
description_w largeur de la description
menu_w largeur du menu

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  lien externe
- 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 :

Image17

Si vous utilisez Windows :Cliquez ici  lien externe

Image18

Si vous êtes sur Mac :Cliquez ici  lien externe

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   lien externe
- Cliquez ici si vous souhaitez mettre à jour votre licence v6.0   lien externe