-
Notifications
You must be signed in to change notification settings - Fork 0
/
e-artexte-1.html
157 lines (128 loc) · 6.18 KB
/
e-artexte-1.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<!-- See http://developer.yahoo.com/yui/grids/ for info on the grid layout -->
<title>Timeline Visualization: Photography Exhibition Catalogues in Artexte Collection (1960-) :: PhotographyMedia.com</title>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
<!-- See http://developer.yahoo.com/yui/ for info on the reset, font and base css -->
<link rel="stylesheet" href="yui3.9.1/cssreset-min.css" type="text/css">
<link rel="stylesheet" href="yui3.9.1/cssbase-min.css" type="text/css">
<link rel="stylesheet" href="yui3.9.1/cssfonts-min.css" type="text/css">
<link rel="stylesheet" href="local_example.css" type="text/css">
<!-- Load the Timeline library after reseting the fonts, etc -->
<script type="text/javascript">
var Timeline_ajax_url="timeline_2.3.1/simile-ajax-api.js?bundle=false";
var Timeline_urlPrefix='timeline_2.3.1/';
</script>
<script src="timeline_2.3.1/timeline-api.js?bundle=false" type="text/javascript"></script>
<script type="text/javascript">
SimileAjax.History.enabled = false;
var tl;
var resizeTimerID = 1;
window.onload= function(){
$.ajax({
url: 'EPrintsData.php',
dataType: 'script',
cache: 'true',
error: function(data){
$('#loading').html('Failed to load data for some reason. Please try again by clicking reload on your browser. ');
},
success: function(data) {
onLoad();
$('#loading').html('');
$.ajax({
url:'fileLastUpdate.php',
dataType: 'text',
success: function(data){
$('#fileLastUpdate').html(data);
}
});
}
});
}
function onLoad() {
var eventSource = new Timeline.DefaultEventSource(0);
var theme = Timeline.ClassicTheme.create();
theme.event.instant.icon = "timeline_2.3.1/images/dark-green-circle.png";
theme.event.instant.iconWidth = 10; // These are for the default stand-alone icon
theme.event.instant.iconHeight = 10;
var d = Timeline.DateTime.parseIso8601DateTime("1967");
theme.timeline_start = new Date(Date.UTC(1960, 0, 1));
theme.timeline_stop = new Date(Date.UTC(2020, 0, 1));
var bandInfos = [
Timeline.createBandInfo({
width: "90%",
intervalUnit: Timeline.DateTime.YEAR,
intervalPixels: 600,
eventSource: eventSource,
date: d,
theme: theme,
eventPainter: Timeline.CompactEventPainter,
eventPainterParams: {
iconLabelGap: 5,
labelRightMargin: 20,
maxLabelWidth: 500, // TN: MaxLabelWidth
iconWidth: 80, // These are for per-event custom icons
iconHeight: 80,
stackConcurrentPreciseInstantEvents: {
limit: 20,
moreMessageTemplate: "[%0 More]",
icon: "timeline_2.3.1/images/dark-green-circle.png", // default icon in stacks
iconWidth: 10,
iconHeight: 10
}
}
}),
Timeline.createBandInfo({
width: "10%",
intervalUnit: Timeline.DateTime.DECADE,
intervalPixels: 120,
eventSource: eventSource,
date: d,
theme: theme,
layout: 'overview' // original, overview, detailed
})
];
bandInfos[1].syncWith = 0;
bandInfos[1].highlight = true;
tl = Timeline.create(document.getElementById("tl"), bandInfos, Timeline.HORIZONTAL);
var url = '.'; // The base url for image, icon and background image
eventSource.loadJSON(timeline_data, url);
tl.layout();
resizeTimerID = null;
}
$(window).resize(function() {
if (resizeTimerID == null) {
resizeTimerID = window.setTimeout(function() {
resizeTimerID = null;
tl.layout();
}, 500);
}
});
</script>
</head>
<body>
<div style="margin-bottom:5px;background-color:#ffffff;text-align:left;">
<a href="http://www.photographymedia.com/">
<img
src="photography_media.jpg" style="border:0px;"
alt="PhotographyMedia.com" title="PhotographyMedia" /></a>
</div>
<div id="header">
<h1>Timeline Visualization: Photography Exhibition Catalogues in Artexte Collection (1960-)</h1>
</div>
<div id="loading"><img src="loading.gif" />Loading ...</div>
<div id="content">
<div id="tl" class="timeline-default" style="height: 450px;"></div>
</div>
<div id="footer">
Based on the open source <a href="http://www.simile-widgets.org/timeline/">Timeline</a><br />
E-Artexte visualization integration by Tomasz Neugebauer <br />
Data source: photography exhibition catalogue metadata from <a href="http://e-artexte.ca">e-artexte.ca</a><br />
Documentation: <a href="http://www.photographymedia.com/visualizations/artexte/timeline.html">http://www.photographymedia.com/visualizations/artexte/timeline.html</a><br />
Source Code: <a href="https://github.com/photomedia/SimileTimelineEPrints">github.com/photomedia/SimileTimelineEPrints</a><br />
<div id="fileLastUpdate"></div>
</div>
</body>
</html>