forked from FormstoneClassic/Zoomer
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathjquery.fs.zoomer.css
108 lines (94 loc) · 4.28 KB
/
jquery.fs.zoomer.css
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
/*
* Zoomer [Formstone Library]
* @author Ben Plum
* @version 0.3.3
*
* Copyright © 2013 Ben Plum <[email protected]>
* Released under the MIT License <http://www.opensource.org/licenses/mit-license.php>
*/
html, body {
-ms-content-zooming: none;
-ms-touch-action: none;
}
.zoomer .zoomer-holder { -ms-touch-action: none; }
.zoomer, .zoomer * {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.zoomer { background: #eee url(fs-zoomer-loading.gif) no-repeat center; height: 100%; overflow: hidden; position: relative; width: 100%;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.zoomer .zoomer-positioner { margin: 0; height: 1px; position: absolute; width: 1px; }
.zoomer .zoomer-holder { box-shadow: 0 0 3px rgba(0, 0, 0, 0.5); opacity: 0; position: relative;
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
.zoomer .zoomer-image { cursor: move; float: left; height: 100%; width: 100%;
-webkit-transition: opacity 0.25 linear;
-moz-transition: opacity 0.25 linear;
-ms-transition: opacity 0.25 linear;
-o-transition: opacity 0.25 linear;
transition: opacity 0.25 linear;
}
.zoomer .zoomer-tiles { height: 100%; position: relative; width: 100%; }
.zoomer .zoomer-tile { height: auto; position: absolute; width: auto; }
/* CONTROLS */
.zoomer .zoomer-controls { background: rgba(0, 0, 0, 0.8); box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 3px; padding: 5px; position: absolute;
-webkit-transition: opacity 0.25 linear;
-moz-transition: opacity 0.25 linear;
-ms-transition: opacity 0.25 linear;
-o-transition: opacity 0.25 linear;
transition: opacity 0.25 linear;
}
.zoomer .zoomer-controls span { border-radius: 3px; color: #fff; cursor: pointer; display: block; font-size: 20px; font-weight: bold; height: 30px; line-height: 30px; margin: 0; text-align: center; width: 30px; }
.zoomer .zoomer-controls .zoomer-next,
.zoomer .zoomer-controls .zoomer-previous { display: none; }
.zoomer.zoomer-gallery .zoomer-controls .zoomer-next,
.zoomer.zoomer-gallery .zoomer-controls .zoomer-previous { display: block; }
/* CONTROLS - TOP, BOTTOM */
.zoomer .zoomer-controls-top,
.zoomer .zoomer-controls-bottom { height: 40px; left: 50%; margin: 0 0 0 -35px; width: 71px; }
.zoomer .zoomer-controls-top { bottom: auto; top: 10px; }
.zoomer .zoomer-controls-bottom { bottom: 10px; top: auto; }
.zoomer.zoomer-gallery .zoomer-controls-top,
.zoomer.zoomer-gallery .zoomer-controls-bottom { margin: 0 0 0 -65px; width: 131px; }
.zoomer .zoomer-controls-top span,
.zoomer .zoomer-controls-bottom span { float: left; }
.zoomer .zoomer-controls-top span:first-child,
.zoomer .zoomer-controls-bottom span:first-child { margin: 0 1px 0 0; }
/* CONTROLS - LEFT, RIGHT, TOP LEFT, TOP RIGHT, BOTTOM LEFT, BOTTOM RIGHT */
.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-top-left,
.zoomer .zoomer-controls-bottom-left
.zoomer .zoomer-controls-right,
.zoomer .zoomer-controls-top-right,
.zoomer .zoomer-controls-bottom-right { height: 71px; width: 40px; }
.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-top-left,
.zoomer.zoomer-gallery .zoomer-controls-bottom-left
.zoomer.zoomer-gallery .zoomer-controls-right,
.zoomer.zoomer-gallery .zoomer-controls-top-right,
.zoomer.zoomer-gallery .zoomer-controls-bottom-right { height: 131px; }
.zoomer .zoomer-controls-left,
.zoomer .zoomer-controls-right { margin: -35px 0 0 0; top: 50%; }
.zoomer.zoomer-gallery .zoomer-controls-left,
.zoomer.zoomer-gallery .zoomer-controls-right { margin: -65px 0 0 0; }
.zoomer .zoomer-controls-left { left: 10px; }
.zoomer .zoomer-controls-top-left { left: 10px; top: 10px; }
.zoomer .zoomer-controls-bottom-left { bottom: 10px; left: 10px; }
.zoomer .zoomer-controls-right { right: 10px; }
.zoomer .zoomer-controls-top-right { right: 10px; top: 10px; }
.zoomer .zoomer-controls-bottom-right { bottom: 10px; right: 10px; }
@media screen and (min-width: 980px) {
.zoomer .zoomer-controls span:hover { background: #000; }
}