forked from santex/active-memory-paper
-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathslide.html
More file actions
216 lines (174 loc) · 6.41 KB
/
slide.html
File metadata and controls
216 lines (174 loc) · 6.41 KB
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
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
<!DOCTYPE html>
<html><head><meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
body{
z-index:0;
margin:0;
padding:0;
font-family:Arial, Helvetica, sans-serif;
background: rgb(0, 0, 0)
}
#wrapper{
position:absolute;
font-family:Arial, Helvetica, sans-serif;
margin-right:0%;
width:100%;
height:1000px;
z-index:1;
top:0;
zoom:1;
opacity:.9
}
.text{
position:absolute;
bottom:0px;
width:80%;
right:100px;
background: rgba(0, 0, 0,.5);
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
}
#gallery{
position:absolute;
bottom:0;
left:0;
}
#controls div{
display:inline-block;
padding:5px;
margin:1px;
color:#000;
background:rgba(255,255,255,.5);
border:1px solid #fff;
-moz-border-radius:4px;
-webkit-border-radius:4px;
-o-border-radius:4px;
border-radius:4px;
}
#controls div:hover:not(.counter){
background:rgba(255,255,255,.9);
}
#controls div.sel{
background:rgba(255,255,255,.9);
}
#controls div:not(.counter){
cursor:pointer;
}
.imgContainer{
width:100px;
height:100px;
overflow:hidden;
display:inline-block;
}
.imgContainer img{
width:160px;
}
</style>
<script type="text/javascript" src="./slide_files/jquery.min.js"></script>
<script type="text/javascript" src="./slide_files/mb.bgndGallery.js"></script>
<!--<script type="text/javascript" src="../jquery/jquery-1.5rc1.js"></script>-->
<script type="text/javascript" src="./slide_files/jquery.metadata.js"></script>
<script type="text/javascript" src="./slide_files/jquery.hoverIntent.js"></script>
<script type="text/javascript" src="./slide_files/mbMenu.js"></script>
<!--<link rel="stylesheet" type="text/css" href="css/menu_black.css" media="screen" />-->
<link rel="stylesheet" type="text/css" href="./slide_files/menu_black.css" media="screen">
<script type="text/javascript">
//this function get the id of the element that fires the context menu.
function testForContextMenu(el){
if (!el) el= $.mbMenu.lastContextMenuEl;
showMessage("the ID of the element is: "+$(el).attr("id"));
}
function recallcMenu(el){
if (!el) el= $.mbMenu.lastContextMenuEl;
var cmenu=+$(el).attr("cmenu");
$(cmenu).remove();
}
function loadFlash(){
$.ajax({
url:"testFlash/test.html",
success:function(html){
$("#flashTest").html(html);
}
});
}
function showMessage(msg){
var msgBox=$("<div>").addClass("msgBox");
$("body").append(msgBox);
msgBox.append(msg);
setTimeout(function(){msgBox.fadeOut(1500,function(){msgBox.remove();})},1000)
}
</script>
<script type="text/javascript">
$(function(){
$.mbBgndGallery.buildGallery({
containment:"#wrapper",
// containment:"body",
timer:1500,
effTimer:1500,
controls:"#controls",
grayScale:false,
// If your server allow directory listing
// folderPath:"elements/",
// else:
images:[{"img":"./slide_files/aircraft.png","txt":"aircraft"},
{"img":"./slide_files/computer.png","txt":"computer"},
{"img":"./slide_files/logic.png","txt":"the search is logic"},
{"img":"./slide_files/ocean.png","txt":"the search is ocean"},
{"img":"./slide_files/terror.png","txt":"the search is terror"},
{"img":"./slide_files/algorithm.png","txt":"the search is algorithm"},
{"img":"./slide_files/electricity.png","txt":"searching with electricity score is 0"},
{"img":"./slide_files/Messier.png","txt":"searching with Messier (cataloge)"},
{"img":"./slide_files/plasma.png","txt":"searching with plasma"},
{"img":"./slide_files/tool.png","txt":"searching with tool"},
{"img":"./slide_files/apple.png","txt":"searching with apple"},
{"img":"./slide_files/engineering.png","txt":"searching with engineering"},
{"img":"./slide_files/NGC.png","txt":"searching with NGC (cataloge)"},
{"img":"./slide_files/sex.png","txt":"searching with sex"},
{"img":"./slide_files/climate.png","txt":"searching with climate"},
{"img":"./slide_files/environmental.png","txt":"searching with environmental"},
{"img":"./slide_files/observ.png","txt":"searching with observ"},
{"img":"./slide_files/space.png","txt":"searching with space"},
{"img":"./slide_files/plugin.png","txt":"the wiki plugin is running"},
{"img":"./slide_files/research-base-001.png","txt":"thinking about eliminating network distance"},
// {"img":"./slide_files/space001.png","txt":"shows space super tiny"},
// {"img":"./slide_files/historical.png","txt":"shows historical super tiny"},
// {"img":"./slide_files/war.png","txt":"shows historical super tiny"}],
onStart:function(){$("#controls .play").hide();$("#controls .pause").show();},
onPause:function(){$("#controls .play").show();$("#controls .pause").hide();},
onPlay:function(opt){$("#controls .play").hide();$("#controls .pause").show();},
onChange:function(idx){}, //idx=the zero based index of the displayed photo
onNext:function(opt){}, //opt=the options relatives to this component instance
onPrev:function(opt){} //opt=the options relatives to this component instance
});
$(".bw").toggle(
function(){
var el=$("body").get(0);
el.opt.grayScale=true;
$(this).addClass("sel");
// el.opt.gallery.find("img:first").greyScale();
},
function(){
var el=$("body").get(0);
el.opt.grayScale=false;
$(this).removeClass("sel");
// el.opt.gallery.find("img:first").attr("src",el.opt.images[el.opt.imageCounter]);
}
)
});
</script>
</head><body>
<div id="wrapper"></div><div style="position: absolute; min-height: 100%; min-width: 100%; z-index: 3; ">
<div id="controls" >
<div class="containerContent message" id="xm" style="width:49%;height:32px;">Message</div>
<div class="containerContent" style="width:49%;position:absolute;height:32px;right:0px;top:0px;">
<div class="pause" style="">pause</div>
<div class="play" style="display: none; ">play</div>
<div class="prev">prev</div>
<div class="next">next</div>
<div class="counter">3 / 11</div>
</div>
</div>
</div></div>
</body></html>