回答編集履歴
3
lightboxを差し替えたのでサンプルを提示しなおす
answer
CHANGED
|
@@ -1,20 +1,239 @@
|
|
|
1
|
+
すみません。
|
|
1
|
-
|
|
2
|
+
これで。
|
|
3
|
+
lightbox 本家のやつは微妙に使いにくいので変更しました。
|
|
2
4
|
|
|
3
|
-
と
|
|
5
|
+
初期表示、ちょっと CSS つかって枠がついています。
|
|
4
|
-
1.現在のhtmlやスクリプトを一切触らずに1行挿入するだけで動くのがいい
|
|
5
|
-
（↓取り消し）
|
|
6
|
-
1.既存htmlをびた一文触ることなく1行の修正すら許可しないが、サーバーサイドでインターセプターくらいなら使ってもいいかな、レベル
|
|
7
|
-
（↑取り消し）
|
|
8
|
-
|
|
6
|
+
](9189968c6e96f164c2456e111759afd1.png)
|
|
9
|
-
1.全部作ってくれなんて言ってないので少しは自分で解決でくる余地を残してほしい、レベル
|
|
10
7
|
|
|
8
|
+
画像選択すると、lightbox 本家のものよりだいぶ残念な結果ですが、オプションで調整できると思うので
|
|
9
|
+
そこらへんはお任せします。
|
|
11
10
|
|
|
12
|
-
（↓取り消し）
|
|
13
|
-
どれがご希望でしょうか。
|
|
14
|
-
|
|
11
|
+
|
|
15
|
-
（↑取り消し）
|
|
16
12
|
|
|
13
|
+
0. index.html utf-8 で保存すること
|
|
14
|
+
```HTML
|
|
15
|
+
<!DOCTYPE html>
|
|
16
|
+
<html>
|
|
17
|
+
<head>
|
|
17
|
-
|
|
18
|
+
<meta charset="UTF-8">
|
|
19
|
+
<title>CSVリスト読み＆画像一覧表示</title>
|
|
20
|
+
<link rel="stylesheet" href="Nivo-Lightbox-master/nivo-lightbox.css" type="text/css" />
|
|
21
|
+
<link rel="stylesheet" href="Nivo-Lightbox-master/themes/default/default.css" type="text/css" />
|
|
22
|
+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
|
|
23
|
+
<script src="Nivo-Lightbox-master/nivo-lightbox.min.js"></script>
|
|
18
24
|
|
|
19
|
-
|
|
20
|
-
|
|
25
|
+
<script src="dataBind.js" charset="utf-8"></script>
|
|
26
|
+
|
|
27
|
+
<!--
|
|
28
|
+
本家 lightbox よりも軽く、 onload で動作しない、 nivo-lightbox を使います。
|
|
29
|
+
デフォルトだとアニメーションとか凝ったうごきをしませんが、こっちの方が確実です。
|
|
30
|
+
|
|
31
|
+
じゃんけんの素材は、
|
|
32
|
+
https://www.google.co.jp/search?q=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93+%E7%94%BB%E5%83%8F&oq=%E3%81%98%E3%82%83%E3%82%93%E3%81%91%E3%82%93%E3%80%80%E7%94%BB%E5%83%8F&aqs=chrome..69i57j0l5.3654j0j4&sourceid=chrome&es_sm=91&ie=UTF-8
|
|
33
|
+
|
|
34
|
+
＜Nivo lightbox＞
|
|
35
|
+
Github からダウンロードし、解凍したら、index.html と同じところに、Nivo-lightbox-master/ フォルダごと
|
|
36
|
+
コピーしてください。
|
|
37
|
+
|
|
38
|
+
-->
|
|
39
|
+
|
|
40
|
+
<style>
|
|
41
|
+
div.ui-databind-images {
|
|
42
|
+
border-radius: 8px;
|
|
43
|
+
border: solid 1px #CCC;
|
|
44
|
+
background-color: #EEE;
|
|
45
|
+
width: 90%;
|
|
46
|
+
}
|
|
47
|
+
div.ui-databind-images ul {
|
|
48
|
+
margin: 0;
|
|
49
|
+
padding: 0;
|
|
50
|
+
}
|
|
51
|
+
div.ui-databind-images ul li {
|
|
52
|
+
display: inline-block;
|
|
53
|
+
width: 38px;
|
|
54
|
+
height: 32px;
|
|
55
|
+
}
|
|
56
|
+
div.ui-databind-images span:after {
|
|
57
|
+
content:"Images";
|
|
58
|
+
vertical-align: top;
|
|
59
|
+
border-radius: 4px;
|
|
60
|
+
border: solid 1px #CCC;
|
|
61
|
+
font-weight: bolder;
|
|
62
|
+
color: red;
|
|
63
|
+
font-family: "Arial Narrow";
|
|
64
|
+
font-size: 9pt;
|
|
65
|
+
padding: 0 1em 0 0.5em;
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
}
|
|
69
|
+
div.ui-databind-images a {
|
|
70
|
+
|
|
71
|
+
margin-left: 0.5em;
|
|
72
|
+
}
|
|
73
|
+
</style>
|
|
74
|
+
|
|
75
|
+
</head>
|
|
76
|
+
<body>
|
|
77
|
+
<script>
|
|
78
|
+
/**
|
|
79
|
+
* Download :: https://github.com/gilbitron/Nivo-Lightbox
|
|
80
|
+
* Document and Tutorials :: http://docs.dev7studios.com/jquery-plugins/nivo-lightbox
|
|
81
|
+
*/
|
|
82
|
+
//
|
|
83
|
+
// 本家 lightbox.start($link) をベタスクリプトから追いかけましたが、どうも、init() を通ってないです。
|
|
84
|
+
// いきなりイベントハンドラだけ設定したりとか、動きがどうも怪しいので、類似派生系の Nivo-lightbox を
|
|
85
|
+
// 使います。こいつは、スクリプトで追加する専用かな？Download& Document HP を見ると、script から設定
|
|
86
|
+
// する方法しか記述されていません。
|
|
87
|
+
// アニメーションしたいとか、フェードIN/OUT にもう少し凝りたいとか、要求が出てきたら、ご自分で調整してみて
|
|
88
|
+
// ください。
|
|
89
|
+
// 引数１個増やして、<a/><img/> タグ描画完了時にコールバックを呼び出すように変更しました。
|
|
90
|
+
// このコールバックの引数に、 <a/> を囲った div を設定するので、以下のように、lightbox を初期化してください。
|
|
91
|
+
//
|
|
92
|
+
initDataBindActiveXControl("test/list1.txt", "group_test1", function($div) {
|
|
93
|
+
$div.find("a").nivoLightbox();
|
|
94
|
+
});
|
|
95
|
+
initDataBindActiveXControl("test2/list1.txt", "group_test2", function($div) {
|
|
96
|
+
$div.find("a").nivoLightbox();
|
|
97
|
+
});
|
|
98
|
+
</script>
|
|
99
|
+
|
|
100
|
+
</body>
|
|
101
|
+
</html>
|
|
102
|
+
```
|
|
103
|
+
0. dataBind.js utf-8 で保存すること
|
|
104
|
+
```JavaScript
|
|
105
|
+
function initDataBindActiveXControl(listUrl, lightboxGroupLabel, doneCallback) {
|
|
106
|
+
/**
|
|
107
|
+
* オリジナルソースがちょっと残念な結果だったので、list1.txt を読み込んでごにょごにょする
|
|
108
|
+
* 方法に変更します。
|
|
109
|
+
*/
|
|
110
|
+
var listFolder = listUrl.substring(0, listUrl.lastIndexOf("/"));
|
|
111
|
+
|
|
112
|
+
//alert(listFolder);
|
|
113
|
+
var CSV = null;
|
|
114
|
+
var CSV_HEADER = null;
|
|
115
|
+
var CSV_LINES = [];
|
|
116
|
+
var CONSTRUCTOR = null;
|
|
117
|
+
|
|
118
|
+
doneCallback = doneCallback || function(div) {};
|
|
119
|
+
|
|
120
|
+
/**
|
|
121
|
+
* コールバックに渡すタグ構成は、
|
|
122
|
+
* <div class="ui-databind-images">
|
|
123
|
+
* <span></span>
|
|
124
|
+
* <ul>
|
|
125
|
+
* <li><a><img /></a></li>
|
|
126
|
+
* // 画像個数分列挙
|
|
127
|
+
* </ul>
|
|
128
|
+
* </div>
|
|
129
|
+
*
|
|
130
|
+
*/
|
|
131
|
+
function renderHtmlForLightbox2(baseUrl, groupLabel) {
|
|
132
|
+
var div = $("<div />");
|
|
133
|
+
|
|
134
|
+
div.addClass("ui-databind-images");
|
|
135
|
+
|
|
136
|
+
div.append($("<span />"));
|
|
137
|
+
var ul = $("<ul />");
|
|
138
|
+
|
|
139
|
+
$(CSV_LINES).each(function(i, o) {
|
|
140
|
+
var li = $("<li />");
|
|
141
|
+
var anc = $("<a />");
|
|
142
|
+
anc.attr("href", baseUrl + "/" + o.image);
|
|
143
|
+
anc.attr("title", o.no);
|
|
144
|
+
anc.attr("data-lightbox", groupLabel);
|
|
145
|
+
anc.attr("data-title", o.no);
|
|
146
|
+
anc.attr("rel", "lightbox");
|
|
147
|
+
|
|
148
|
+
var img = $("<img />");
|
|
149
|
+
img.attr("src", baseUrl + "/" + o.image);
|
|
150
|
+
img.attr("width", "32px");
|
|
151
|
+
img.attr("height", "32px");
|
|
152
|
+
img.attr("border", "none");
|
|
153
|
+
|
|
154
|
+
anc.append(img);
|
|
155
|
+
li.append(anc);
|
|
156
|
+
ul.append(li);
|
|
157
|
+
});
|
|
158
|
+
|
|
159
|
+
div.append(ul);
|
|
160
|
+
$(document.body).append(div);
|
|
161
|
+
|
|
162
|
+
doneCallback(div);
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
function sjisText2Csv(text) {
|
|
166
|
+
var arr = [];
|
|
167
|
+
var lines = [];
|
|
168
|
+
|
|
169
|
+
CSV_HEADER = null;
|
|
170
|
+
|
|
171
|
+
// 受信データの改行コードは、¥r¥n でした。
|
|
172
|
+
// split(/¥r¥n|¥r|¥n/) で分割できないんですけど、何か違います？
|
|
173
|
+
// firefox では分割できたのに、chrome はなんでできないの？
|
|
174
|
+
//
|
|
175
|
+
$(escape(text).split(/%0D%0A/ig)).each(function(i, line) {
|
|
176
|
+
line = unescape(line);
|
|
177
|
+
if (line != "") {
|
|
178
|
+
if (i == 0)
|
|
179
|
+
CSV_HEADER = line.split(/,/);
|
|
180
|
+
else
|
|
181
|
+
lines.push(line.split(/,/));
|
|
182
|
+
}
|
|
183
|
+
});
|
|
184
|
+
|
|
185
|
+
var strBean = "function(m){";
|
|
186
|
+
var toStr = "this.toString = function(){return '['";
|
|
187
|
+
$(CSV_HEADER).each(function(i, ele) {
|
|
188
|
+
if (ele.trim() != "") {
|
|
189
|
+
strBean += "this." + ele + "=m[" + i + "];";
|
|
190
|
+
toStr += " + this." + ele + " + ', ' ";
|
|
191
|
+
}
|
|
192
|
+
});
|
|
193
|
+
toStr += " + ']';}";
|
|
194
|
+
strBean += toStr;
|
|
195
|
+
strBean += "}";
|
|
196
|
+
|
|
197
|
+
//alert(strBean);
|
|
198
|
+
|
|
199
|
+
CONSTRUCTOR = eval("(" + strBean + ")");
|
|
200
|
+
|
|
201
|
+
$(lines).each(function(i, x) {
|
|
202
|
+
CSV_LINES.push(new CONSTRUCTOR(x));
|
|
203
|
+
});
|
|
204
|
+
|
|
205
|
+
/*
|
|
206
|
+
$(CSV_LINES).each(function(i, o) {
|
|
207
|
+
alert("(no,image,name)=" + o.no + "//" + o.image + "//" + o.name);
|
|
208
|
+
});
|
|
209
|
+
*/
|
|
210
|
+
}
|
|
211
|
+
|
|
212
|
+
// listUrl ファイルを受信してセットアップする
|
|
213
|
+
$.ajax({
|
|
214
|
+
url: listUrl,
|
|
215
|
+
dataType:"text",
|
|
216
|
+
async: false,
|
|
217
|
+
beforeSend: function(xhr) {
|
|
218
|
+
//SJIS 文字コードのCSVファイルを読み込むための設定
|
|
219
|
+
// ここをコメントアウトすると文字化けします。
|
|
220
|
+
// 理由：ダウンロードしたテキストCSVファイル内容を utf-8 文字コードで解析するため。
|
|
221
|
+
xhr.overrideMimeType("text/html; charset=SHIFT_JIS");
|
|
222
|
+
},
|
|
223
|
+
complete: function(xhr) {
|
|
224
|
+
sjisText2Csv(xhr.responseText, this.url);
|
|
225
|
+
renderHtmlForLightbox2(listFolder, lightboxGroupLabel);
|
|
226
|
+
},
|
|
227
|
+
error: function(x,y,z) {
|
|
228
|
+
alert(x + "::" + y + "::" + z);
|
|
229
|
+
}
|
|
230
|
+
});
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
```
|
|
234
|
+
|
|
235
|
+
動作確認は、java/動的WebProject/ Java は一切使わず、Chrome47 for mac で確認。
|
|
236
|
+
|
|
237
|
+
この書き込みの内容でお願いしますね、
|
|
238
|
+
CSS は若干怪しいので改善してみてください。
|
|
239
|
+
|
2
一時解答と詳細が分かってきたので一部訂正
answer
CHANGED
|
@@ -2,10 +2,19 @@
|
|
|
2
2
|
|
|
3
3
|
とりあえず動くものつくりました。
|
|
4
4
|
1.現在のhtmlやスクリプトを一切触らずに1行挿入するだけで動くのがいい
|
|
5
|
+
（↓取り消し）
|
|
5
6
|
1.既存htmlをびた一文触ることなく1行の修正すら許可しないが、サーバーサイドでインターセプターくらいなら使ってもいいかな、レベル
|
|
7
|
+
（↑取り消し）
|
|
6
8
|
1.とりあえず今までは、dhtmlの機能のせいでie限定だったけど少しくらいなら既存コード触ってもいいからマルチブラウザに対応したい、レベル
|
|
7
9
|
1.全部作ってくれなんて言ってないので少しは自分で解決でくる余地を残してほしい、レベル
|
|
8
10
|
|
|
11
|
+
|
|
12
|
+
（↓取り消し）
|
|
9
13
|
どれがご希望でしょうか。
|
|
10
|
-
やってることは実にヘッポコです。ステップ数も100行くらい。いや、200行はあったかな。変な書き方で行数が増えたせいかもしれません。
|
|
14
|
+
やってることは実にヘッポコです。ステップ数も100行くらい。いや、200行はあったかな。変な書き方で行数が増えたせいかもしれません。
|
|
15
|
+
（↑取り消し）
|
|
16
|
+
|
|
11
|
-
jquery で手抜きしたので、最低のやつで2行追加修正が必要です。
|
|
17
|
+
jquery で手抜きしたので、最低のやつで2行追加修正が必要です。
|
|
18
|
+
|
|
19
|
+
2015/12/12 深夜、訂正。インターセプターではなくて、レスポンスフィルターという名前らしいです。
|
|
20
|
+
が、知らないよね。
|
1
行末処理、やっぱり使いにくいわ。
answer
CHANGED
|
@@ -2,9 +2,9 @@
|
|
|
2
2
|
|
|
3
3
|
とりあえず動くものつくりました。
|
|
4
4
|
1.現在のhtmlやスクリプトを一切触らずに1行挿入するだけで動くのがいい
|
|
5
|
-
1.既存htmlをびた一文触ることなく1行の修正すら許可しないが、サーバーサイドでインターセプターくらいなら使ってもいいかな、レベル
|
|
5
|
+
1.既存htmlをびた一文触ることなく1行の修正すら許可しないが、サーバーサイドでインターセプターくらいなら使ってもいいかな、レベル
|
|
6
|
-
1.とりあえず今までは、dhtmlの機能のせいでie限定だったけど少しくらいなら既存コード触ってもいいからマルチブラウザに対応したい、レベル
|
|
6
|
+
1.とりあえず今までは、dhtmlの機能のせいでie限定だったけど少しくらいなら既存コード触ってもいいからマルチブラウザに対応したい、レベル
|
|
7
|
-
1.全部作ってくれなんて言ってないので少しは自分で解決でくる余地を残してほしい、レベル
|
|
7
|
+
1.全部作ってくれなんて言ってないので少しは自分で解決でくる余地を残してほしい、レベル
|
|
8
8
|
|
|
9
9
|
どれがご希望でしょうか。
|
|
10
10
|
やってることは実にヘッポコです。ステップ数も100行くらい。いや、200行はあったかな。変な書き方で行数が増えたせいかもしれません。
|