-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathgallery.html
474 lines (432 loc) · 21.8 KB
/
gallery.html
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
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8"/>
<title> pencil to the world </title>
<script type="text/javascript"
src="./lib/sea/sea-debug.js"
data-config="../../app/config"></script>
<link rel="stylesheet" href="./m/css/base.css">
<link rel="stylesheet" href="./css/jquery.fancybox.css">
</head>
<body>
<!-- gallery mask -->
<section id="gallery-mask" class="gallery-mask lpn-mask">
<span class="lpn-ghost"></span>
<div class="lpn-panel" >
<div class="r-close"></div>
<div id="gallery-wrap">
<div class="title">
<div class="btn1 btn_1" ><span></span></div>
<div class="btn1 btn_2" ><span></span></div>
<div class="btn1 btn_3" ><span></span></div>
<div class="btn1 btn_4" ><span></span></div>
<div class="btn1 btn_5" ><span></span></div>
<div class="btn1 btn_6" ><span></span></div>
<div class="btn1 btn_7" ><span></span></div>
<div class="btn1 btn_8 selected" ><span></span></div>
</div>
<div class="photo-wrap">
<div class="slide-left"></div>
<div class="slide-right"></div>
<div class="photo-wrap-inner">
<!--//gallery1-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g1/b2.jpg"><img src="pic/g1/s2.jpg" /><div class="desc">第一代911: 911原型车 － 跑车传奇诞生(1963 - 1973)<br/>作为保时捷 356 的继任车型，911 从诞生伊始就征服了全世界跑车爱好者。1963 年，911 原型车以“901”之名在德国法兰克福车展上面世。1964 年，它被重新命名为“911”推向市场。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g1/b3.jpg"><img src="pic/g1/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g1/b4.jpg"><img src="pic/g1/s4.jpg" /></a>
</div>
</div>
<!--\\gallery1-->
<!--//gallery2-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g2/b1.jpg"><img src="pic/g2/s1.jpg" /><div class="desc">第二代911: G 系列 － 首次全面改进 (1973 – 1988)<br/>在 911 面世十年后，保时捷工程师们对 911 进行了更加全面的升级改造。新一代 911 被荣耀地称为“G 车型”，从 1973 年一直生产到 1989 年，市场周期超过以往任何一款前代车型。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g2/b2.jpg"><img src="pic/g2/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g2/b4.jpg"><img src="pic/g2/s4.jpg" /></a>
</div>
</div>
<!--\\gallery2-->
<!--//gallery3-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g3/b1.jpg"><img src="pic/g3/s1.jpg" /><div class="desc">第三代911: 964 型 － 现代经典问世 (1988 – 1993) <br/>当许多人担忧一个时代或许即将结束时，保时捷于 1988 年适时推出了 911 Carrera 4 (964)。经过 15 年的发展，911 中 85% 的部件都已更新，成为了一款兼备时尚触觉与可持续性效能的保时捷旗舰车型。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g3/b2.jpg"><img src="pic/g3/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g3/b3.jpg"><img src="pic/g3/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g3/b4.jpg"><img src="pic/g3/s4.jpg" /></a>
</div>
</div>
<!--\\gallery3-->
<!--//gallery4-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g4/b1.jpg"><img src="pic/g4/s1.jpg" /><div class="desc">第四代911: 993 型 － 风冷式 911 的谢幕 (1993 – 1997) <br/>内部编号为 993 的 911 车型，至今依然是众多保时捷车主的最爱。其出类拔萃的设计使得它堪称一代经典。一体式保险杠突出了平稳、优雅的风格；将圆形大灯改成椭圆形大灯，使其前部线条较前代车型更为平滑。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g4/b2.jpg"><img src="pic/g4/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g4/b3.jpg"><img src="pic/g4/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g4/b4.jpg"><img src="pic/g4/s4.jpg" /></a>
</div>
</div>
<!--\\gallery4-->
<!--//gallery5-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g5/b1.jpg"><img src="pic/g5/s1.jpg" /><div class="desc">第五代911: 996 型 －水冷式车型登场 (1997 – 2004)<br/>于 1997 至 2005 年间投入生产的 996 型，堪称 911 发展史中的一大转折点。这一代保时捷 911 首次采用水冷式水平对置发动机，是全面技术改良的一大成果。其输出功率能够达到 300 hp，并在降低排放、噪音和耗油量方面均有所突破。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g5/b2.jpg"><img src="pic/g5/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g5/b3.jpg"><img src="pic/g5/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g5/b4.jpg"><img src="pic/g5/s4.jpg" /></a>
</div>
</div>
<!--\\gallery5-->
<!--//gallery6-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g6/b1.jpg"><img src="pic/g6/s1.jpg" /><div class="desc">第六代911: 997 型 － 经典与时尚的完美融合 (2004 – 2011)<br/>2004 年 7 月，保时捷发布了新一代 911 Carrera 和 911 Carrera S，内部编号为 997。前裙板配备了带有独立辅助车灯模组的透明玻璃大灯，彰显了传统 911 的蛙眼设计风格。997 型拥有醒目的造型和出色的行驶性能，令人折服。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g6/b2.jpg"><img src="pic/g6/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g6/b3.jpg"><img src="pic/g6/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g6/b4.jpg"><img src="pic/g6/s4.jpg" /></a>
</div>
</div>
<!--\\gallery6-->
<!--//gallery7-->
<div class="photo-gallery" init='true' style="display:none;">
<div class="photo">
<a rel="gallery" href="pic/g7/b1.jpg"><img src="pic/g7/s1.jpg" /> <div class="desc">第七代911: 991 型 － 散发成熟魅力的梦想跑车 (2011 至今)<br/>这款跑车在保时捷内部被称为 991 型，反映了 911 发展中重大的技术飞跃。全新的悬挂结合加长轴距、加宽轮距、加大轮胎以及经过人体工程学优化的内饰，共同缔造了更具运动感及舒适性的驾驶体验。</div></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g7/b2.jpg"><img src="pic/g7/s2.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g7/b3.jpg"><img src="pic/g7/s3.jpg" /></a>
</div>
<div class="photo">
<a rel="gallery" href="pic/g7/b4.jpg"><img src="pic/g7/s4.jpg" /></a>
</div>
</div>
<!--\\gallery7-->
<!--//video-->
<div class="video-gallery" init='false'>
<div class="photo">
<a href="video.php?id=1"><img src="pic/v1.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=2"><img src="pic/v2.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=3"><img src="pic/v3.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=4"><img src="pic/v4.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=5"><img src="pic/v5.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=6"><img src="pic/v6.jpg" /><span>播放</span></a>
</div>
<div class="photo">
<a href="video.php?id=7"><img src="pic/v7.jpg" /><span>播放</span></a>
</div>
</div>
<!--//video-->
</div>
</div>
</div>
</div>
</section>
<script type="text/javascript">
var _isIpad = false;
var selectTag = function($list , cb , selectClass , eventType){
selectClass = selectClass || 'selected';
eventType = eventType || 'click';
$list[eventType](function(ev){
$list.removeClass(selectClass);
$(this).addClass(selectClass);
cb && cb.call(this , $(this));
});
};
var _slideMousedown = function( $slider , $list , min , max , maxValue){
var slider = this
, off = $slider.offsetParent().offset();
var $con = $list;
var moveEvent = function( pageX ){
var value = Math.max( Math.min( pageX - off.left , max ) , min );
slider.style.left = value + 'px';
// change the scroll value
$con.css('marginLeft' , - maxValue * ( value - min ) / ( max - min ) );
}
var endEvent = function(ev){
$(this)
.off('.slide-drag');
}
// bind mouse move event
$(document)
.on('mousemove.slide-drag', function( ev ){
moveEvent( ev.pageX );
})
.on('touchmove.slide-drag', function( ev ){
moveEvent( ev.originalEvent.pageX );
})
.on('touchend.slide-drag', endEvent )
.on('mouseup.slide-drag', endEvent );
}
/*var initSliderBtn = function( $sliderWrap , $sliderBtn , $slider ){
$sliderBtn// when start to drag
.on('mousedown' , function( ev ){
_slideMousedown.call( this , $sliderWrap );
})
.on('touchstart' , function( ev ){
_slideMousedown.call( this , $sliderWrap );
});
}
*/
var initSliderBtn = function( $slider , $list , min , max , maxValue){
$slider// when start to drag
.on('mousedown' , function( ev ){
_slideMousedown.call( this , $slider , $list , min , max , maxValue );
})
.on('touchstart' , function( ev ){
_slideMousedown.call( this , $slider , $list , min , max , maxValue );
});
$list
.mousewheel(function(event, delta, deltaX, deltaY){
var $con = $(this);
var marginLeft = parseInt( $con.css('marginLeft') );
var width = $con.width();
var photoLen = 357;
var maxWidth = maxValue + width;
if( delta > 0 ) {// up
marginLeft += photoLen;
} else {
marginLeft -= photoLen;
}
marginLeft = - Math.min( maxValue , Math.abs( Math.min( marginLeft, 0 ) ) );
/*
var scrollTop = $con.scrollTop();
var height = $list.height();
var conHeight = $list[0].scrollHeight;
if( delta > 0 ) {// up
scrollTop -= height * 5 / 10;
} else { //down
scrollTop += height * 5 / 10;
}
var top = min + ( ( conHeight - height <= 0 ) ? 0 : ( max - min ) * scrollTop / ( conHeight - height ) );
*/
var left = min + ( ( maxWidth - width <= 0 ) ? 0 : ( max - min ) * -marginLeft / ( maxWidth - width ) )
$slider
.stop( true , false )
.animate({
'left': Math.max( Math.min( left , max ) , min )
} , 500 );
// change the scroll value
$con.stop( true , false )
.animate({
marginLeft: marginLeft
} , 500 );
});
if( _isIpad ){ // bind touch move event
var px , marginLeft = 0;
$list
.on('touchstart' , function( ev ){
px = ev.originalEvent.pageX;
marginLeft = parseInt( $(this).css('marginLeft') );
})
.on('touchmove' , function( ev ){
var dis = ev.originalEvent.pageX - px;
marginLeft += dis;
marginLeft = - Math.min( maxValue , Math.abs( Math.min( marginLeft, 0 ) ) );
$(this).css('marginLeft' , marginLeft);
var width = $con.width();
var maxWidth = maxValue + width;
var left = min + ( ( maxWidth - width <= 0 ) ? 0 : ( max - min ) * -marginLeft / ( maxWidth - width ) );
// move the slider
$slider
.stop( true , false )
.animate({
'left': Math.max( Math.min( left , max ) , min )
} , 500 );
});
}
}
seajs.use(['jquery.validate'] , function(){
$resultPanel = $('#result-mask');
var validateConfig = {
rules: {
email: {
required: true,
email: true
},
tel: {
required: true,
tel: true
},
name: "required",
code: {
required: true,
number: true
},
address: "required"
},
messages: {
email: "请输入正确的邮箱",
name: "请输入姓名",
tel: "请输入正确的手机号码",
code: "请输入正确的邮编",
address: "请输入地址"
},
submitHandler: function (form) {
$.ajax({
url: "data/public/index.php/home/register",
dataType: "JSON",
type: "POST",
data: $(form).serialize(),
success: function(res){
if(res.code == 200){
$(form)
.parent()
.children()
.hide()
.filter('.result-form-suc')
.fadeIn();
}
}
});
return false;
}
};
$resultPanel
.find('.btn-again')
.click(function(){
$resultPanel
.trigger('close');
})
.end()
.find('.btn-submit')
.click(function(){
$('.result-form').submit();
})
.end()
.find('.result-form').validate(validateConfig);
});
seajs.use( ['jquery.fancybox','jquery.mousewheel','jquery.easing'] , function(){
// init tabs
selectTag($('#gallery-mask').find('.btn1') , function(){
var index = $(this).index();
// show gallery photos
$('#gallery-mask').find('.photo-gallery,.video-gallery')
.hide()
.eq( index )
.fadeIn()
.end() //show sliders
.end()
.find('.photo-slider,.video-slider')
.hide()
.eq( index )
.fadeIn();
});
var $photoGallery = $('#gallery-mask').find('.photo-gallery');
var $photos = $photoGallery.find('.photo');
var len = $photos.length;
initSliderBtn( $('#gallery-mask').find('.photo-slider .slider-btn') ,
$('#gallery-mask').find('.photo-gallery') , 0 , 1024 ,
Math.max( Math.ceil( len / 2) - 3 , 0 ) * 357 );
$photos.each( function( i ){
var half = Math.ceil( len / 2 );
var left = ( i % half ) * 360;
var top = parseInt( i / half ) * 219;
if( i >= half ){
left -= 79;
}
$(this).css({left:left,top:top});
} );
var $videoGallery = $('#gallery-mask').find('.video-gallery');
var $vphotos = $videoGallery.find('.photo');
var vlen = $vphotos.length;
initSliderBtn( $('#gallery-mask').find('.video-slider .slider-btn') ,
$('#gallery-mask').find('.video-gallery') , 0 , 1024 ,
Math.max( Math.ceil( vlen / 2) - 3 , 0 ) * 357 );
$vphotos.each( function( i ){
var half = Math.ceil( len / 2 );
var left = ( i % half ) * 360;
var top = parseInt( i / half ) * 219;
if( i >= half ){
left -= 79;
}
$(this).css({left:left,top:top});
} );
$photos.find('a').fancybox({
openMethod : 'dropIn',
padding: 0,
tpl: {
wrap: '<div class="fancybox-wrap" tabIndex="-1"><div class="fancybox-skin"><div class="fancybox-outer"><a target="_blank" class="fancybox-download"></a><div class="fancybox-share"><div class="fancybox-share-list"></div></div><div class="fancybox-inner"></div></div></div></div>'
},
afterShow: function(){
var picurl = $(this).attr('href');
$('.fancybox-download').attr('href',picurl.replace('jpg','zip'));
$('.fancybox-share-list').append('<a target="_blank" href="http://v.t.sina.com.cn/share/share.php?title=911%2050th&pic=http://50years911.porsche-events.cn/'+picurl+'&appkey=2455498088" title="分享到新浪微博" class="sina"></a>' +
'<a target="_blank" href="http://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey?url=http://50years911.porsche-events.cn%2f&amp;title=911%2050th&pic=http://50years911.porsche-events.cn/'+picurl+'" title="分享到QQ空间" class="qzone"></a>' +
'<a target="_blank" href="http://www.kaixin001.com/repaste/share.php?rtitle=Fascination+Porsche+2013&amp;rurl=http://50years911.porsche-events.cn%2f&amp;rcontent=911%2050th&pic=http://50years911.porsche-events.cn/'+picurl+'" title="分享到开心网" class="kaixing"></a>' +
'<a target="_blank" href="http://v.t.qq.com/share/share.php?title=911%2050th&&pic=http://50years911.porsche-events.cn/'+picurl+'" title="分享到QQ微博" class="qqwb"></a>' +
'<a target="_blank" href="http://share.renren.com/share/buttonshare.do?link=http://50years911.porsche-events.cn%2f&title=911%2050th&pic=http://50years911.porsche-events.cn/'+picurl+'" title="分享到人人网" class="renren"></a>' +
'<a target="_blank" href="http://t.sohu.com/third/post.jsp?&url=http://50years911.porsche-events.cn%2f&title=911%2050th&pic=http://50years911.porsche-events.cn/'+picurl+'" title="分享到搜狐微博" class="tt"></a>');
}
});
(function ($, F) {
F.transitions.dropIn = function() {
var endPos = F._getPosition(true);
endPos.opacity = 0;
endPos.top = (parseInt(endPos.top, 10) - 400);
F.wrap.css(endPos).show().animate({
top: endPos.top + 400,
opacity: 1
}, {
easing: 'easeOutQuart',
duration: 800,
complete: F._afterZoomIn
});
};
F.transitions.dropOut = function() {
F.wrap.removeClass('fancybox-opened').animate({
top: '-=200'
}, {
duration: F.current.closeSpeed,
complete: F._afterZoomOut
});
};
}(jQuery, jQuery.fancybox));
});
</script>
</body>
</html>