1 | /** |
1 | /** |
2 | * Copyright (c) 2012 Anders Ekdahl (http://coffeescripter.com/) |
2 | * Copyright (c) 2012 Anders Ekdahl (http://coffeescripter.com/) |
3 | * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) |
3 | * Dual licensed under the MIT (http://www.opensource.org/licenses/mit-license.php) |
4 | * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. |
4 | * and GPL (http://www.opensource.org/licenses/gpl-license.php) licenses. |
5 | * |
5 | * |
6 | * Version: 1.2.7 |
6 | * Version: 1.2.7 |
7 | * |
7 | * |
8 | * Demo and documentation: http://coffeescripter.com/code/ad-gallery/ |
8 | * Demo and documentation: http://coffeescripter.com/code/ad-gallery/ |
9 | */ |
9 | */ |
10 | .ad-gallery { |
10 | .ad-gallery { |
11 | width: 600px; |
11 | width: 95%; |
12 | } |
12 | } |
13 | .ad-gallery, .ad-gallery * { |
13 | .ad-gallery, .ad-gallery * { |
14 | margin: 0; |
14 | margin:auto; |
15 | padding: 0; |
15 | padding: 0; |
16 | } |
16 | } |
17 | .ad-gallery .ad-image-wrapper { |
17 | .ad-gallery .ad-image-wrapper { |
18 | width: 100%; |
18 | width: 95%; |
19 | height: 400px; |
19 | height: 250px; |
20 | margin-bottom: 10px; |
20 | margin-bottom: 10px; |
21 | position: relative; |
21 | position: relative; |
22 | overflow: hidden; |
22 | overflow: hidden; |
| |
23 | margin:auto; |
| |
24 | |
23 | } |
25 | } |
24 | .ad-gallery .ad-image-wrapper .ad-loader { |
26 | .ad-gallery .ad-image-wrapper .ad-loader { |
25 | position: absolute; |
27 | position: absolute; |
26 | z-index: 10; |
28 | z-index: 10; |
27 | top: 48%; |
29 | top: 48%; |
28 | left: 48%; |
30 | left: 48%; |
29 | border: 1px solid #CCC; |
31 | border: 1px solid #CCC; |
30 | } |
32 | } |
31 | .ad-gallery .ad-image-wrapper .ad-next { |
33 | .ad-gallery .ad-image-wrapper .ad-next { |
32 | position: absolute; |
34 | position: absolute; |
33 | right: 0; |
35 | right: 0; |
34 | top: 0; |
36 | top: 0; |
35 | width: 25%; |
37 | width: 10%; |
36 | height: 100%; |
38 | height: 100%; |
37 | cursor: pointer; |
39 | cursor: pointer; |
38 | display: block; |
40 | display: block; |
39 | z-index: 200; |
41 | z-index: 200; |
40 | } |
42 | } |
41 | .ad-gallery .ad-image-wrapper .ad-prev { |
43 | .ad-gallery .ad-image-wrapper .ad-prev { |
42 | position: absolute; |
44 | position: absolute; |
43 | left: 0; |
45 | left: 0; |
44 | top: 0; |
46 | top: 0; |
45 | width: 25%; |
47 | width: 10%; |
46 | height: 100%; |
48 | height: 100%; |
47 | cursor: pointer; |
49 | cursor: pointer; |
48 | display: block; |
50 | display: block; |
49 | z-index: 200; |
51 | z-index: 200; |
50 | } |
52 | } |
51 | .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { |
53 | .ad-gallery .ad-image-wrapper .ad-prev, .ad-gallery .ad-image-wrapper .ad-next { |
52 | /* Or else IE will hide it */ |
54 | /* Or else IE will hide it */ |
53 | background: url(trans.gif); |
55 | background: url(trans.gif); |
54 | } |
56 | } |
55 | .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { |
57 | .ad-gallery .ad-image-wrapper .ad-prev .ad-prev-image, .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { |
56 | background: url(ad_prev.png); |
58 | background: url(ad_prev.png); |
57 | width: 30px; |
59 | width: 30px; |
58 | height: 30px; |
60 | height: 30px; |
59 | display: none; |
61 | display: none; |
60 | position: absolute; |
62 | position: absolute; |
61 | top: 47%; |
63 | top: 47%; |
62 | left: 0; |
64 | left: 0; |
63 | z-index: 101; |
65 | z-index: 101; |
64 | } |
66 | } |
65 | .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { |
67 | .ad-gallery .ad-image-wrapper .ad-next .ad-next-image { |
66 | background: url(ad_next.png); |
68 | background: url(ad_next.png); |
67 | width: 30px; |
69 | width: 30px; |
68 | height: 30px; |
70 | height: 30px; |
69 | right: 0; |
71 | right: 0; |
70 | left: auto; |
72 | left: auto; |
71 | } |
73 | } |
72 | .ad-gallery .ad-image-wrapper .ad-image { |
74 | .ad-gallery .ad-image-wrapper .ad-image { |
73 | position: absolute; |
75 | position: absolute; |
74 | overflow: hidden; |
76 | overflow: hidden; |
75 | top: 0; |
77 | top: 0; |
76 | left: 0; |
78 | left: 0; |
77 | z-index: 9; |
79 | z-index: 9; |
78 | } |
80 | } |
79 | .ad-gallery .ad-image-wrapper .ad-image a img { |
81 | .ad-gallery .ad-image-wrapper .ad-image a img { |
80 | border: 0; |
82 | border: 0; |
81 | } |
83 | } |
82 | .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { |
84 | .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { |
83 | position: absolute; |
85 | position: absolute; |
84 | bottom: 0px; |
86 | bottom: 0px; |
85 | left: 0px; |
87 | left: 0px; |
86 | padding: 7px; |
88 | padding: 7px; |
87 | text-align: left; |
89 | text-align: center; |
88 | width: 100%; |
90 | width: 100%; |
89 | z-index: 2; |
91 | z-index: 2; |
90 | background: url(opa75.png); |
92 | background: url(opa75.png); |
91 | color: #000; |
93 | color: rgb(250, 55, 94); |
92 | } |
94 | } |
93 | * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { |
95 | * html .ad-gallery .ad-image-wrapper .ad-image .ad-image-description { |
94 | background: none; |
96 | background: none; |
95 | filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png'); |
97 | filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (enabled=true, sizingMethod=scale, src='opa75.png'); |
96 | } |
98 | } |
97 | .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { |
99 | .ad-gallery .ad-image-wrapper .ad-image .ad-image-description .ad-description-title { |
98 | display: block; |
100 | display: block; |
99 | } |
101 | } |
100 | .ad-gallery .ad-controls { |
102 | .ad-gallery .ad-controls { |
101 | height: 20px; |
103 | height: 20px; |
102 | } |
104 | } |
103 | .ad-gallery .ad-info { |
105 | .ad-gallery .ad-info { |
104 | float: left; |
106 | float: left; |
105 | } |
107 | } |
106 | .ad-gallery .ad-slideshow-controls { |
108 | .ad-gallery .ad-slideshow-controls { |
107 | float: right; |
109 | float: right; |
108 | } |
110 | } |
109 | .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { |
111 | .ad-gallery .ad-slideshow-controls .ad-slideshow-start, .ad-gallery .ad-slideshow-controls .ad-slideshow-stop { |
110 | padding-left: 5px; |
112 | padding-left: 5px; |
111 | cursor: pointer; |
113 | cursor: pointer; |
112 | } |
114 | } |
113 | .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { |
115 | .ad-gallery .ad-slideshow-controls .ad-slideshow-countdown { |
114 | padding-left: 5px; |
116 | padding-left: 5px; |
115 | font-size: 0.9em; |
117 | font-size: 0.9em; |
116 | } |
118 | } |
117 | .ad-gallery .ad-slideshow-running .ad-slideshow-start { |
119 | .ad-gallery .ad-slideshow-running .ad-slideshow-start { |
118 | cursor: default; |
120 | cursor: default; |
119 | font-style: italic; |
121 | font-style: italic; |
120 | } |
122 | } |
121 | .ad-gallery .ad-nav { |
123 | .ad-gallery .ad-nav { |
122 | width: 100%; |
124 | width: 95%; |
123 | position: relative; |
125 | position: relative; |
| |
126 | margin:auto; |
| |
127 | height: 100px; |
124 | } |
128 | } |
125 | .ad-gallery .ad-forward, .ad-gallery .ad-back { |
129 | .ad-gallery .ad-forward, .ad-gallery .ad-back { |
126 | position: absolute; |
130 | position: absolute; |
127 | top: 0; |
131 | top: 0; |
128 | height: 100%; |
132 | height: 100%; |
129 | z-index: 10; |
133 | z-index: 10; |
130 | } |
134 | } |
131 | /* IE 6 doesn't like height: 100% */ |
135 | /* IE 6 doesn't like height: 100% */ |
132 | * html .ad-gallery .ad-forward, .ad-gallery .ad-back { |
136 | * html .ad-gallery .ad-forward, .ad-gallery .ad-back { |
133 | height: 100px; |
137 | height: 100px; |
134 | } |
138 | } |
135 | .ad-gallery .ad-back { |
139 | .ad-gallery .ad-back { |
136 | cursor: pointer; |
140 | cursor: pointer; |
137 | left: -20px; |
141 | left: -20px; |
138 | width: 13px; |
142 | width: 13px; |
139 | display: block; |
143 | display: block; |
140 | background: url(ad_scroll_back.png) 0px 22px no-repeat; |
144 | background: url(ad_scroll_back.png) 0px 22px no-repeat; |
141 | } |
145 | } |
142 | .ad-gallery .ad-forward { |
146 | .ad-gallery .ad-forward { |
143 | cursor: pointer; |
147 | cursor: pointer; |
144 | display: block; |
148 | display: block; |
145 | right: -20px; |
149 | right: -20px; |
146 | width: 13px; |
150 | width: 13px; |
147 | background: url(ad_scroll_forward.png) 0px 22px no-repeat; |
151 | background: url(ad_scroll_forward.png) 0px 22px no-repeat; |
148 | } |
152 | } |
149 | .ad-gallery .ad-nav .ad-thumbs { |
153 | .ad-gallery .ad-nav .ad-thumbs { |
150 | overflow: hidden; |
154 | overflow: hidden; |
151 | width: 100%; |
155 | width: 95%; |
152 | } |
156 | } |
153 | .ad-gallery .ad-thumbs .ad-thumb-list { |
157 | .ad-gallery .ad-thumbs .ad-thumb-list { |
154 | float: left; |
158 | float: left; |
155 | width: 9000px; |
159 | width: 9000px; |
156 | list-style: none; |
160 | list-style: none; |
157 | } |
161 | } |
158 | .ad-gallery .ad-thumbs li { |
162 | .ad-gallery .ad-thumbs li { |
159 | float: left; |
163 | float: left; |
160 | padding-right: 5px; |
164 | padding-right: 5px; |
161 | } |
165 | } |
162 | .ad-gallery .ad-thumbs li a { |
166 | .ad-gallery .ad-thumbs li a { |
163 | display: block; |
167 | display: block; |
164 | } |
168 | } |
165 | .ad-gallery .ad-thumbs li a img { |
169 | .ad-gallery .ad-thumbs li a img { |
166 | border: 3px solid #CCC; |
170 | border: 3px solid #CCC; |
167 | display: block; |
171 | display: block; |
168 | } |
172 | } |
169 | .ad-gallery .ad-thumbs li a.ad-active img { |
173 | .ad-gallery .ad-thumbs li a.ad-active img { |
170 | border: 3px solid #616161; |
174 | border: 3px solid #616161; |
171 | } |
175 | } |
172 | /* Can't do display none, since Opera won't load the images then */ |
176 | /* Can't do display none, since Opera won't load the images then */ |
173 | .ad-preloads { |
177 | .ad-preloads { |
174 | position: absolute; |
178 | position: absolute; |
175 | left: -9000px; |
179 | left: -9000px; |
176 | top: -9000px; |
180 | top: -9000px; |
177 | } |
181 | } |
| |
182 | |
| |
183 | .ad-image { |
| |
184 | cursor: pointer; |
| |
185 | } |
| |
186 | |
| |
187 | table { table-layout: fixed; width: 100%; } |
| |
188 | |