Bannière du site

Les tutoriels de Jardinamel

fleche_haut

Intégrer un album dans un site existant


Deuxième méthode

Tutoriel réalisé par Danamel avec jAlbum version 8.4 et le skin Chameleon - Edité le 22/09/2009

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

Cette méthode offre l'avantage de pouvoir utiliser de très nombreux skins. Elle nécessite de modifier 2 fichiers du skin utilisé et 1 fichier du style.
Ce sont les fichiers index .htt et slide.htt pour le skin et Royal.css suivant le style utilisé par exemple pour le style Royal.
Pour cela, comme pour la première méthode, il est préférable de faire une copie du dossier du skin que vous renommez "Mon_Chameleon" par exemple. Si vous ne le renommez pas il sera écrasé à la prochaine mise à jour.

Voici comment procéder.

1. Sélectionner et dupliquer un skin

En premier lieu, il faut choisir le skin de jAlbum que vous souhaitez modifier.
Choisissez le skin que vous souhaitez utiliser, et qui s´harmonise le mieux au site existant.
Pour la description de la duplication d'un skin reportez vous à la méthode précédente

Note : Vous remarquerez que de nombreux skins, en particulier ceux qui utilisent le Flash, soit non pas de fichier slide.htt, soit celui-ci ne fait que 1ko et n'est pas utilisé. Cette méthode ne fonctionne pas pour ces skins.

Dans cet exemple nous allons utiliser le skin "Chameleon" qui est un de ceux qui sont le plus utilisés.
Vous le renommez, par exemple "mon_chameleon".
Un double clic sur le dossier que vous venez de créer, et le contenu du nouveau skin s'affiche.
Si vous pensez ne pas les utiliser tous, vous pouvez éventuellement faire le ménage dans les styles, mais cela n'est pas obligatoire.
Dans le cas de Chameleon ils sont très nombreux.

img_i11

Avec Notepad++, vous éditez les fichiers "index.htt" et slide.htt".
Vous pouvez le faire avec le bloc-notes de Windows, mais il est bien moins pratique.

Note importante :

Pour tous les liens et les images, indiquez des chemins en absolu
type "http://www.monsite.fr/images/banniere.png"

En effet si vous construisez un album avec des sous albums, il vous sera impossible d'indiquer à jAlbum les bons chemins en relatif.

img_i12
Exemple de page simple du site

Pour rappel, le code minimum d'une page de site simple se compose ainsi :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Le titre de la page</title>
    Ici on met toutes les balises meta, le favicon, l'appel du css et du javascript éventuellement, etc.
    </head>
    <body>
        <div id="en-tete">
        L'en-tête - Contient en général votre bannière
        </div>
        <div id="menu">
        Votre menu - horizontal ou vertical
        </div>
        <div id="corps">
        C'est ici que s'inscrira votre album
        </div>
        <div id="pied_page">
        Le pied de page - En général on y met le Copyright
        </div>
    </body>
</html>

Pour des questions de mise en page plus complexes, vous pouvez avoir regroupé les parties en-tête, menu, corps et pied de page dans un <div id="container"> par exemple. Ce qui donnerait le code suivant :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    <head>
        <title>Le titre de la page</title>
        Ici on met toutes les balises meta, le favicon, l'appel du css et du javascript éventuellement, etc.
    </head>
    <body>
        <div id="container">
                <div id="en-tete">
                L'en-tête - Contient en général votre bannière
                </div>
                <div id="menu">
                Votre menu - horizontal ou vertical
                </div>
                <div id="corps">
                C'est ici que s'inscrira votre album
                </div>
                <div id="pied_page">
                Le pied de page - En général on y met le Copyright
                </div>
        </div>
    </body>
</html>

Le but est de demander à jAlbum de créer l'album en l'incorporant dans notre page de site. Pour cela dans le fichier index.htt vous cherchez la ligne

</head>

Juste avant vous incorporez la partie du head de votre site que vous voulez utiliser. Le favicon, le javascript, les instructions conditionnelles IE, etc. par exemple.

Exemple Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="$language" xml:lang="$language">
<%
chameleon.updateVars();
chameleon.initIndex();
%>
${markOfTheWebStr}
<head>
<title>${simplePath}</title>
<meta http-equiv="Content-Type" content="text/html;charset=$textEncoding" />
<meta name="Keywords" content="photo,album,gallery,${pageTitle}" />
<ja:if test=${isFolderComment}><meta name="Description" content="<%=chameleon.stripHTML(chameleon.folderComment)%>" /></ja:if>
<ja:if test=${useIndexPageTransition}><meta http-equiv="Page-Enter" content="blendTrans(Duration=${indexTransitionDelay})" />
<meta http-equiv="Page-Exit" content="blendTrans(Duration=${indexTransitionDelay})" /></ja:if>
<ja:include page="includes/indexscripts.inc" />
<link rel="stylesheet" type="text/css" href="$stylePath" />
<ja:if test=${subStyleDefined}><link rel="stylesheet" type="text/css" href="$resPath/substyle.css" /></ja:if>

Début du code ajouté
<link rel="icon" href="http://www.jardinamel.fr/jardinamelanim.gif" type="image/gif" />
<!--[if gte IE 7]>
<link rel="stylesheet" type="text/css" href="ie.css" />
<![endif]-->
<!--[if lte IE 6]>
<link rel="stylesheet" type="text/css" href="ie6.css" />
<![endif]-->
Fin du code ajouté
</head>

Ensuite vous cherchez la ligne

<body id="body">

Juste en dessous vous ajoutez le code html de votre page concernant l'en-tête, le menu correspondant à votre page et vous ouvrez la balise <div id="corps"> qui va se trouver juste avant la ligne

<div style="margin-left:auto; margin-right:auto; padding-bottom:10px; text-align:center;">

Exemple Code :
<body id="body">
Début du code ajouté
<div class="en_tete"> <!-- Banniere fixe en haut de l'écran -->
<!--Début banniere-->
<div id="banniere1">
</div>
<div id="banniere3">
</div>
<div id="banniere2">
<div id="banniere">Conseils en photo numérique<br/> et jardinage</div>
</div>
</div> <!--Fin banniere--> <div id="menu"> <!-- menu fixe à gauche de l'écran -->
<ul> <!--Début menu-->
<li><a href="http://www.jardinamel.fr/index.php">Accueil</a></li>
<li><a href="http://www.jardinamel.fr/index_albums.php">Albums Photos</a></li>
<li><a href="http://www.jardinamel.fr/jardin/jardin1.php">Jardinage</a></li>
<li><a href="http://www.jardinamel.fr/photo_1a.php">Photographie</a></li>
<li><a href="http://www.jardinamel.fr/accueil_tutos.php">Mes tutoriels</a></li>
<li><a href="http://www.jardinamel.fr/liens.php">Liens</a></li>
<li><a href="http://www.jardinamel.fr/livredor.php">Livre d'or</a></li>
<li><a href="http://www.jardinamel.fr/contact_email.php">Contact</a></li>
</ul>
<div class="rose">
<img src="../../images/rose.gif" alt="rose" />
</div>
<br/>
</div> <!--Fin menu-->
<div class="content"> <!-- début du contenu de la page -->
<div id="corps"> Début de la balise "corps"
Fin du code ajouté
<div style="margin-left:auto; margin-right:auto; padding-bottom:10px; text-align:center;">
<table style="height:54px;" align="center" cellspacing="0" cellpadding="0" border="0">
..................................................................................................................................

Pour terminer tout en bas du fichier vous avez ces lignes :

</div>
</body>
</html>

Entre </div> et </body> vous ajoutez la fermeture de la balise corps et le code de votre pied de page.
Ce qui devrait vous donner à peu près ceci :

Exemple Code :
<ja:if test=<%=!chameleon.albuminfoInTable && chameleon.indexInfo.length() > 0%>><br /><span class="xsmalltxt">${indexInfo}</span></ja:if>
</div>
</div>

Début du code ajouté
</div> <!-- fin du contenu de la page -->
<div class="pied_de_page"> <!-- menu fixe en bas de l'écran -->
<p id="logo_html"><a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Strict" height="31" width="88" /></a></p>
<p id="logo_css"><a href="http://jigsaw.w3.org/css-validator/validator?uri=http://jardinamel.fr"><img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss" alt="Valid CSS!" /></a></p>
<p id="copyright">Copyright © <strong>"Jardinamel"</strong> 2007 -2009, tous droits réservés</p>
</div>
</div>Fermeture de la balise "corps"
Fin du code ajouté
</body>
</html>

Ce fichier index.htt modifié va permettre à jAlbum d'insérer les pages index de l'album dans votre site.
Vous opérez la même manipulation pour le fichier slide.htt qui lui, va permettre d'insérer chaque page d'image de la même façon dans votre site.

Maintenant, il faut indiquer à jAlbum le css que vous avez créé pour votre page. Pour cela il faut modifier le fichier css du style que vous désirez utiliser.
Dans l'exemple j'utilise le style Royal. Vous trouverez le fichier dans le dossier Mon-Chameleon → Styles → Royal.css
Note : Si vous utlisez un style qui comprend des sous-styles les fichiers css se trouvent dans le dossier des sous-styles.

Comme d'habitude, vous ouvrez ce fichier Royal.css dans Notepad++ et vous ouvrez également en même temps le fichier css de votre site, ce qui permet de faire des Copier/Coller plus facilement.
Vous sélectionnez le css de toutes les balises id ou class de votre site qui concernent votre page (en-tête, menu, corps, pied de page, y compris la balise body qui prendra la place de la balise body de Royal.css), vous le copiez et le collez dans le fichier css du style juste au dessus de cette balise body que vous renommez ensuite #corps ou du nom que vous avez choisi.

Pour résumer, au final vous devez avoir une balise body identique à celle de votre site et une balise corps avec les attributs du body du style.

Note : Pensez à y incorporer des attributs spéciaux genre a img { border: 0; } si vous ne voulez pas de bordures sur les images ou liens.

Exemple Code CSS :
Début du code ajouté
body { Body de votre page
overflow: auto; margin: 0px 0% 35px 140px; padding: 0px; background-color:#ddba8a; }
.en_tete { /* block fixe en haut de l'écran */
position: fixed; height:88px; top: 0; left: 0; width: 100%; z-index:20;}
div#banniere1 {
position:absolute; left:0px; width:593px; height: 80px;
background-image: url("http://www.jardinamel.fr/images/banniere1.gif"); background-repeat: no-repeat;
margin-right: -5px; border-top: 4px solid #008000; border-bottom: 4px solid #008000;
border-left: 4px solid #008000;}
div#banniere3 {
position:absolute; right:0px; width:134px; height: 80px;
background-image: url("http://www.jardinamel.fr/images/banniere3.gif"); background-repeat: no-repeat;
margin-bottom: 0px; margin-left : -5px; border-top: 4px solid #008000; border-bottom: 4px solid #008000; border-right: 4px solid #008000;}
div#banniere2 {
width:auto; height: 80px;
background-image: url("http://www.jardinamel.fr/images/banniere2.gif"); background-repeat: repeat;
border-top: 4px solid #008000; border-bottom: 4px solid #008000;}
#banniere {
padding-top:20px; margin-left:640px; font-family: Verdana,Helvetica,Arial,serif; font-size:1em; font-weight: bold; color: #008000;}
.content {
height: 100%; margin:auto;}
#menu {
position: fixed; top: 88px; left: 0; width: 140px; height: 100%; background-color:#bdf7b3;
#menu ul {
position:absolute; list-style-type:none; margin-top:5px; padding:0;}
#menu ul a {
display: block; width: 126px; line-height: 30px ; height: 30px; font-family: Verdana,Helvetica,Arial,serif; font-size: 80%; font-weight: bold;
text-align: center; color: #008000; text-decoration: none; margin-top: 6px; margin-left: 7px;
background: url(http://www.jardinamel.fr/images/menu.png) no-repeat 0 0;
#menu ul li a:hover {
background: url(http://www.jardinamel.fr/images/menu.png) no-repeat 0 -30px; color: #ffcd1c;}
.rose {
text-align:center; padding-top:350px;}
.pied_de_page {
position: fixed; bottom:0; left: 0; width: 99.8%; height: 2.4em; color:#008000; text-align:center;
background-color:#bdf7b3; border: 2px solid #008000; padding-bottom:0px; font-size: 80%; z-index:20;}
#copyright {
margin-top:8px; text-align:center;}
Fin du code ajouté
#corps { Balise body du style renommée "#corps"
font-family: ${fontFamily};
font-size: ${fontSize}px;
color: #644e33;
margin: 0px;
padding: 0px;
background: #ddba8a url(bg.gif) repeat-x;
}
<ja:if test=${customScrollbars}>
html {
scrollbar-face-color:#e9cda6;
scrollbar-highlight-color:#b48b5a;
scrollbar-3dlight-color:#b48b5a;
scrollbar-darkshadow-color:#b48b5a;
scrollbar-shadow-color:#b48b5a;
scrollbar-arrow-color:#000000;
scrollbar-track-color:#b48b5a;
}
</ja:if>
a:link {
text-decoration: none;
color: #610505;
}

Pour faire des essais, choisissez un dossier avec quelques images et créez votre album.
Il est probable qu'il y ai quelques erreurs la première fois, un bout de css oublié par exemple, mais avec quelques corrections, vous y arriverez sans doute et
Vous pourrez admirer votre album parfaitement intégré

Cliquez ici pour voir un exemple d'album intégré  lien externe