-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
87 lines (80 loc) · 4 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<title>Benz Motorwagen 360 — Zane Liu</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link href="./css/styles.css" rel="stylesheet">
<link href="./src/styles/threesixty.css" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Lato:100,300,400,700,900%7COpen+Sans:300,400,600,700' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
</head>
<body style="background-color:#FAFAFA;">
<div>
<div style="float: left; padding-left: 9.5%; padding-top: 4.9%; font-size:18px; font-family: 'Open Sans', sans-serif; font-weight: 300; letter-spacing: .02em;">
<a class="return" href="https://www.zaneliu.com/benzmotorwagen" style="text-decoration:none"><span style="font-weight:600; padding-right: 11px; letter-spacing: .02em;">✕</span>Return</a>
</div>
<div style="float: right; padding-right: 9.5%; padding-top: 4.9%;">
<a href="https://www.zaneliu.com/">
<img src="./resources/ZL.png" onmouseover="this.src='./resources/ZL-dark.png';" onmouseout="this.src='./resources/ZL.png';" alt="zl-logo" style="width: 24.5px; height: 24.5px;">
</a>
</div>
</div>
<div class="threesixty product1">
<div class="spinner" style="background-color:#FAFAFA">
<span style="color:#181717; font-size:24px; font-family: 'Open Sans', sans-serif; font-weight: 600; letter-spacing: .02em;">0%</span>
</div>
<a href="javascript:;" onmousedown="document.getElementById('instructions').style.display='none';"><ol class="threesixty_images"></ol></a>
</div>
<div id="instructions" style="text-align:center; position: fixed; bottom: 0; width: 100%;; margin-left: auto; background-color:#9B9B9B; margin-right: auto; left: 0; right: 0;">
<p style="font-family: open sans; font-size: 11.7px; font-weight: 100; letter-spacing: .02em; color:#FAFAFA">Click and drag to view in 360 degrees</p>
</div>
<div class="footer">
<div style="float: left; padding-left: 14.4%; padding-bottom: 2.3%;">
<a class="return" href="https://www.zaneliu.com/">
<p style="font-family: open sans; font-size: 11.7px; font-weight: 610; letter-spacing: .1361em">ZL</p>
</a>
</div>
<div style="float: left; padding-left: 14.4px; padding-bottom: 2.3%;">
<p style="font-family: open sans; font-size: 11.7px; font-weight: 100; color: rgba(0,0,0,.38); letter-spacing: .02em;">© 2019 Zane Liu.</p>
</div>
<div style="float: left; padding-left: 14.4px; padding-bottom: 2.3%;">
<p style="font-family: open sans; font-size: 11.7px; font-weight: 100; color: rgba(0,0,0,.38); letter-spacing: .02em;">All Rights Reserved.</p>
</div>
<div style="float: left; padding-left: 14.4px; padding-bottom: 2.3%;">
<a class="return" href="https://www.zaneliu.com/contact">
<p style="font-family: open sans; font-size: 11.7px; font-weight: 100; letter-spacing: .02em;">
Contact Zane
</p>
</a>
</div>
</div>
<!--/ #page -->
<!-- JS Scripts -->
<script type="text/javascript" src="./src/js/threesixty.min.js"></script>
<script type="text/javascript">
window.onload = init;
var product1;
function init(){
product1 = $('.product1').ThreeSixty({
totalFrames: 360, // Total no. of image you have for 360 slider
endFrame: 74, // end frame for the auto spin animation
currentFrame: 352, // This the start frame for auto spin
imgList: '.threesixty_images', // selector for image list
progress: '.spinner', // selector to show the loading progress
imagePath:'benz3/', // path of the image assets
filePrefix: '', // file prefix if any
ext: '.png', // extention for the assets
height: 994,
width: 1500,
navigation: false,
disableSpin: false,
playSpeed: 70,
responsive: true
});
}
</script>
<!-- /build -->
<!--/ End JS Scripts -->
</body>
</html>