wnw_show 0.0.1
Sign up to get free protection for your applications and to get access to all the features.
- data/.gitignore +17 -0
- data/Gemfile +4 -0
- data/LICENSE.txt +22 -0
- data/README.md +29 -0
- data/Rakefile +1 -0
- data/lib/wnw_show/rails/engine.rb +6 -0
- data/lib/wnw_show/rails/version.rb +5 -0
- data/lib/wnw_show/rails.rb +8 -0
- data/lib/wnw_show.rb +1 -0
- data/vendor/assets/audios/wnw_show/show/SoundUnit.swf +0 -0
- data/vendor/assets/audios/wnw_show/show/pin0.swf +0 -0
- data/vendor/assets/audios/wnw_show/show/swflash.cab +0 -0
- data/vendor/assets/images/wnw_show/list/bord.jpg +0 -0
- data/vendor/assets/images/wnw_show/list/delete.png +0 -0
- data/vendor/assets/images/wnw_show/list/gomi.png +0 -0
- data/vendor/assets/images/wnw_show/list/loading.gif +0 -0
- data/vendor/assets/images/wnw_show/list/pin-0.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-1.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-2.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-3.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-4.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-5.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-6.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-7.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-8.png +0 -0
- data/vendor/assets/images/wnw_show/list/pin-9.png +0 -0
- data/vendor/assets/images/wnw_show/list/seiton.png +0 -0
- data/vendor/assets/images/wnw_show/show/background.png +0 -0
- data/vendor/assets/images/wnw_show/show/env0.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env1.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env10.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env11.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env12.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env2.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env3.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env4.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env5.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env6.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env7.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env8.gif +0 -0
- data/vendor/assets/images/wnw_show/show/env9.gif +0 -0
- data/vendor/assets/images/wnw_show/show/kirakira2.gif +0 -0
- data/vendor/assets/images/wnw_show/show/null.gif +0 -0
- data/vendor/assets/images/wnw_show/show/tori.png +0 -0
- data/vendor/assets/images/wnw_show/swipe/bord.jpg +0 -0
- data/vendor/assets/images/wnw_show/swipe/icons.png +0 -0
- data/vendor/assets/images/wnw_show/swipe/loader.gif +0 -0
- data/vendor/assets/javascripts/wnw_show/index.js +3 -0
- data/vendor/assets/javascripts/wnw_show/list.js.erb +388 -0
- data/vendor/assets/javascripts/wnw_show/show.js.erb +646 -0
- data/vendor/assets/javascripts/wnw_show/swipe.js +185 -0
- data/vendor/assets/stylesheets/wnw_show/index.css +3 -0
- data/vendor/assets/stylesheets/wnw_show/swipe.css.erb +214 -0
- data/wnw_show.gemspec +19 -0
- metadata +99 -0
data/.gitignore
ADDED
data/Gemfile
ADDED
data/LICENSE.txt
ADDED
@@ -0,0 +1,22 @@
|
|
1
|
+
Copyright (c) 2013 ginok
|
2
|
+
|
3
|
+
MIT License
|
4
|
+
|
5
|
+
Permission is hereby granted, free of charge, to any person obtaining
|
6
|
+
a copy of this software and associated documentation files (the
|
7
|
+
"Software"), to deal in the Software without restriction, including
|
8
|
+
without limitation the rights to use, copy, modify, merge, publish,
|
9
|
+
distribute, sublicense, and/or sell copies of the Software, and to
|
10
|
+
permit persons to whom the Software is furnished to do so, subject to
|
11
|
+
the following conditions:
|
12
|
+
|
13
|
+
The above copyright notice and this permission notice shall be
|
14
|
+
included in all copies or substantial portions of the Software.
|
15
|
+
|
16
|
+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
|
17
|
+
EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
|
18
|
+
MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
|
19
|
+
NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
|
20
|
+
LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
|
21
|
+
OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
|
22
|
+
WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
|
data/README.md
ADDED
@@ -0,0 +1,29 @@
|
|
1
|
+
# WnwShow
|
2
|
+
|
3
|
+
TODO: Write a gem description
|
4
|
+
|
5
|
+
## Installation
|
6
|
+
|
7
|
+
Add this line to your application's Gemfile:
|
8
|
+
|
9
|
+
gem 'wnw_show'
|
10
|
+
|
11
|
+
And then execute:
|
12
|
+
|
13
|
+
$ bundle
|
14
|
+
|
15
|
+
Or install it yourself as:
|
16
|
+
|
17
|
+
$ gem install wnw_show
|
18
|
+
|
19
|
+
## Usage
|
20
|
+
|
21
|
+
TODO: Write usage instructions here
|
22
|
+
|
23
|
+
## Contributing
|
24
|
+
|
25
|
+
1. Fork it
|
26
|
+
2. Create your feature branch (`git checkout -b my-new-feature`)
|
27
|
+
3. Commit your changes (`git commit -am 'Add some feature'`)
|
28
|
+
4. Push to the branch (`git push origin my-new-feature`)
|
29
|
+
5. Create new Pull Request
|
data/Rakefile
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require "bundler/gem_tasks"
|
data/lib/wnw_show.rb
ADDED
@@ -0,0 +1 @@
|
|
1
|
+
require 'wnw_show/rails'
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
Binary file
|
@@ -0,0 +1,388 @@
|
|
1
|
+
// jQueryに naturalWidth() と naturalHeight()を追加する
|
2
|
+
(function($){
|
3
|
+
var props = ['Width', 'Height'],prop;
|
4
|
+
while (prop = props.pop()) {
|
5
|
+
(function (natural, prop) {
|
6
|
+
$.fn[natural] = (natural in new Image()) ?
|
7
|
+
function () {return this[0][natural];} :
|
8
|
+
function () {
|
9
|
+
var node = this[0],img,value;
|
10
|
+
if (node.tagName.toLowerCase() === 'img') {
|
11
|
+
img = new Image();
|
12
|
+
img.src = node.src,value = img[prop];
|
13
|
+
}
|
14
|
+
return value;
|
15
|
+
};
|
16
|
+
}('natural' + prop, prop.toLowerCase()));
|
17
|
+
}
|
18
|
+
}(jQuery));
|
19
|
+
|
20
|
+
var wnw;
|
21
|
+
if (!wnw) wnw = {};
|
22
|
+
if (!wnw.list) wnw.list = {};
|
23
|
+
(function(){
|
24
|
+
//定数
|
25
|
+
var LEFT_MARGIN = 50; //左のマージン
|
26
|
+
var TOP_MARGIN = 200; //上のマージン
|
27
|
+
var Y_SPAN = 300; //写真の縦の間隔
|
28
|
+
var ROW_NO = 4; //写真の列数
|
29
|
+
var SQEW_SPAN = 50; //写真の配置のゆがみ
|
30
|
+
var ROTATE_DEGREE = 2; //画像の傾き角度の最大値
|
31
|
+
var PHOTO_DEL_Y = 500;//画像が消えるときに移動するY方向
|
32
|
+
var PHOTO_DEL_X_SPAN = 100;//画像が消えるときに移動するX方向の幅
|
33
|
+
var PIN_TOP = -10; //ピンが写真のトップからx方向にどれだけずれているか
|
34
|
+
var PIN_DEL_Y = -200;//ピンが消えるときに移動するY方向
|
35
|
+
var PIN_DEL_X_SPAN = -100;//ピンが消えるときに移動するX方向の幅
|
36
|
+
var ADD_IMAGE_RANGE_X = 1000;//画像が追加されるときのX座標の範囲
|
37
|
+
var ADD_IMAGE_RANGE_Y = 0;//画像が追加されるときのY座標の範囲
|
38
|
+
var ZOOM_TIME = 100;//画像が拡大する時の時間[ms]
|
39
|
+
var PIN_IMAGE_PREFIX = "/images/pin-";//ピン画像の接頭辞
|
40
|
+
var PIN_IMAGE_SURFIX = ".png"; //ピン画像の接尾辞
|
41
|
+
var SOUND_FILE = "/sounds/SoundUnit.swf";//ピンが抜ける音
|
42
|
+
var SOUND_CODEBASE = "/sounds/swflash.cab";//音の再生
|
43
|
+
var SEITON_BTN_IMAGE = "<%= asset_path('wnw_show/list/seiton.png') %>";//整頓ボタン画像
|
44
|
+
var DELETE_BTN_IMAGE = "<%= asset_path('wnw_show/list/delete.png') %>";//削除ボタン画像
|
45
|
+
var BACKGROUND_IMAGE = "<%= asset_path('wnw_show/list/bord.jpg') %>";//背景画像
|
46
|
+
var LOADING_IMAGE = "<%= asset_path('wnw_show/list/loading.gif') %>";//ロード中画像
|
47
|
+
var DRAG_DISTANCE = 10 ;//これ以上座標を動かすとドラックとみなす
|
48
|
+
//変数
|
49
|
+
var gZIndexMax = 2;//現在画面で表示されている中で最大のz-Index
|
50
|
+
var gPinList = [];//ピンのjqueryオブジェクトのリスト
|
51
|
+
var gImgList = [];//画像のjqueryオブジェクトのリスト
|
52
|
+
var gMessage = ""; //画面上部に表示されるメッセージ
|
53
|
+
var gImgUrlList; //画像URLのリスト
|
54
|
+
var gZoomImgId = -1;//現在zoom中の画像のID
|
55
|
+
var gNowDragging = false;//現在ドラッグ中かどうか
|
56
|
+
var gContextPath;//このスクリプトが呼ばれるURLコンテキストパス
|
57
|
+
var getPinImgPath = function() {
|
58
|
+
var imgPaths = [
|
59
|
+
"<%= asset_path('wnw_show/list/pin-0.png') %>",
|
60
|
+
"<%= asset_path('wnw_show/list/pin-1.png') %>",
|
61
|
+
"<%= asset_path('wnw_show/list/pin-2.png') %>",
|
62
|
+
"<%= asset_path('wnw_show/list/pin-3.png') %>",
|
63
|
+
"<%= asset_path('wnw_show/list/pin-4.png') %>",
|
64
|
+
"<%= asset_path('wnw_show/list/pin-5.png') %>",
|
65
|
+
"<%= asset_path('wnw_show/list/pin-6.png') %>",
|
66
|
+
"<%= asset_path('wnw_show/list/pin-7.png') %>",
|
67
|
+
"<%= asset_path('wnw_show/list/pin-8.png') %>",
|
68
|
+
"<%= asset_path('wnw_show/list/pin-9.png') %>",
|
69
|
+
];
|
70
|
+
return imgPaths[Math.floor(Math.random() * 9)]
|
71
|
+
}
|
72
|
+
|
73
|
+
// [0,x] の間の乱数を整数で返す
|
74
|
+
function rand1(x){
|
75
|
+
return Math.floor(Math.random() * x );
|
76
|
+
}
|
77
|
+
// [-x,x] の間の乱数を整数で返す
|
78
|
+
function rand2(x){
|
79
|
+
return Math.floor(Math.random() * x * 2 - x);
|
80
|
+
}
|
81
|
+
//音を出す
|
82
|
+
function playSound(){
|
83
|
+
var div = document.getElementById("SoundUnit");
|
84
|
+
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>';
|
85
|
+
div.innerHTML = innerHTML;
|
86
|
+
}
|
87
|
+
|
88
|
+
// 画面を表示する
|
89
|
+
// @param
|
90
|
+
// imgUrlList : 画像のURLのリスト
|
91
|
+
// msg : 画面上部に表示されるメッセージ
|
92
|
+
// logoUrl : ロゴのURL
|
93
|
+
// contextPath : ロードするhtmlのコンテキストパス
|
94
|
+
function display(imgUrlList,msg,logoUrl,contextPath){
|
95
|
+
gContextPath = contextPath;
|
96
|
+
gMessage = msg;
|
97
|
+
|
98
|
+
//背景
|
99
|
+
$("body").css("background","url(" + BACKGROUND_IMAGE+ ")")
|
100
|
+
.append($("<div/>").attr("id","bord"))
|
101
|
+
.append($("<div/>").attr("id","SoundUnit"));
|
102
|
+
//loading
|
103
|
+
var loading = $("<div/>")
|
104
|
+
.attr("id","loading")
|
105
|
+
.css({"border-radius":"10px",
|
106
|
+
"border" : "solid",
|
107
|
+
"width" : "300" ,
|
108
|
+
"height" : "50",
|
109
|
+
"background-color" : "#ffffff",
|
110
|
+
"border-color" : "#ffffff",
|
111
|
+
"z-index" : "100",
|
112
|
+
"margin" : "0 auto",
|
113
|
+
"padding" : "10",
|
114
|
+
"opacity" : "0.8"})
|
115
|
+
.html("<center><font size=5>Now Loading...<span id=loadno></span></font><img src=" + LOADING_IMAGE + "></center>");
|
116
|
+
|
117
|
+
// ロゴ
|
118
|
+
$("#bord").append(
|
119
|
+
$("<img />")
|
120
|
+
.attr("src",logoUrl)
|
121
|
+
.css({
|
122
|
+
"position" : "absolute",
|
123
|
+
"top":0,
|
124
|
+
"left":LEFT_MARGIN,
|
125
|
+
"width":200,
|
126
|
+
"height":200,
|
127
|
+
"z-index":30
|
128
|
+
}));
|
129
|
+
|
130
|
+
//文字
|
131
|
+
$("body").append(
|
132
|
+
$("<div />")
|
133
|
+
.html(gMessage)
|
134
|
+
.css({
|
135
|
+
"color":"#FFFFFF",
|
136
|
+
"text-shadow": "0px 0px 10px gray",
|
137
|
+
"top":35,
|
138
|
+
"left":250,
|
139
|
+
"font-size":40,
|
140
|
+
// "font-weight": "bold",
|
141
|
+
"width":1000,
|
142
|
+
"opacity": 1,
|
143
|
+
"position":"absolute",
|
144
|
+
"z-index":255,
|
145
|
+
"font-family": "wnw_list_font",
|
146
|
+
"padding":10
|
147
|
+
}));
|
148
|
+
|
149
|
+
|
150
|
+
// 写真
|
151
|
+
gImgUrlList = imgUrlList;
|
152
|
+
viewNextImage();
|
153
|
+
|
154
|
+
};
|
155
|
+
|
156
|
+
// 次の画像の位置を計算して、viewImageを呼び出す。
|
157
|
+
function viewNextImage(){
|
158
|
+
if(gImgList.length == gImgUrlList.length){
|
159
|
+
//次はない
|
160
|
+
|
161
|
+
//削除ボタン箱
|
162
|
+
$("#bord").append(
|
163
|
+
$("<img/>")
|
164
|
+
.attr("id","gomi")
|
165
|
+
.attr("src", DELETE_BTN_IMAGE)
|
166
|
+
.css({"position":"absolute" , "top":10 , "left":1000 , "z-index" :1000})
|
167
|
+
.click(function(){alert("削除したい写真をここにドロップしてください");})
|
168
|
+
.droppable({
|
169
|
+
drop: function(e,ui) {
|
170
|
+
if (confirm("メッセージを削除しますか?")){
|
171
|
+
var img = $("#" + ui.draggable.attr("id"));
|
172
|
+
// call delete api
|
173
|
+
var url = img.attr('msg_id');
|
174
|
+
$.ajax({type: "delete",url: url});
|
175
|
+
img.css({"display":"none"});
|
176
|
+
|
177
|
+
}
|
178
|
+
},
|
179
|
+
tolerance: "pointer"
|
180
|
+
}));
|
181
|
+
|
182
|
+
//整頓ボタン
|
183
|
+
$("#bord").append(
|
184
|
+
$("<img/>")
|
185
|
+
.attr("src", SEITON_BTN_IMAGE)
|
186
|
+
.css({
|
187
|
+
"position":"absolute" ,
|
188
|
+
"top":10 ,
|
189
|
+
"left":800 ,
|
190
|
+
"z-index" :1000 })
|
191
|
+
.click(reset));
|
192
|
+
}else{
|
193
|
+
var no = gImgList.length;
|
194
|
+
var url = gImgUrlList[no];
|
195
|
+
//位置計算
|
196
|
+
var top = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
|
197
|
+
if(no % ROW_NO == 0){ //1列目
|
198
|
+
var left = LEFT_MARGIN;
|
199
|
+
}else{
|
200
|
+
leftside = gImgList[no - 1];
|
201
|
+
var left = leftside.offset().left + leftside.width();
|
202
|
+
}
|
203
|
+
top += rand1(SQEW_SPAN);
|
204
|
+
left += rand1(SQEW_SPAN);
|
205
|
+
var zIndex = rand1(gZIndexMax);
|
206
|
+
viewImage(url,top,left,zIndex,top,left,viewNextImage);
|
207
|
+
}
|
208
|
+
};
|
209
|
+
|
210
|
+
// 画像を表示する
|
211
|
+
//
|
212
|
+
// @param
|
213
|
+
// url: 画像のURL
|
214
|
+
// top: 画像のtop
|
215
|
+
// left: 画像のleft
|
216
|
+
// zIndex: 画像のz-index
|
217
|
+
// orgtop: 画像の整列後のtop
|
218
|
+
// orgleft: 画像の整列後のleft
|
219
|
+
// callback: 画像がロードされたら呼び出す関数
|
220
|
+
function viewImage(url,top,left,zIndex,orgtop,orgleft,callback){
|
221
|
+
var no = gImgList.length;
|
222
|
+
var img = $("<img />")
|
223
|
+
.addClass("photo")
|
224
|
+
.attr("id","img"+no)
|
225
|
+
.attr("src",url)
|
226
|
+
.attr("orgTop",orgtop)
|
227
|
+
.attr("orgLeft",orgleft)
|
228
|
+
.attr("orgZIndex",zIndex)
|
229
|
+
.attr("pinId","img"+no)
|
230
|
+
.attr("no",no)
|
231
|
+
.attr("msg_id",url)
|
232
|
+
.css({"display":"block",
|
233
|
+
"position" : "absolute",
|
234
|
+
"top":top,
|
235
|
+
"left":left,
|
236
|
+
"z-index":zIndex,
|
237
|
+
"-webkit-transform": "rotate(" + rand2(ROTATE_DEGREE) + "deg)",
|
238
|
+
"-moz-transform": "rotate(" + rand2(ROTATE_DEGREE) + "deg)"})
|
239
|
+
.click(function(){
|
240
|
+
if (gNowDragging){
|
241
|
+
//ドラッグの場合はzoomしない
|
242
|
+
gNowDragging = false;
|
243
|
+
}else{
|
244
|
+
// Zoom
|
245
|
+
if(gZoomImgId == -1 ){
|
246
|
+
//Zoomしていない時はZoom
|
247
|
+
if($(window).width() > $(window).height()){
|
248
|
+
var ratio = 1.0 * $(window).height() / $(this).height();
|
249
|
+
var zLeft = $("body").scrollLeft() + $(window).width()/2
|
250
|
+
- $(this).width()
|
251
|
+
* ( $(window).height() / $(this).height() )
|
252
|
+
/ 2 ;
|
253
|
+
var zTop = $("body").scrollTop();
|
254
|
+
}else{
|
255
|
+
var ratio = 1.0 * $(window).width() / $(this).width();
|
256
|
+
var zTop = $("body").scrollTop() + $(window).height()/2
|
257
|
+
- $(this).height()
|
258
|
+
* ( $(window).width() / $(this).width() )
|
259
|
+
/ 2 ;
|
260
|
+
var zLeft = $("body").scrollLeft();
|
261
|
+
}
|
262
|
+
$(this)
|
263
|
+
.attr("beforeLeft",$(this).offset().left)
|
264
|
+
.attr("beforeTop",$(this).offset().top)
|
265
|
+
.attr("beforeZIndex",$(this).css("z-index"))
|
266
|
+
.animate({"display":"block",
|
267
|
+
"position" : "absolute",
|
268
|
+
"top": zTop,
|
269
|
+
"left": zLeft,
|
270
|
+
"height" : $(this).naturalHeight() * ratio,
|
271
|
+
"width" : $(this).naturalWidth() * ratio,
|
272
|
+
"z-index": gZIndexMax + 1
|
273
|
+
},ZOOM_TIME);
|
274
|
+
gZoomImgId=$(this).attr("id");
|
275
|
+
}else{
|
276
|
+
//Zoom中は元の位置に戻す
|
277
|
+
zoomImg=$("#" + gZoomImgId);
|
278
|
+
zoomImg.animate({
|
279
|
+
"height" : zoomImg.naturalHeight(),
|
280
|
+
"width" : zoomImg.naturalWidth(),
|
281
|
+
"left" : zoomImg.attr("beforeLeft"),
|
282
|
+
"top" : zoomImg.attr("beforeTop"),
|
283
|
+
"z-index" : zoomImg.attr("beforeZIndex")
|
284
|
+
},ZOOM_TIME);
|
285
|
+
gZoomImgId = -1;
|
286
|
+
};
|
287
|
+
};
|
288
|
+
})
|
289
|
+
.draggable({
|
290
|
+
distance : DRAG_DISTANCE,
|
291
|
+
start: function(e,ui){
|
292
|
+
gNowDragging = true;
|
293
|
+
// move photo
|
294
|
+
$(this).css({"z-index":++gZIndexMax});
|
295
|
+
// hide pin
|
296
|
+
$("#pin" + $(this).attr("no")).css({"opacity":0});
|
297
|
+
},
|
298
|
+
stop: function(e,ui){
|
299
|
+
// show pin
|
300
|
+
$("#pin" + $(this).attr("no"))
|
301
|
+
.css({"top": ui.position.top + PIN_TOP ,
|
302
|
+
"left" : ui.position.left + $(this).width()/2,
|
303
|
+
"opacity":1,
|
304
|
+
"z-index":++gZIndexMax});
|
305
|
+
}
|
306
|
+
})
|
307
|
+
.load(function(){
|
308
|
+
//pin
|
309
|
+
var pin=$("<img />")
|
310
|
+
.attr("id","pin"+no)
|
311
|
+
.attr("img_id","img"+no)
|
312
|
+
.attr("orgTop",orgtop + PIN_TOP)
|
313
|
+
.attr("orgLeft",orgleft + img.width()/2)
|
314
|
+
.attr("orgZIndex",zIndex)
|
315
|
+
.attr("msg_id",img.attr("id"))
|
316
|
+
.attr("src", getPinImgPath())
|
317
|
+
.css({"position" : "absolute",
|
318
|
+
"top": top + PIN_TOP,
|
319
|
+
"left": left + img.width()/2,
|
320
|
+
"z-index":zIndex})
|
321
|
+
.click(function(){
|
322
|
+
// start sound
|
323
|
+
playSound();
|
324
|
+
//playPinSound_list();
|
325
|
+
// face out pin animation
|
326
|
+
$(this).animate({"top": $(this).offset().top + PIN_DEL_Y ,
|
327
|
+
"left": $(this).offset().left + rand2(PIN_DEL_X_SPAN),
|
328
|
+
"opacity":0});
|
329
|
+
// drop image animation
|
330
|
+
var photo = $("#" +$(this).attr('img_id'));
|
331
|
+
photo.animate({"top":photo.offset().top + PHOTO_DEL_Y ,
|
332
|
+
"left":photo.offset().left + rand2(PHOTO_DEL_X_SPAN),
|
333
|
+
"opacity":0});
|
334
|
+
});
|
335
|
+
$("#bord").append(pin);
|
336
|
+
gPinList.push(pin);
|
337
|
+
//callback
|
338
|
+
callback();
|
339
|
+
});
|
340
|
+
|
341
|
+
$("#bord").append(img);
|
342
|
+
gImgList.push(img);
|
343
|
+
|
344
|
+
};
|
345
|
+
|
346
|
+
//画像を追加する
|
347
|
+
// @param
|
348
|
+
// url : 画像のurl
|
349
|
+
function addImage(url){
|
350
|
+
//整列後の位置を先に計算
|
351
|
+
var no = gImgList.length;
|
352
|
+
var orgtop = TOP_MARGIN + Math.floor(no / ROW_NO ) * Y_SPAN;
|
353
|
+
if(no % ROW_NO == 0){ //1列目
|
354
|
+
var orgleft = LEFT_MARGIN;
|
355
|
+
}else{
|
356
|
+
leftside = gImgList[no - 1];
|
357
|
+
var orgleft = leftside.offset().left + leftside.width();
|
358
|
+
}
|
359
|
+
orgtop += rand1(SQEW_SPAN);
|
360
|
+
orgleft += rand1(SQEW_SPAN);
|
361
|
+
//実際に表示するのはランダムな位置
|
362
|
+
gZIndexMax += 1;
|
363
|
+
viewImage(url, rand1(ADD_IMAGE_RANGE_Y),rand1(ADD_IMAGE_RANGE_X),gZIndexMax,orgtop,orgleft,function(){});
|
364
|
+
};
|
365
|
+
|
366
|
+
//画像を整頓する
|
367
|
+
function reset(){
|
368
|
+
for(i = 0 ; i < gImgList.length ; i = i + 1){
|
369
|
+
gImgList[i].animate({
|
370
|
+
"top":gImgList[i].attr("orgTop"),
|
371
|
+
"left":gImgList[i].attr("orgLeft"),
|
372
|
+
"z-index":gImgList[i].attr("orgZIndex")
|
373
|
+
},500);
|
374
|
+
gPinList[i].animate({
|
375
|
+
"top":gPinList[i].attr("orgTop"),
|
376
|
+
"left":gPinList[i].attr("orgLeft"),
|
377
|
+
"z-index":gPinList[i].attr("orgZIndex")
|
378
|
+
},500);
|
379
|
+
}
|
380
|
+
};
|
381
|
+
//publicフィールド・関数定義
|
382
|
+
wnw.list.display = display;
|
383
|
+
wnw.list.addImage = addImage;
|
384
|
+
wnw.list.reset = reset;
|
385
|
+
})();
|
386
|
+
|
387
|
+
|
388
|
+
|