すみません。test.zip の中身を見せてもらいました。
index.html がちょっと残念な予想だったので、少し記述を改めました。
設置方法は、各資料に書いてあります。
まずは、http://altair.site/~sample01/ 以下に配置して表示されるまでを確認してみてください。
html
1<!DOCTYPE html>
2<html>
3<head>
4<meta charset="UTF-8">
5<title>Insert title here</title>
6 <link href="lightbox2-master/dist/css/lightbox.css" rel="stylesheet" />
7 <script src="http://code.jquery.com/jquery-1.10.2.js"></script>
8 <script src="dataBind.js" charset="utf-8"></script>
9<!--
10lightbox2 について、
11以下のHPからダウンロードし、解凍したら、
12この index.html と同じ階層に lightbox2-master/ フォルダをコピペしてください。
13http://lokeshdhakar.com/projects/lightbox2/
14
15じゃんけんの素材は、
16https://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
17
18 -->
19
20
21</head>
22<body>
23<script>
24// リストが複数ある場合は、ここをコピペして、内容をかえてください
25// 引数1個目:CSV ファイルのパス
26// 引数2個目: lightbox が判別する グループ名称、これを全部一緒にすると、全画像が繋がります。
27// メソッド名がなんやらそんな感じですが、オリジナルの HTML を実際に拝見してちょっと萎えました。
28// このファイルを
29// http://altair.site/~sample01/index.hrml すげ替えるだけで動作します。
30// test/ フォルダのような list.txt と画像群が1セットになったフォルダが他にもあるなら、
31// image01, image02, image03 ... などと適当フォルダ名をつけて、この index.html
32// と同じ階層に突っ込んでください。
33// initDataBindActiveXControl("image01/list1.txt", "GROUP1");
34// initDataBindActiveXControl("image02/list1.txt", "GROUP2");
35// initDataBindActiveXControl("image03/list1.txt", "GROUP3");
36// initDataBindActiveXControl("image04/list1.txt", "GROUP4");
37// initDataBindActiveXControl("image05/list1.txt", "GROUP5");
38//
39// 上記のように定義すると、水平線を境界にした小さい画像の並びが5段できます。
40// どの画像でもクリックすれば拡大イメージが表示されます。あとは触って確認して
41// ください。
42//
43initDataBindActiveXControl("test/list1.txt", "group_test1");
44initDataBindActiveXControl("test2/list1.txt", "group_test2");
45</script>
46
47<!--
48ここで lightbox を読んでる・・・サンプルね。サンプルの通りにすると動作するが、
49上にもってくと動作しない・・・
50 -->
51 <script src="lightbox2-master/dist/js/lightbox-plus-jquery.min.js"></script>
52
53</body>
54</html>
上、utf-8 形式、index.html で保存してください。
JavaScript
1function initDataBindActiveXControl(listUrl, lightboxGroupLabel) {
2 3 * オリジナルソースがちょっと残念な結果だったので、list1.txt を読み込んでごにょごにょする
4 * 方法に変更します。
5
6 var listFolder = listUrl.substring(0, listUrl.lastIndexOf("/"));
7
8 //alert(listFolder);
9 var CSV = null;
10 var CSV_HEADER = null;
11 var CSV_LINES = [];
12 var CONSTRUCTOR = null;
13
14 function renderHtmlForLightbox2(baseUrl, groupLabel) {
15 var div = $("<div />");
16
17 $(CSV_LINES).each(function(i, o) {
18 var anc = $("<a />");
19 anc.attr("href", baseUrl + "/" + o.image);
20 anc.attr("title", o.no);
21 anc.attr("data-lightbox", groupLabel);
22 anc.attr("data-title", o.no);
23 anc.attr("rel", "lightbox");
24
25 var img = $("<img />");
26 img.attr("src", baseUrl + "/" + o.image);
27 img.attr("width", "32px");
28 img.attr("height", "32px");
29 img.attr("border", "none");
30
31 anc.append(img);
32 div.append(anc);
33 });
34
35 $(document.body).append(div);
36 $(document.body).append("<hr />");
37
38 }
39
40 function sjisText2Csv(text) {
41 var arr = [];
42 var lines = [];
43
44 CSV_HEADER = null;
45
46 // 受信データの改行コードは、¥r¥n でした。
47 // split(/¥r¥n|¥r|¥n/) で分割できないんですけど、何か違います?
48 // firefox では分割できたのに、chrome はなんでできないの?
49 //
50 $(escape(text).split(/%0D%0A/ig)).each(function(i, line) {
51 line = unescape(line);
52 if (line != "") {
53 if (i == 0)
54 CSV_HEADER = line.split(/,/);
55 else
56 lines.push(line.split(/,/));
57 }
58 });
59
60 var strBean = "function(m){";
61 var toStr = "this.toString = function(){return '['";
62 $(CSV_HEADER).each(function(i, ele) {
63 if (ele.trim() != "") {
64 strBean += "this." + ele + "=m[" + i + "];";
65 toStr += " + this." + ele + " + ', ' ";
66 }
67 });
68 toStr += " + ']';}";
69 strBean += toStr;
70 strBean += "}";
71
72 //alert(strBean);
73
74 CONSTRUCTOR = eval("(" + strBean + ")");
75
76 $(lines).each(function(i, x) {
77 CSV_LINES.push(new CONSTRUCTOR(x));
78 });
79
80 /*
81 $(CSV_LINES).each(function(i, o) {
82 alert("(no,image,name)=" + o.no + "//" + o.image + "//" + o.name);
83 });
84 */
85 }
86
87 // listUrl ファイルを受信してセットアップする
88 $.ajax({
89 url: listUrl,
90 dataType:"text",
91 async: false,
92 beforeSend: function(xhr) {
93 //SJIS 文字コードのCSVファイルを読み込むための設定
94 // ここをコメントアウトすると文字化けします。
95 // 理由:ダウンロードしたテキストCSVファイル内容を utf-8 文字コードで解析するため。
96 xhr.overrideMimeType("text/html; charset=SHIFT_JIS");
97 },
98 complete: function(xhr) {
99 sjisText2Csv(xhr.responseText, this.url);
100 renderHtmlForLightbox2(listFolder, lightboxGroupLabel);
101 },
102 error: function(x,y,z) {
103 alert(x + "::" + y + "::" + z);
104 }
105 });
106}
107
上、utf-8 形式で、dataBind.js で保存。
utf-8 形式で編集可能な windows のエディタは、さくらエディタが有名です。
適当にダウンロードしてご利用ください。
バッドをするには、ログインかつ
こちらの条件を満たす必要があります。
2015/12/10 23:42
2015/12/11 10:05
2015/12/11 14:14
2015/12/11 15:41
2015/12/11 15:46