Intégrer un album dans un site existant
Intégrer un album dans votre site existant n'est pas si difficile qu'on pourait le penser. Cet assistant va vous montrer comment procéder. Pour cela, nous allons utiliser un site relatif aux voitures et vous montrer comment procéder. Si vous n'avez jamais édité un skin, il est préférable de lire d'abord l'assistant "Modifier un skin". Examinez d'abord de quoi a l'air le site avant l'intégration d'un album.
Exemple de site avant intégration d'un album
pour une fois , nous allons démarrer par la fin. Voilà le résultat une fois l'albun intégré. Cette intégration nous a pris environ 15 minutes.
Exemple de site contenant un album
En vous promenant sur le site final, vous constaterez que JAlbum à parfaitement intégré graphiquement l'album dans le site. Cela a été fait en modifiant d'une façon très simple un des skins de JAlbum, dans cet exemple nous avons utilisé le skin "Minimal". Pour donner à l'album cette apparence parfaitement intégrée, il est nécessaire de faire en sorte que JAlbum ajoute pour chaques pages, le code html de la page d'origine qui précède et suit l'album lui-même.
Les skins contiennent 2 fichiers appelés "index.htt" et "slide.htt". Ces 2 fichiers sont des " fichiers modèles html" que JAlbum utilise comme base pour la création de toutes les pages. "index.htt" est le modèle pour la création des pages d'index avec les vignettes et "slide.htt" est le modèle pour la création des pages du diaporama. Pour intégrer parfaitement les pages dans le site existant, il faut insérer du code de la page existante au début et à la fin de ces 2 fichiers. Voici comment procéder.
1. Selectionner et copier un skin
En premier lieu, il faut choisir le skin de JAlbum que vous souhaitez modifier. Choisissez le skin qui ressemble le plus à ce que vous souhaitez. Dans cet exemple nous allons utiliser le skin "Minimal". Cliquez sur "Editer" à coté de la boite de sélection des skins, une fenêtre va s'ouvrir sur votre bureau avec le contenu du dossier de ce skin (chaque skin a son propre dossier, le nom du dossier est aussi le nom du skin). Positionnez-vous sur le dossier parent et faites une copie du skin (Pour ne pas détruire le skin d'origine). Renommez le dossier, par exemple "Cars". Maintenant positionnez-vous sur le nouveau dossier pour pouvoir en éditer le contenu.
2. Modifier le début du fichier
- Choisissez une page relativement simple du site existant.
- Copiez l'ensemble du code html depuis le début jusqu'à l'emplacement où vous souhaitez placer la page index avec les vignettes de l'album. Dans cet exemple, jusqu'à l'emplacement du texte suivant: "This section is supposed to have a gallery of car images produced by JAlbum"
- Ouvrez "index.htt" dans le dossier du skin.
- Effacez le code existant jusqu'à la ligne avec le tag (ligne incluse) <body> .
- Collez le contenu du "Presse-papiers".
3. Modifier la fin du fichier
- Retournez dans le fichier de la page du site existant. Et copier maintenant le reste du code dans le "Presse-Papiers".
- Retournez dans le fichier "index.htt" et remplacez la fin, débutant juste avant le tag </body> , avec le contenu du "Presse-Papiers".
- Sauvez votre fichier et recommencez la même opération avec le fichier "slide.htt".
4. Ajuster les liens vers les images
Les sites Web sont souvent décorés à l'aide d'images. Assurez-vous que tous les liens dans votre fichier modèle sont corrects en procédant à quelques vérifications et en ajustant éventuellement ces liens. Une bonne solution consiste à déplacer toutes les images dans le dossier "res" et de remplacer tous les liens pour les images par $resPath, Ainsi si le chemin d'origine est du type <img src="images/header.gif">, remplacez le par <img src="$resPath/header.gif"> .
5. Essayer votre skin
Retournez dans JAlbum. Selectionnez le nouveau skin (il devrait apparaitre dans la liste des skins). Choisissez un dossier avec quelques images et créez votre album. Il est probable qu'il y ai quelques erreurs la première fois, mais avec quelques corrections vous y arriverez sans doute, et vous pourrez admirer votre album intégré.