|
1 <?php |
|
2 $frontHtml = ' |
|
3 <style type="text/css"> |
|
4 #tl'. $id. ' .timeline_line, |
|
5 #content #tl'. $id. ' .timeline_line{ |
|
6 width: '.$settings['line-width'].'px; |
|
7 } |
|
8 |
|
9 #tl'.$id.' .t_line_view, |
|
10 #content #tl'.$id.' .t_line_view { |
|
11 width: '.$settings['line-width'].'px; |
|
12 } |
|
13 |
|
14 #tl'.$id.' .t_line_m, |
|
15 #content #tl'.$id.' .t_line_m { |
|
16 width: '. (((int)$settings['line-width'])/2-2).'px; |
|
17 } |
|
18 |
|
19 #tl'. $id.' .t_line_m.right, |
|
20 #content #tl'. $id.' .t_line_m.right { |
|
21 left: '. (((int)$settings['line-width'])/2-1).'px; |
|
22 width: '. (((int)$settings['line-width'])/2-1).'px; |
|
23 } |
|
24 |
|
25 #tl'. $id.' .t_node_desc, |
|
26 #content #tl'. $id.' .t_node_desc { |
|
27 background: '.$settings['node-desc-color'].'; |
|
28 } |
|
29 |
|
30 |
|
31 #tl'. $id.' .item h2, |
|
32 #content #tl'. $id.' .item h2 { |
|
33 font-size:'.$settings['item-header-font-size'].'px; |
|
34 color:'.$settings['item-header-font-color'].'; |
|
35 line-height:'.$settings['item-header-line-height'].'px;'; |
|
36 |
|
37 switch($settings['item-header-font-type']) { |
|
38 case 'regular' : $frontHtml .= ' |
|
39 font-weight:normal; |
|
40 font-style:normal;'; break; |
|
41 |
|
42 case 'thick' : $frontHtml .= ' |
|
43 font-weight:100; |
|
44 font-style:normal;'; break; |
|
45 |
|
46 case 'bold' : $frontHtml .= ' |
|
47 font-weight:bold; |
|
48 font-style:normal;'; break; |
|
49 |
|
50 case 'bold-italic' : $frontHtml .= ' |
|
51 font-weight:bold; |
|
52 font-style:italic;'; break; |
|
53 |
|
54 case 'italic' : $frontHtml .= ' |
|
55 font-weight:normal; |
|
56 font-style:italic;'; break; |
|
57 } |
|
58 $frontHtml .= ' |
|
59 } |
|
60 |
|
61 #tl'. $id.' .item, |
|
62 #content #tl'. $id.' .item { |
|
63 width: '. $settings['item-width'].'px; |
|
64 height: '. $settings['item-height'].'px; |
|
65 background:'. $settings['item-back-color'].' url('. $settings['item-background'].') repeat; |
|
66 font-size:'.$settings['item-text-font-size'].'px; |
|
67 color:'.$settings['item-text-font-color'].'; |
|
68 line-height:'.$settings['item-text-line-height'].'px;'; |
|
69 |
|
70 |
|
71 switch($settings['item-text-font-type']) { |
|
72 case 'regular' : $frontHtml .= ' |
|
73 font-weight:normal; |
|
74 font-style:normal;'; break; |
|
75 |
|
76 case 'thick' : $frontHtml .= ' |
|
77 font-weight:100; |
|
78 font-style:normal;'; break; |
|
79 |
|
80 case 'bold' : $frontHtml .= ' |
|
81 font-weight:bold; |
|
82 font-style:normal;'; break; |
|
83 |
|
84 case 'bold-italic' : $frontHtml .= ' |
|
85 font-weight:bold; |
|
86 font-style:italic;'; break; |
|
87 |
|
88 case 'italic' : $frontHtml .= ' |
|
89 font-weight:normal; |
|
90 font-style:italic;'; break; |
|
91 } |
|
92 |
|
93 |
|
94 if($settings['shadow'] == 'show') { |
|
95 $frontHtml.= ' |
|
96 -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
97 -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
98 box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
99 |
|
100 zoom: 1; |
|
101 filter: progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=0), |
|
102 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=90), |
|
103 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=180), |
|
104 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=270); |
|
105 |
|
106 '; |
|
107 } |
|
108 else { |
|
109 $frontHtml.= ' |
|
110 -moz-box-shadow: 0 0 0 #000000; |
|
111 -webkit-box-shadow: 0 0 0 #000000; |
|
112 box-shadow: 0 0 0 #000000;'; |
|
113 } |
|
114 $frontHtml.=' |
|
115 }'; |
|
116 if($settings['shadow'] == 'on-hover') { |
|
117 $frontHtml.= ' |
|
118 #tl'. $id . ' .item:hover, |
|
119 #content #tl'. $id . ' .item:hover { |
|
120 -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
121 -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
122 box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
123 |
|
124 zoom: 1; |
|
125 filter: progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=0), |
|
126 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=90), |
|
127 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=180), |
|
128 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=270); |
|
129 |
|
130 |
|
131 }'; |
|
132 } |
|
133 |
|
134 $frontHtml.= ' |
|
135 |
|
136 |
|
137 #tl'. $id.' .item_open h2, |
|
138 #content #tl'. $id.' .item_open h2 { |
|
139 font-size:'.$settings['item-open-header-font-size'].'px; |
|
140 color:'.$settings['item-open-header-font-color'].'; |
|
141 line-height:'.$settings['item-open-header-line-height'].'px;'; |
|
142 |
|
143 switch($settings['item-open-header-font-type']) { |
|
144 case 'regular' : $frontHtml .= ' |
|
145 font-weight:normal; |
|
146 font-style:normal;'; break; |
|
147 |
|
148 case 'thick' : $frontHtml .= ' |
|
149 font-weight:100; |
|
150 font-style:normal;'; break; |
|
151 |
|
152 case 'bold' : $frontHtml .= ' |
|
153 font-weight:bold; |
|
154 font-style:normal;'; break; |
|
155 |
|
156 case 'bold-italic' : $frontHtml .= ' |
|
157 font-weight:bold; |
|
158 font-style:italic;'; break; |
|
159 |
|
160 case 'italic' : $frontHtml .= ' |
|
161 font-weight:normal; |
|
162 font-style:italic;'; break; |
|
163 } |
|
164 $frontHtml .= ' |
|
165 } |
|
166 |
|
167 #tl'. $id .' .item_open, |
|
168 #content #tl'. $id .' .item_open{ |
|
169 width: '. $settings['item-open-width'].'px; |
|
170 height: '. $settings['item-height'].'px; |
|
171 background:'. $settings['item-open-back-color'].' url('. $settings['item-open-background'].') repeat; |
|
172 font-size:'.$settings['item-open-text-font-size'].'px; |
|
173 color:'.$settings['item-open-text-font-color'].'; |
|
174 line-height:'.$settings['item-open-text-line-height'].'px;'; |
|
175 |
|
176 switch($settings['item-open-text-font-type']) { |
|
177 case 'regular' : $frontHtml .= ' |
|
178 font-weight:normal; |
|
179 font-style:normal;'; break; |
|
180 |
|
181 case 'thick' : $frontHtml .= ' |
|
182 font-weight:100; |
|
183 font-style:normal;'; break; |
|
184 |
|
185 case 'bold' : $frontHtml .= ' |
|
186 font-weight:bold; |
|
187 font-style:normal;'; break; |
|
188 |
|
189 case 'bold-italic' : $frontHtml .= ' |
|
190 font-weight:bold; |
|
191 font-style:italic;'; break; |
|
192 |
|
193 case 'italic' : $frontHtml .= ' |
|
194 font-weight:normal; |
|
195 font-style:italic;'; break; |
|
196 } |
|
197 |
|
198 |
|
199 if($settings['shadow'] == 'show' || $settings['shadow'] == 'on-hover') { |
|
200 $frontHtml.= ' |
|
201 -moz-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
202 -webkit-box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
203 box-shadow: 0px 0px 6px rgba(0,0,0,0.5); |
|
204 |
|
205 zoom: 1; |
|
206 filter: progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=0), |
|
207 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=90), |
|
208 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=5, Direction=180), |
|
209 progid:DXImageTransform.Microsoft.Shadow(Color=#888888, Strength=0, Direction=270); |
|
210 |
|
211 '; |
|
212 } |
|
213 else { |
|
214 $frontHtml.= ' |
|
215 -moz-box-shadow: 0 0 0 #000000; |
|
216 -webkit-box-shadow: 0 0 0 #000000; |
|
217 box-shadow: 0 0 0 #000000;'; |
|
218 } |
|
219 $frontHtml.= ' |
|
220 }'. ' |
|
221 |
|
222 #tl'. $id.' .item .con_borderImage, |
|
223 #content #tl'. $id.' .item .con_borderImage { |
|
224 border:0px; |
|
225 border-bottom: '. $settings['item-image-border-width'].'px solid '. $settings['item-image-border-color'].' ; |
|
226 } |
|
227 |
|
228 #tl'. $id.' .item_open .con_borderImage, |
|
229 #content #tl'. $id.' .item_open .con_borderImage { |
|
230 border-bottom: '. $settings['item-open-image-border-width'].'px solid '. $settings['item-open-image-border-color'].' ; |
|
231 } |
|
232 |
|
233 #tl'. $id.' .item_open_cwrapper, |
|
234 #content #tl'. $id.' .item_open .con_borderImage { |
|
235 width: '. $settings['item-open-width'].'px; |
|
236 } |
|
237 |
|
238 #tl'. $id.' .item_open .t_close:hover, |
|
239 #content #tl'. $id.' .item_open .t_close:hover{ |
|
240 background:'. $settings['button-hover-color'].'; |
|
241 } |
|
242 |
|
243 #tl'. $id.' .item .read_more:hover, |
|
244 #content #tl'. $id.' .item .read_more:hover{ |
|
245 background:'. $settings['button-hover-color'].'; |
|
246 } |
|
247 |
|
248 |
|
249 #tl'. $id.' .item .read_more, |
|
250 #content #tl'. $id.' .item .read_more, |
|
251 #tl'. $id.' .item_open .t_close, |
|
252 #content #tl'. $id.' .item_open .t_close { |
|
253 |
|
254 /* transparent background */ |
|
255 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=\'#44000000\', endColorstr=\'#44000000\'); |
|
256 } |
|
257 |
|
258 #tl'. $id.' .t_node_desc, |
|
259 #content #tl'. $id.' .t_node_desc, |
|
260 { |
|
261 |
|
262 /* IE transparent background */ |
|
263 filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr=\'#cc1a86ac\', endColorstr=\'#cc1a86ac\'); |
|
264 } |
|
265 |
|
266 |
|
267 |
|
268 #tl'. $id.' .timeline_open_content, |
|
269 #content #tl'. $id.' .timeline_open_content { |
|
270 padding:'. $settings['item-open-content-padding'].'px; |
|
271 } |
|
272 |
|
273 |
|
274 |
|
275 </style> |
|
276 '; |
|
277 |
|
278 $frontHtml .=' |
|
279 |
|
280 <!-- BEGIN TIMELINE --> |
|
281 <div id="tl'. $id.'" class="timeline'. ($settings['line-style'] == 'dark' ? ' darkLine' : ''). ($settings['nav-style'] == 'dark' ? ' darkNav' : '').'">'; |
|
282 |
|
283 if($itemsArray) { |
|
284 $iteration = -1; |
|
285 foreach ($itemsArray as $key => $arr) { |
|
286 $num = substr($key,4); |
|
287 $iteration++; |
|
288 |
|
289 if($settings['cat-type'] == 'categories') { |
|
290 $index = array_search($arr['categoryid'],$catArray); |
|
291 $ccNumbers[$index]++; |
|
292 $arr['dataid'] = ($ccNumbers[$index] < 10 ? '0'.$ccNumbers[$index] : $ccNumbers[$index]).'/'.$arr['categoryid']; |
|
293 } |
|
294 if($arr['start-item']) { |
|
295 $start_item = $arr['dataid']; |
|
296 |
|
297 } |
|
298 |
|
299 $frontHtml .=' |
|
300 |
|
301 <div class="item" data-id="'. $arr['dataid'].'"'.(($arr['node-name'] && $arr['node-name'] != '') ? ' data-name="'.$arr['node-name'].'"': '').' data-description="'. substr($arr['item-title'],0,30).'"> |
|
302 '.(($arr['item-image'] != '') ? '<a class="timeline_rollover_bottom con_borderImage" href="'.(($arr['item-prettyPhoto'] != '')? $arr['item-prettyPhoto'] : $arr['item-image']).'" rel="prettyPhoto[timeline]"> |
|
303 <img src="'. $this->url . 'timthumb/timthumb.php?src=' . $arr['item-image'] . '&w='.$settings['item-width'].'&h='.$settings['item-image-height'].'" alt=""/></a>':'').' |
|
304 <h2>'.$arr['item-title'].'</h2> |
|
305 <span>'.$arr['item-content'].'</span> |
|
306 '.(($settings['read-more'] == 'button') ? '<div class="read_more" data-id="'.$arr['dataid'].'">Read more</div>' : '').' |
|
307 </div> |
|
308 <div class="item_open" data-id="'.$arr['dataid'].'" data-access="'.admin_url( 'admin-ajax.php' ).'?action=ctimeline_frontend_get&timeline='.$id.'&id='.$key.'"> |
|
309 <div class="item_open_content"> |
|
310 <img class="ajaxloader" src="'. $this->url .'images/loadingAnimation.gif" alt="" /> |
|
311 </div> |
|
312 </div>'; |
|
313 |
|
314 |
|
315 } |
|
316 } |
|
317 $frontHtml .= ' |
|
318 </div> <!-- END TIMELINE --> |
|
319 '; |
|
320 ?> |