wnw_show 1.1.1 → 1.1.2
Sign up to get free protection for your applications and to get access to all the features.
- data/lib/wnw_show/rails/version.rb +1 -1
- data/sample/list.html +5 -1
- data/vendor/assets/javascripts/wnw_show/list.js.erb +84 -82
- metadata +1 -1
data/sample/list.html
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
<TITLE>WeddinNow List Sample</TITLE>
|
|
7
7
|
<script type=text/javascript src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
|
|
8
8
|
<script type=text/javascript src="js/jquery-ui-1.8.18.custom.min.js"></script>
|
|
9
|
-
<script type=text/javascript src="../javascripts/wnw_show/list.js.erb"></script>
|
|
9
|
+
<script type=text/javascript src="../vendor/assets/javascripts/wnw_show/list.js.erb"></script>
|
|
10
10
|
<script type=text/javascript>
|
|
11
11
|
function init(){
|
|
12
12
|
//画像のリスト
|
|
@@ -23,6 +23,10 @@
|
|
|
23
23
|
// 例) "/js/vendor/wnw_list"
|
|
24
24
|
var contextPath = "/wnw_list"
|
|
25
25
|
|
|
26
|
+
wnw.list.assetPath = function(name) {
|
|
27
|
+
return "/wnw_show/vendor/assets/images/wnw_show/list/" + name;
|
|
28
|
+
};
|
|
29
|
+
|
|
26
30
|
//呼び出し
|
|
27
31
|
wnw.list.display(imageUrlList,message,logoUrl,contextPath);
|
|
28
32
|
};
|
|
@@ -31,52 +31,56 @@ if (!wnw.list) wnw.list = {};
|
|
|
31
31
|
// -------------------------------------
|
|
32
32
|
// 定数
|
|
33
33
|
// -------------------------------------
|
|
34
|
-
var IMAGE_RATIO = 0.6; //画像の拡大サイズ
|
|
35
34
|
var LEFT_MARGIN = 50; //左のマージン
|
|
36
35
|
var TOP_MARGIN = 200; //上のマージン
|
|
37
|
-
var
|
|
38
|
-
|
|
39
|
-
var
|
|
40
|
-
var
|
|
41
|
-
var
|
|
42
|
-
var
|
|
43
|
-
|
|
36
|
+
var BACKGROUND_IMAGE = 'bord.jpg';//背景画像
|
|
37
|
+
//画像
|
|
38
|
+
var MSG_RATIO = 0.6; //画像の拡大サイズ
|
|
39
|
+
var MSG_Y_SPAN = 250; //写真の縦の間隔
|
|
40
|
+
var MSG_ROW_NO = 4; //写真の列数
|
|
41
|
+
var MSG_SPAN_SQEW = 30; //写真の配置のゆがみ
|
|
42
|
+
var MSG_ROTATE_MAX = 2; //画像の傾き角度の最大値
|
|
43
|
+
var MSG_DEL_Y = 500; //画像が消えるときに移動するY方向
|
|
44
|
+
var MSG_DEL_X_SPAN = 100; //画像が消えるときに移動するX方向の幅
|
|
45
|
+
var MSG_DRAG_DISTANCE = 10 ;//これ以上座標を動かすとドラックとみなす
|
|
46
|
+
//ピン
|
|
44
47
|
var PIN_TOP = -10; //ピンが写真のトップからx方向にどれだけずれているか
|
|
45
48
|
var PIN_DEL_Y = -200;//ピンが消えるときに移動するY方向
|
|
46
49
|
var PIN_DEL_X_SPAN = -100;//ピンが消えるときに移動するX方向の幅
|
|
47
50
|
var PIN_WIDTH = 20; //ピンの横幅
|
|
48
51
|
var PIN_IMAGE_PREFIX = "/images/pin-";//ピン画像の接頭辞
|
|
49
52
|
var PIN_IMAGE_SURFIX = ".png"; //ピン画像の接尾辞
|
|
50
|
-
|
|
53
|
+
//画像追加
|
|
51
54
|
var ADD_IMAGE_RANGE_X = 1000;//画像が追加されるときのX座標の範囲
|
|
52
55
|
var ADD_IMAGE_RANGE_Y = 0;//画像が追加されるときのY座標の範囲
|
|
53
|
-
|
|
54
|
-
var
|
|
55
|
-
var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
|
|
56
|
-
var SEITON_BTN_IMAGE = assetPath('seiton.png');//整頓ボタン画像
|
|
56
|
+
//整頓
|
|
57
|
+
var SEITON_BTN_IMAGE = 'seiton.png';//整頓ボタン画像
|
|
57
58
|
var SEITON_LEFT = 1000;//整頓ボタン画像
|
|
58
59
|
var SEITON_TOP = 20;//整頓ボタン画像
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
var
|
|
62
|
-
var
|
|
63
|
-
|
|
64
|
-
var Z_INDEX_BUTTON = 1000;
|
|
65
|
-
var Z_INDEX_ZOOM = 1001;
|
|
60
|
+
var BUTTON_Z_INDEX = 1000;
|
|
61
|
+
//ズーム
|
|
62
|
+
var ZOOM_Z_INDEX = 1001;
|
|
63
|
+
var ZOOM_TIME = 300;//画像が拡大する時の時間[ms]
|
|
64
|
+
//画像前後ボタン
|
|
66
65
|
var Z_INDEX_NEXT_PREV = 1002;
|
|
67
66
|
var NEXT_BUTTON_ID = "nextButton";
|
|
68
67
|
var PREV_BUTTON_ID = "prevButton";
|
|
69
68
|
// ロゴ
|
|
70
|
-
var LOGO_WIDTH = 140;
|
|
71
69
|
//var LOGO_HEIGHT = 150;
|
|
70
|
+
var LOGO_WIDTH = 140;
|
|
72
71
|
var LOGO_LEFT = 50;
|
|
73
72
|
var LOGO_TOP = 30;
|
|
74
73
|
var LOGO_Z_INDEX = 0;
|
|
75
74
|
// 文字
|
|
75
|
+
var MOJI_Z_INDEX = 0;
|
|
76
76
|
var MOJI_TOP = 35;
|
|
77
77
|
var MOJI_LEFT = 200;
|
|
78
78
|
var MOJI_SIZE = 40;
|
|
79
79
|
var MOJI_WIDTH= 1000;
|
|
80
|
+
//var SOUND_FILE = "/sounds/SoundUnit.swf";//ピンが抜ける音
|
|
81
|
+
//var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
|
|
82
|
+
//var DELETE_BTN_IMAGE = assetPath('delete.png');//削除ボタン画像
|
|
83
|
+
//var LOADING_IMAGE = 'loading.gif';//ロード中画像
|
|
80
84
|
|
|
81
85
|
// -------------------------------------
|
|
82
86
|
// 変数
|
|
@@ -96,18 +100,18 @@ if (!wnw.list) wnw.list = {};
|
|
|
96
100
|
|
|
97
101
|
// ピンの画像のURLをランダムで返す
|
|
98
102
|
var getPinImgPath = function() {
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
103
|
+
var imgPaths = [
|
|
104
|
+
wnw.list.assetPath('pin-0.png'),
|
|
105
|
+
wnw.list.assetPath('pin-1.png'),
|
|
106
|
+
wnw.list.assetPath('pin-2.png'),
|
|
107
|
+
wnw.list.assetPath('pin-3.png'),
|
|
108
|
+
wnw.list.assetPath('pin-4.png'),
|
|
109
|
+
wnw.list.assetPath('pin-5.png'),
|
|
110
|
+
wnw.list.assetPath('pin-6.png'),
|
|
111
|
+
wnw.list.assetPath('pin-7.png'),
|
|
112
|
+
wnw.list.assetPath('pin-8.png'),
|
|
113
|
+
wnw.list.assetPath('pin-9.png')
|
|
114
|
+
];
|
|
111
115
|
return imgPaths[Math.floor(Math.random() * 9)];
|
|
112
116
|
};
|
|
113
117
|
|
|
@@ -120,11 +124,11 @@ if (!wnw.list) wnw.list = {};
|
|
|
120
124
|
return Math.floor(Math.random() * x * 2 - x);
|
|
121
125
|
}
|
|
122
126
|
//音を出す
|
|
123
|
-
function playSound(){
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
}
|
|
127
|
+
// function playSound(){
|
|
128
|
+
// var div = document.getElementById("SoundUnit");
|
|
129
|
+
// var innerHTML = '<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase=' + gContextPath + SOUND_CODEBASE + ' width="0" height="0" id="SoundUnit"><param name="movie" value="' + gContextPath + SOUND_FILE + '" /><embed loop=false src="' + gContextPath + SOUND_FILE + '" width="0" height="0" name="SoundUnit" type="application/x-shockwave-flash" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object>';
|
|
130
|
+
// div.innerHTML = innerHTML;
|
|
131
|
+
// }
|
|
128
132
|
|
|
129
133
|
// 画像を表示する
|
|
130
134
|
//
|
|
@@ -142,8 +146,8 @@ if (!wnw.list) wnw.list = {};
|
|
|
142
146
|
.addClass("photo")
|
|
143
147
|
.attr("id","img"+no)
|
|
144
148
|
.attr("no", no)
|
|
145
|
-
.attr("
|
|
146
|
-
.attr("
|
|
149
|
+
.attr("next", no+1)
|
|
150
|
+
.attr("prev", no-1)
|
|
147
151
|
.attr("src",url)
|
|
148
152
|
.attr("orgTop",orgtop)
|
|
149
153
|
.attr("orgLeft",orgleft)
|
|
@@ -158,8 +162,8 @@ if (!wnw.list) wnw.list = {};
|
|
|
158
162
|
"left":left,
|
|
159
163
|
"z-index":zIndex,
|
|
160
164
|
"opacity":0,
|
|
161
|
-
"-webkit-transform": "rotate(" + rand2(
|
|
162
|
-
"-moz-transform": "rotate(" + rand2(
|
|
165
|
+
"-webkit-transform": "rotate(" + rand2(MSG_ROTATE_MAX) + "deg)",
|
|
166
|
+
"-moz-transform": "rotate(" + rand2(MSG_ROTATE_MAX) + "deg)"})
|
|
163
167
|
.click(function(){
|
|
164
168
|
if (gNowDragging){
|
|
165
169
|
//ドラッグの場合はzoomしない
|
|
@@ -178,7 +182,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
178
182
|
};
|
|
179
183
|
})
|
|
180
184
|
.draggable({
|
|
181
|
-
distance :
|
|
185
|
+
distance : MSG_DRAG_DISTANCE,
|
|
182
186
|
start: function(e,ui){
|
|
183
187
|
gNowDragging = true;
|
|
184
188
|
// move photo
|
|
@@ -196,10 +200,10 @@ if (!wnw.list) wnw.list = {};
|
|
|
196
200
|
}
|
|
197
201
|
})
|
|
198
202
|
.load(function(){
|
|
199
|
-
$(this).width($(this).naturalWidth() *
|
|
200
|
-
$(this).height($(this).naturalHeight() *
|
|
201
|
-
$(this).attr("orgWidth",$(this).naturalWidth() *
|
|
202
|
-
$(this).attr("orgHeight",$(this).naturalHeight() *
|
|
203
|
+
$(this).width($(this).naturalWidth() * MSG_RATIO);
|
|
204
|
+
$(this).height($(this).naturalHeight() * MSG_RATIO);
|
|
205
|
+
$(this).attr("orgWidth",$(this).naturalWidth() * MSG_RATIO);
|
|
206
|
+
$(this).attr("orgHeight",$(this).naturalHeight() * MSG_RATIO);
|
|
203
207
|
$(this).css({"opacity":1});
|
|
204
208
|
//pin
|
|
205
209
|
var pin=$("<img />")
|
|
@@ -225,8 +229,8 @@ if (!wnw.list) wnw.list = {};
|
|
|
225
229
|
"opacity":0});
|
|
226
230
|
// drop image animation
|
|
227
231
|
var photo = $("#" +$(this).attr('img_id'));
|
|
228
|
-
photo.animate({"top":photo.offset().top +
|
|
229
|
-
"left":photo.offset().left + rand2(
|
|
232
|
+
photo.animate({"top":photo.offset().top + MSG_DEL_Y ,
|
|
233
|
+
"left":photo.offset().left + rand2(MSG_DEL_X_SPAN),
|
|
230
234
|
"opacity":0});
|
|
231
235
|
});
|
|
232
236
|
$("#bord").append(pin);
|
|
@@ -256,16 +260,8 @@ if (!wnw.list) wnw.list = {};
|
|
|
256
260
|
"top":$("body").scrollTop() + $(window).height()/2,
|
|
257
261
|
"left":$("body").scrollLeft()
|
|
258
262
|
});
|
|
259
|
-
|
|
260
|
-
|
|
261
|
-
$("#" + PREV_BUTTON_ID).hide();
|
|
262
|
-
}else if(_img.attr("no") == gImgUrlList.length - 1){
|
|
263
|
-
$("#" + NEXT_BUTTON_ID).hide();
|
|
264
|
-
$("#" + PREV_BUTTON_ID).show();
|
|
265
|
-
}else{
|
|
266
|
-
$("#" + NEXT_BUTTON_ID).show();
|
|
267
|
-
$("#" + PREV_BUTTON_ID).show();
|
|
268
|
-
}
|
|
263
|
+
$("#" + NEXT_BUTTON_ID).show();
|
|
264
|
+
$("#" + PREV_BUTTON_ID).show();
|
|
269
265
|
//画像
|
|
270
266
|
if($(window).width() > $(window).height()){//横長
|
|
271
267
|
var ratio = 1.0 * $(window).height() / _img.height();
|
|
@@ -285,7 +281,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
285
281
|
_img.attr("orgLeft",_img.offset().left)
|
|
286
282
|
.attr("orgTop",_img.offset().top)
|
|
287
283
|
.attr("orgZIndex",_img.css("z-index"));
|
|
288
|
-
_img.css({"z-index":
|
|
284
|
+
_img.css({"z-index": ZOOM_Z_INDEX});
|
|
289
285
|
_img.animate({"display":"block",
|
|
290
286
|
"position" : "absolute",
|
|
291
287
|
"top": zTop,
|
|
@@ -321,15 +317,15 @@ if (!wnw.list) wnw.list = {};
|
|
|
321
317
|
//整列後の位置を先に計算
|
|
322
318
|
gImgUrlList.push(url);
|
|
323
319
|
var no = gImgList.length;
|
|
324
|
-
var orgtop = TOP_MARGIN + Math.floor(no /
|
|
325
|
-
if(no %
|
|
320
|
+
var orgtop = TOP_MARGIN + Math.floor(no / MSG_ROW_NO ) * MSG_Y_SPAN;
|
|
321
|
+
if(no % MSG_ROW_NO == 0){ //１列目
|
|
326
322
|
var orgleft = LEFT_MARGIN;
|
|
327
323
|
}else{
|
|
328
324
|
leftside = gImgList[no - 1];
|
|
329
325
|
var orgleft = leftside.offset().left + leftside.width();
|
|
330
326
|
}
|
|
331
|
-
orgtop += rand1(
|
|
332
|
-
orgleft += rand1(
|
|
327
|
+
orgtop += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/2;
|
|
328
|
+
orgleft += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/2;
|
|
333
329
|
//実際に表示するのはランダムな位置
|
|
334
330
|
gZIndexMax += 1;
|
|
335
331
|
viewImage(url, rand1(ADD_IMAGE_RANGE_Y),rand1(ADD_IMAGE_RANGE_X),gZIndexMax,orgtop,orgleft,function(){});
|
|
@@ -366,7 +362,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
366
362
|
gMessage = msg;
|
|
367
363
|
|
|
368
364
|
//背景
|
|
369
|
-
$("body").css("background","url(" + BACKGROUND_IMAGE+ ")")
|
|
365
|
+
$("body").css("background","url(" + wnw.list.assetPath(BACKGROUND_IMAGE) + ")")
|
|
370
366
|
.append($("<div/>").attr("id","bord"))
|
|
371
367
|
.append($("<div/>").attr("id","SoundUnit"));
|
|
372
368
|
//loading
|
|
@@ -382,7 +378,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
382
378
|
// "margin" : "0 auto",
|
|
383
379
|
// "padding" : "10",
|
|
384
380
|
// "opacity" : "0.8"})
|
|
385
|
-
// .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + LOADING_IMAGE + "></center>");
|
|
381
|
+
// .html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + assetPath(LOADING_IMAGE) + "></center>");
|
|
386
382
|
|
|
387
383
|
// ロゴ
|
|
388
384
|
$("#bord").append(
|
|
@@ -432,15 +428,15 @@ if (!wnw.list) wnw.list = {};
|
|
|
432
428
|
var no = gImgList.length;
|
|
433
429
|
var url = gImgUrlList[no];
|
|
434
430
|
//位置計算
|
|
435
|
-
var top = TOP_MARGIN + Math.floor(no /
|
|
436
|
-
if(no %
|
|
431
|
+
var top = TOP_MARGIN + Math.floor(no / MSG_ROW_NO ) * MSG_Y_SPAN;
|
|
432
|
+
if(no % MSG_ROW_NO == 0){ //１列目
|
|
437
433
|
var left = LEFT_MARGIN;
|
|
438
434
|
}else{
|
|
439
435
|
leftside = gImgList[no - 1];
|
|
440
436
|
var left = leftside.offset().left + leftside.width();
|
|
441
437
|
}
|
|
442
|
-
top += rand1(
|
|
443
|
-
left += rand1(
|
|
438
|
+
top += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/1.5;
|
|
439
|
+
left += rand1(MSG_SPAN_SQEW) - MSG_SPAN_SQEW/1.5;
|
|
444
440
|
var zIndex = rand1(gZIndexMax);
|
|
445
441
|
viewImage(url,top,left,zIndex,top,left,viewNextImage);
|
|
446
442
|
}else{
|
|
@@ -455,12 +451,15 @@ if (!wnw.list) wnw.list = {};
|
|
|
455
451
|
$("body").append(
|
|
456
452
|
$("<img/>")
|
|
457
453
|
.attr("id",NEXT_BUTTON_ID)
|
|
458
|
-
.attr("src",assetPath('next.png'))
|
|
454
|
+
.attr("src",wnw.list.assetPath('next.png'))
|
|
459
455
|
.click(function(){
|
|
460
|
-
var _id = $("#" + gZoomImgId).attr("
|
|
461
|
-
|
|
456
|
+
var _id = $("#" + gZoomImgId).attr("next");
|
|
457
|
+
if(_id == gImgList.length){
|
|
458
|
+
_id = 0;
|
|
459
|
+
}
|
|
460
|
+
console.log("nextZoom:" + gZoomImgId + "->" + "img" + _id );
|
|
462
461
|
unzoom(gZoomImgId);
|
|
463
|
-
zoom(_id);
|
|
462
|
+
zoom("img" + _id ) ;
|
|
464
463
|
})
|
|
465
464
|
.css({
|
|
466
465
|
"position":"absolute" ,
|
|
@@ -474,12 +473,15 @@ if (!wnw.list) wnw.list = {};
|
|
|
474
473
|
$("body").append(
|
|
475
474
|
$("<img/>")
|
|
476
475
|
.attr("id",PREV_BUTTON_ID)
|
|
477
|
-
.attr("src",assetPath('prev.png'))
|
|
476
|
+
.attr("src",wnw.list.assetPath('prev.png'))
|
|
478
477
|
.click(function(){
|
|
479
|
-
var _id = $("#" + gZoomImgId).attr("
|
|
480
|
-
|
|
478
|
+
var _id = $("#" + gZoomImgId).attr("prev");
|
|
479
|
+
if(_id == -1){
|
|
480
|
+
_id = gImgList.length - 1;
|
|
481
|
+
}
|
|
482
|
+
console.log("nextZoom:" + gZoomImgId + "->" + "img" +_id );
|
|
481
483
|
unzoom(gZoomImgId);
|
|
482
|
-
zoom(_id);
|
|
484
|
+
zoom("img" + _id );
|
|
483
485
|
})
|
|
484
486
|
.css({
|
|
485
487
|
"position":"absolute" ,
|
|
@@ -497,7 +499,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
497
499
|
// .css({"position":"absolute" ,
|
|
498
500
|
// "top":10 ,
|
|
499
501
|
// "left":1000 ,
|
|
500
|
-
// "z-index" :
|
|
502
|
+
// "z-index" :BUTTON_Z_INDEX})
|
|
501
503
|
// .click(function(){alert("削除したい写真をここにドロップしてください");})
|
|
502
504
|
// .droppable({
|
|
503
505
|
// drop: function(e,ui) {
|
|
@@ -507,7 +509,6 @@ if (!wnw.list) wnw.list = {};
|
|
|
507
509
|
// var url = img.attr('msg_id');
|
|
508
510
|
// $.ajax({type: "delete",url: url});
|
|
509
511
|
// img.css({"display":"none"});
|
|
510
|
-
|
|
511
512
|
// }
|
|
512
513
|
// },
|
|
513
514
|
// tolerance: "pointer"
|
|
@@ -516,12 +517,12 @@ if (!wnw.list) wnw.list = {};
|
|
|
516
517
|
//整頓ボタン
|
|
517
518
|
$("#bord").append(
|
|
518
519
|
$("<img/>")
|
|
519
|
-
.attr("src", SEITON_BTN_IMAGE)
|
|
520
|
+
.attr("src", wnw.list.assetPath(SEITON_BTN_IMAGE))
|
|
520
521
|
.css({
|
|
521
522
|
"position":"absolute" ,
|
|
522
523
|
"top":SEITON_TOP ,
|
|
523
524
|
"left":SEITON_LEFT ,
|
|
524
|
-
"z-index" :
|
|
525
|
+
"z-index" :BUTTON_Z_INDEX })
|
|
525
526
|
.click(reset));
|
|
526
527
|
|
|
527
528
|
};
|
|
@@ -530,6 +531,7 @@ if (!wnw.list) wnw.list = {};
|
|
|
530
531
|
wnw.list.display = display;
|
|
531
532
|
wnw.list.addImage = addImage;
|
|
532
533
|
wnw.list.reset = reset;
|
|
534
|
+
wnw.list.assetPath = assetPath;
|
|
533
535
|
})();
|
|
534
536
|
|
|
535
537
|
|