bon, j'ai un peu fait joujou avec TimeLine de SIMILE, c'est vrai que ça a l'air bien.
Ce qu'il faut comprendre en premier lieu c'est qu'il y a deux (ou plus) fichiers à créer :
-la page en html qui contient la ligne de temps (maligne.htm)
-le fichier xml qui contient tous les évènements (mesevenements.xml)
en suivant le tuto qui se trouve ici, tu arrives à un fichier html de ce type :
On y trouve en tout premier (ligne 3) l'appel à un script (timeline-api.js) qui lui-même chargera tous les scripts nécéssaires (dans un premier temps tu as donc intérêt à faire tes essais en étant connecté, à moins de vouloir récupérer tous les javaScripts sur ton poste).
Dans le deuxième script (lignes 4 à 44) on a :
(lignes 8-31) la création des bandeaux de temps avec leurs parametrages et quelques éléments pour définir l'interaction entre les bandeaux (défilement proportionnel par exemple).
(ligne 32) l'appel du fichier xml (à renommer comme bon te semble)
(lignes 35-43) en cas de modification de la taille de la fenêtre.
Et finalement dans le html la définition de la zone div contenant la ligne de temps.
hop, quelques explications sur le fichier xml à suivre...
Ce qu'il faut comprendre en premier lieu c'est qu'il y a deux (ou plus) fichiers à créer :
-la page en html qui contient la ligne de temps (maligne.htm)
-le fichier xml qui contient tous les évènements (mesevenements.xml)
en suivant le tuto qui se trouve ici, tu arrives à un fichier html de ce type :
- Code: Tout sélectionner
<html>
<head>
<script src="http://simile.mit.edu/timeline/api/timeline-api.js" type="text/javascript"> </script>
<script>
var tl;
function onLoad() {
var eventSource = new Timeline.DefaultEventSource();
var bandInfos = [
Timeline.createBandInfo({
eventSource: eventSource,
date: "Oct 6 2006 00:00:00 GMT",
width: "70%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 100
}),
Timeline.createBandInfo({
showEventText: false,
trackHeight: 0.5,
trackGap: 0.2,
eventSource: eventSource,
date: "Oct 6 2006 00:00:00 GMT",
width: "30%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 200
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
bandInfos[1].eventPainter.setLayout(bandInfos[0].eventPainter.getLayout());
tl = Timeline.create(document.getElementById("my-timeline"), bandInfos);
Timeline.loadXML("mesevenements.xml", function(xml, url) { eventSource.loadXML(xml, url); });
}
var resizeTimerID = null;
function onResize() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
}
</script>
</head>
<body onload="onLoad();" onresize="onResize();">
<div id="my-timeline" style="height: 400px; border: 1px solid #aaa">
</div>
</body>
</html>
On y trouve en tout premier (ligne 3) l'appel à un script (timeline-api.js) qui lui-même chargera tous les scripts nécéssaires (dans un premier temps tu as donc intérêt à faire tes essais en étant connecté, à moins de vouloir récupérer tous les javaScripts sur ton poste).
Dans le deuxième script (lignes 4 à 44) on a :
(lignes 8-31) la création des bandeaux de temps avec leurs parametrages et quelques éléments pour définir l'interaction entre les bandeaux (défilement proportionnel par exemple).
(ligne 32) l'appel du fichier xml (à renommer comme bon te semble)
(lignes 35-43) en cas de modification de la taille de la fenêtre.
Et finalement dans le html la définition de la zone div contenant la ligne de temps.
hop, quelques explications sur le fichier xml à suivre...
Dernière édition par damj le Sam 07 Oct, 2006 00:15, édité 1 fois au total.
-
damj
- Messages : 626
