Remonter

JAlbum habillage NospOfTombl
 

Habillage NospOfTombl, version 2.5.10,     29 janvier 2011

Depuis la version  version 2.5.8, NospOfTombl comprend maintenant le texte français que j'ai proposé à l'auteur et qu'il a acepté d'incorporer. Voir ....\JAlbum\skins\NospOfTombl\texts\texts_fr.properties

 

 

Modifications requises pour mon style d'affichage particulier

Exemple de produit utilisant cette technique : http://mwlandry.ca/photos/eglises/index.html

 

Dans le fichier slide.htt

Pour le texte sous la photo
Dans le fichier slide.htt, je change la ligne 377 de
<ja:include page="<%= new File(imageDirectory, label+".txt") %>" />
à
<ja:include page="<%= new File(imageDirectory, label+"_description.txt") %>" />
<ja:include page="<%= new File(imageDirectory, "sautdepara.txt") %>" />
<ja:include page="<%= new File(imageDirectory, label+"_description2.txt") %>" />

1e Ceci permet d'utiliser les mêmes noms de fichiers _description.txt générer pour l'habillage PositionMap.

2e Le fichier sautdepara.txt contient <br><br>&nbsp; qui permet de faire 2 sauts de paragraphe

3e Permet d'ajouter le texte dDun 2ième fichier nommé *_description2.txt, * étant le nom du fichier image correspondant.

Titre des pages Photo.
Dans le fichier slide.htt je change les lignes 238 à 241
<!-- optional show the filename -->
<ja:if test="<%= uishowFilename %>">
<b>&nbsp;|&nbsp;$fileName</b>
</ja:if>
en les remplaçant par ci-bas placé en ligne 228
<!-- optional show the filename -->
<ja:if test="<%= uishowFilename %>">
<b>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <%= exif("Iptc.Object Name", "text.exif.Iptc.Object.Name", true);%></b>
<b><span class="style1">&nbsp; <%= exif("Iptc.Object Name", " ", true);%></span></b>
</ja:if>
Ceci permet de mettre le nom Object Name en titre de l'information de la page de la photo. Exemple: ": Saint-Louis". Je ne sais comment enlever le ":".

Annonces W3C.
Je n'aime les 2 annonces de W3C alors j'efface des 2 lignes 323 et 324 dans slide.htt.
<a href="http://validator.w3.org/check/referer"><img src="$resPath/valid-html401.png" title="Valid HTML 4.0.1" alt="Valid HTML 4.0.1!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="$resPath/valid-css2.png" alt="Valid CSS!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>
 

Pour une ligne d'instruction sous le titre de la page Slide dans slide.htt
Ajouter après
Log log = new Log("Slide");
à la ligne 18
String varinfo = "| . . . . . . . . . . . . . . Cliquer sur Carte ci-dessus pour basculer entre carte Google et icônes.";
Ajouter après les lignes
<div id="slidemap" style="width: <%= geoMapSlideHSize %>px; height: <%= geoMapSlideVSize %>px;">
</div>
</ja:if>
à ligne 289
<div class="small">
<b> <%= varinfo %></b>
</div>

Google Analytics
J'ajoute au fichier index.htt et slide.htt le code requis par Google Analytics tel que décrit ici.

 

 

index.htt

Annonces W3C.
Je n'aime les 2 annonces de W3C alors j'efface les 2 lignes 347 et 348 dans index.htt
<a href="http://validator.w3.org/check/referer"><img src="$resPath/valid-html401.png" title="Valid HTML 4.0.1" alt="Valid HTML 4.0.1!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="$resPath/valid-css2.png" alt="Valid CSS!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>

Infobulle sur les icônes dans la page Index
Pour inscrire le nom (objectName) de la photo plutôt que sa description (Caption/Abstract) dans l'affichage Infobulle on doit modifier index.htt
ligne 179 ajouter une variable
String varnom = vars.get("objectName");
ligne 204 modifier (ancienne 203)
out.print("title=\"" + caption + "\"");
par
out.print("title=\"" + varnom + "\"");
Dans le fichier slide.htt
ligne 142 ajouter une variable
String varnom2 = vars.get("objectName");
ligne 144 modifier
out.print("title=\"" + caption + "\"");
par
out.print("title=\"" + varnom2 + "\"");

Nom de la photo sous la photo dans la page Index.
Il faut avoir défini varnom comme dans le tableau précédent et modifier index.htt
Ajouter la ligne
out.print("<p style=\"" + "margin-top: 0; margin-bottom: 0\"" + ">" + varnom );
Entre ces deux lignes (205-206)
out.println("></a>");
if (files[slideNum].isDirectory()) {

Pour une ligne d'instruction sous le titre de la page Index dans index.htt
Ajouter à la ligne 21
String varindex = "Placer le curseur sur la photo pour lire son nom. Cliquer sur la photo pour son agrandissement et sa position géographique";
Ajouter après les lignes
<ja:if test="<%= albumInfo != void && albumInfo != null %>">
<%= albumInfo %>
</ja:if>
à la ligne 314
<div class="small">
<b> <%= varindex %></b>
</div>

Pour afficher la carte en même temps que la photo
Dans slide.htt
REMPLACER à la ligne 175 à 177
</head>

<body class="page_bg"<ja:if test="<%=geodata%>"> onunload="GUnload();"</ja:if> >
PAR
<!-- mwl -->
<ja:if test="<%=geodata%>">
<script type="text/javascript">
loadSlideMap("$fileName", "$geoMaptypeSlide");
toggleMap();
</script>
</ja:if>
</head>
<body onload="toggleMap();">
<t class="page_bg" onunload="GUnload();" t>
<!-- mwl -->

Google Analytics
J'ajoute au fichier index.htt et slide.htt le code requis par Google Analytics tel que décrit ici.

 

 

 

indexmap.htt

Annonces W3C.
Je n'aime les 2 annonces de W3C alors j'efface les 2 lignes 221 et 222 dans indexmap.htt
<a href="http://validator.w3.org/check/referer"><img src="$resPath/valid-html401.png" title="Valid HTML 4.0.1" alt="Valid HTML 4.0.1!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>
<a href="http://jigsaw.w3.org/css-validator/"><img src="$resPath/valid-css2.png" alt="Valid CSS!" style="border: 0px solid ;" hspace="1" vspace="3" align="middle"></a>

 

 

 

 

Black.css  DackGreen.css,   Gray.css,   White.css

Pour baisser l'emplacement de la carte avec la photo
Changer dans \style\Black.css après ligne 221 soit
div#slidemap {
position: absolute;
left:10px;
top:70px;
Remplacer 70 par 100px et 10 par 5.
Je fais de même pour l'information IPTC après ligne 196
div#links {
position: absolute;
left:10px;
top:70px;
width: 300px;
Répéter pour les autres couleurs dans DackGreen.css, Gray.css, White.css

 

PS Problèmes avec la couleur DarkGreen.css, ne pas utilser.

 

 

res\gmap.js

Pour afficher le nom du fichier dans les infobulles de la carte principal
Dans res\gmap.js changer
ligne 191
var displayDate = markers[i].getAttribute("dateDisplay");
par
var displayDate = markers[i].getAttribute("text");
Ceci fait afficher les 29 premières lettres du champs iptc.description dans l'infobulle en lieu de la date
Le fichier créé GmapMakers.xml contient l'information pour l'affichage de la page de la carte principal. Dans Excel j'ai créé une page qui remplace l'information de iptc.description dans cette page par le nom de l'église.
Je n'ai pas de solution plus élégante pour l'instant.

Pour des pointeurs de différentes couleurs sur la carte.
Dans res\gmap.js
Au deux endroits où il y a ce texte (lignes originales faire 265 puis 171)
// Create our "tiny" marker icon
var icon = new GIcon();
icon.image = resPath+"/mymarker_red.png";
icon.iconSize = new GSize(16, 28);
icon.shadowSize = new GSize(16, 28);
icon.iconAnchor = new GPoint(8, 28);
icon.infoWindowAnchor = new GPoint(5, 1);
Ajouter après
// Create our "tiny" marker icon2
var icon2 = new GIcon();
icon2.image = resPath+"/mymarker_blue.png";
icon2.iconSize = new GSize(16, 28);
icon2.shadowSize = new GSize(16, 28);
icon2.iconAnchor = new GPoint(8, 28);
icon2.infoWindowAnchor = new GPoint(5, 1);

// Create our "tiny" marker icon3
var icon3 = new GIcon();
icon3.image = resPath+"/mymarker_green.png";
icon3.iconSize = new GSize(16, 28);
icon3.shadowSize = new GSize(16, 28);
icon3.iconAnchor = new GPoint(8, 28);
icon3.infoWindowAnchor = new GPoint(5, 1);

// Create our "tiny" marker icon4
var icon4 = new GIcon();
icon4.image = resPath+"/mymarker_orange.png";
icon4.iconSize = new GSize(16, 28);
icon4.shadowSize = new GSize(16, 28);
icon4.iconAnchor = new GPoint(8, 28);
icon4.infoWindowAnchor = new GPoint(5, 1);

// Create our "tiny" marker icon5
var icon5 = new GIcon();
icon5.image = resPath+"/mymarker_yellow.png";
icon5.iconSize = new GSize(16, 28);
icon5.shadowSize = new GSize(16, 28);
icon5.iconAnchor = new GPoint(8, 28);
icon5.infoWindowAnchor = new GPoint(5, 1);

Enlever les 4 lignes suivantes;
var startmarker = (markersHashTable[ markerskeyIndex[0] ]);
startmarker.setImage(resPath+"/mymarker_yellow.png");
var endmarker = (markersHashTable[ markerskeyIndex[markerskeyIndex.length - 1] ]);
endmarker.setImage(resPath+"/mymarker_green.png");
Sous
if (showAsMarker == "true") {
var marker = createInfoMarker(icon, ew, point, file, text, displayDate);
map.addOverlay(marker);
markersHashTable[exifDate] = marker;
markerskeyIndex.push(exifDate);
}
Ajouter
if (showAsMarker == "bleu") {
var marker = createInfoMarker(icon2, ew, point, file, text, displayDate);
map.addOverlay(marker);
markersHashTable[exifDate] = marker;
markerskeyIndex.push(exifDate);
}
if (showAsMarker == "vert") {
var marker = createInfoMarker(icon3, ew, point, file, text, displayDate);
map.addOverlay(marker);
markersHashTable[exifDate] = marker;
markerskeyIndex.push(exifDate);
}
if (showAsMarker == "oran") {
var marker = createInfoMarker(icon4, ew, point, file, text, displayDate);
map.addOverlay(marker);
markersHashTable[exifDate] = marker;
markerskeyIndex.push(exifDate);
}
if (showAsMarker == "jaun") {
var marker = createInfoMarker(icon5, ew, point, file, text, displayDate);
map.addOverlay(marker);
markersHashTable[exifDate] = marker;
markerskeyIndex.push(exifDate);
}

Dans GmapMakers.xml on devra remplacer dans marker="true" par "bleu", "vert", "oran" ou "jaun" selon la couleur désirée. Avec "true" la couleur par défaut est rouge.

 

 

texts_fr.properties

J'ai modifié texts_fr.properties
generated=produit avec NospOfTombl
par
generated=Produit par Marcel Walter Landry avec JAlbum et l'habillage NospOfTombl, adresse de courriel

 

 

 

 

 

 

 

 

 

 

 

 

Au besoin Cliques ici pour m'envoyer un courriel.

Dernière modification : 12 janvier 2017.