';
162 |
163 | var j = 0,
164 | $op = null;
165 | for (var i = 0, count = $allOptionEls.length; i < count; i++) {
166 | $op = $($allOptionEls[i]);
167 | // Option group
168 | if ($op[0].tagName == "OPTGROUP") {
169 | html += '' + $op.attr("label") + '';
175 | } else {
176 | html += '<' + itemTag + ' class="selecter-item';
177 | // Default selected value - now handles multi's thanks to @kuilkoff
178 | if ($op.is(':selected') && !opts.defaultLabel) {
179 | html += ' selected';
180 | }
181 | // Disabled options
182 | if ($op.is(":disabled")) {
183 | html += ' disabled';
184 | }
185 | // CSS styling classes - might ditch for pseudo selectors
186 | if (i == 0) {
187 | html += ' first';
188 | }
189 | if (i == totalItems) {
190 | html += ' last';
191 | }
192 | html += '" ';
193 | if (opts.links) {
194 | html += 'href="' + $op.val() + '"';
195 | } else {
196 | html += 'data-value="' + $op.val() + '"';
197 | }
198 | html += '>' + $("").text( _checkLength(opts.trimOptions, $op.text()) ).html() + '' + itemTag + '>';
199 | j++;
200 | }
201 | }
202 | html += '
';
203 | html += '' + wrapperTag + '>';
204 |
205 | // Modify DOM
206 | $selectEl.addClass("selecter-element")
207 | .after(html);
208 |
209 | // Store plugin data
210 | var $selecter = $selectEl.next(".selecter");
211 | opts = $.extend({
212 | $selectEl: $selectEl,
213 | $optionEls: $optionEls,
214 | $selecter: $selecter,
215 | $selected: $selecter.find(".selecter-selected"),
216 | $itemsWrapper: $selecter.find(".selecter-options"),
217 | $items: $selecter.find(".selecter-item"),
218 | index: originalIndex,
219 | guid: guid
220 | }, opts);
221 |
222 | // Scroller support
223 | if ($.fn.scroller != undefined) {
224 | opts.$itemsWrapper.scroller();
225 | }
226 |
227 | // Bind click events
228 | $selecter.on("click.selecter", ".selecter-selected", opts, _handleClick)
229 | .on("click.selecter", ".selecter-item", opts, _select)
230 | .on("selecter-close", opts, _close)
231 | .data("selecter", opts);
232 |
233 | // Bind Blur/focus events
234 | if ((!opts.links && !isMobile) || isMobile) {
235 | $selectEl.on("change", opts, _change)
236 | .on("blur.selecter", opts, _blur);
237 | if (!isMobile) {
238 | $selectEl.on("focus.selecter", opts, _focus);
239 | }
240 | } else {
241 | // Disable browser focus/blur for jump links
242 | $selectEl.hide();
243 | }
244 |
245 | guid++;
246 | }
247 | }
248 |
249 | // Handle Click
250 | function _handleClick(e) {
251 | e.preventDefault();
252 | e.stopPropagation();
253 |
254 | var data = e.data;
255 |
256 | if (!data.$selectEl.is(":disabled")) {
257 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]);
258 |
259 | // Handle mobile
260 | if (isMobile) {
261 | var el = data.$selectEl[0];
262 | if (document.createEvent) { // All
263 | var evt = document.createEvent("MouseEvents");
264 | evt.initMouseEvent("mousedown", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
265 | el.dispatchEvent(evt);
266 | } else if (element.fireEvent) { // IE
267 | el.fireEvent("onmousedown");
268 | }
269 | } else {
270 | // Delegate intent
271 | if (data.$selecter.hasClass("closed")) {
272 | _open(e);
273 | } else if (data.$selecter.hasClass("open")) {
274 | _close(e);
275 | }
276 | }
277 | }
278 | }
279 |
280 | // Open Options
281 | function _open(e) {
282 | e.preventDefault();
283 | e.stopPropagation();
284 |
285 | var data = e.data;
286 |
287 | // Make sure it's not alerady open
288 | if (!data.$selecter.hasClass("open")) {
289 | var selectOffset = data.$selecter.offset(),
290 | bodyHeight = $("body").outerHeight(),
291 | optionsHeight = data.$itemsWrapper.outerHeight(true);
292 |
293 | // Calculate bottom of document if not mobile
294 | if (selectOffset.top + optionsHeight > bodyHeight && isMobile) {
295 | data.$selecter.addClass("bottom");
296 | } else {
297 | data.$selecter.removeClass("bottom");
298 | }
299 |
300 | data.$itemsWrapper.show();
301 |
302 | // Bind Events
303 | data.$selecter.removeClass("closed")
304 | .addClass("open");
305 | $("body").on("click.selecter-" + data.guid, ":not(.selecter-options)", data, _closeListener);
306 | /* .on("keydown.selecter-" + data.guid, data, _keypress); */
307 |
308 | var selectedOffset = (data.index >= 0) ? data.$items.eq(data.index).position() : { left: 0, top: 0 };
309 |
310 | if ($.fn.scroller != undefined) {
311 | data.$itemsWrapper.scroller("scroll", (data.$itemsWrapper.find(".scroller-content").scrollTop() + selectedOffset.top), 0)
312 | .scroller("reset");
313 | } else {
314 | data.$itemsWrapper.scrollTop( data.$itemsWrapper.scrollTop() + selectedOffset.top );
315 | }
316 | }
317 | }
318 |
319 | // Close Options
320 | function _close(e) {
321 | e.preventDefault();
322 | e.stopPropagation();
323 |
324 | var data = e.data;
325 |
326 | // Make sure it's actually open
327 | if (data.$selecter.hasClass("open")) {
328 | data.$itemsWrapper.hide();
329 | data.$selecter.removeClass("open").addClass("closed");
330 | $("body").off(".selecter-" + data.guid);
331 | }
332 | }
333 |
334 | // Close listener
335 | function _closeListener(e) {
336 | e.preventDefault();
337 | e.stopPropagation();
338 |
339 | if ($(e.currentTarget).parents(".selecter").length == 0) {
340 | _close(e);
341 | }
342 | }
343 |
344 | // Select option
345 | function _select(e) {
346 | e.preventDefault();
347 | e.stopPropagation();
348 |
349 | var $target = $(this),
350 | data = e.data;
351 |
352 | if (!data.$selectEl.is(":disabled")) {
353 | if (data.$itemsWrapper.is(":visible")) {
354 | // Update
355 | var index = data.$items.index($target);
356 | _update(index, data, false);
357 | }
358 |
359 | if (!data.multiple) {
360 | // Clean up
361 | _close(e);
362 | }
363 | }
364 | }
365 |
366 | // Handle outside changes
367 | function _change(e, internal) {
368 | if (!internal) {
369 | var $target = $(this),
370 | data = e.data;
371 |
372 | // Mobile link support
373 | if (data.links) {
374 | if (isMobile) {
375 | _launch($target.val(), data.externalLinks);
376 | } else {
377 | _launch($target.attr("href"), data.externalLinks);
378 | }
379 | } else {
380 | // Otherwise update
381 | var index = data.$optionEls.index(data.$optionEls.filter("[value='" + _escape($target.val()) + "']"));
382 | _update(index, data, false);
383 | }
384 | }
385 | }
386 |
387 | // Handle focus
388 | function _focus(e) {
389 | e.preventDefault();
390 | e.stopPropagation();
391 |
392 | var data = e.data;
393 |
394 | if (!data.$selectEl.is(":disabled") && !data.multiple) {
395 | data.$selecter.addClass("focus");
396 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]);
397 | $("body").on("keydown.selecter-" + data.guid, data, _keypress);
398 | }
399 | }
400 |
401 | // Handle blur
402 | function _blur(e) {
403 | e.preventDefault();
404 | e.stopPropagation();
405 |
406 | var data = e.data;
407 | data.$selecter.removeClass("focus");
408 | $(".selecter").not(data.$selecter).trigger("selecter-close", [data]);
409 | $("body").off(".selecter-" + data.guid);
410 | }
411 |
412 | // Handle keydown on focus
413 | function _keypress(e) {
414 | var data = e.data;
415 |
416 | if (data.$selecter.hasClass("open") && e.keyCode == 13) {
417 | _update(data.index, data, false);
418 | _close(e);
419 | } else if (e.keyCode != 9 && (!e.metaKey && !e.altKey && !e.ctrlKey && !e.shiftKey)) {
420 | // Ignore modifiers & tabs
421 | e.preventDefault();
422 | e.stopPropagation();
423 |
424 | var total = data.$items.length - 1,
425 | index = -1;
426 |
427 | // Firefox left/right support thanks to Kylemade
428 | if ($.inArray(e.keyCode, (isFirefox) ? [38, 40, 37, 39] : [38, 40]) > -1) {
429 | // Increment / decrement using the arrow keys
430 | index = data.index + ((e.keyCode == 38 || (isFirefox && e.keyCode == 37)) ? -1 : 1);
431 | if (index < 0) {
432 | index = 0;
433 | }
434 | if (index > total) {
435 | index = total;
436 | }
437 | } else {
438 | var input = String.fromCharCode(e.keyCode).toUpperCase();
439 |
440 | // Search for input from original index
441 | for (i = data.index + 1; i <= total; i++) {
442 | var letter = data.$optionEls.eq(i).text().charAt(0).toUpperCase();
443 | if (letter == input) {
444 | index = i;
445 | break;
446 | }
447 | }
448 |
449 | // If not, start from the beginning
450 | if (index < 0) {
451 | for (i = 0; i <= total; i++) {
452 | var letter = data.$optionEls.eq(i).text().charAt(0).toUpperCase();
453 | if (letter == input) {
454 | index = i;
455 | break;
456 | }
457 | }
458 | }
459 | }
460 |
461 | // Update
462 | if (index >= 0) {
463 | _update(index, data, true /* !data.$selecter.hasClass("open") */);
464 | }
465 | }
466 | }
467 |
468 | // Update element value + DOM
469 | function _update(index, data, keypress) {
470 | var $item = data.$items.eq(index),
471 | isSelected = $item.hasClass("selected"),
472 | isDisabled = $item.hasClass("disabled");
473 |
474 | // Check for disabled options
475 | if (!isDisabled) {
476 | // Make sure we have a new index to prevent false 'change' triggers
477 | if (!isSelected || data.links) {
478 | var newLabel = $item.html(),
479 | newValue = $item.data("value");
480 |
481 | // Modify DOM
482 | if (data.multiple) {
483 | data.$optionEls.eq(index).prop("selected", true);
484 | } else {
485 | data.$selected.html(newLabel);
486 | data.$items.filter(".selected").removeClass("selected");
487 | if (!keypress/* || (keypress && !isFirefox) */) {
488 | data.$selectEl[0].selectedIndex = index;
489 | }
490 |
491 | if (data.links && !keypress) {
492 | if (isMobile) {
493 | _launch(data.$selectEl.val(), data.externalLinks);
494 | } else {
495 | _launch($item.attr("href"), data.externalLinks);
496 | }
497 |
498 | return;
499 | }
500 | }
501 | data.$selectEl.trigger("change", [ true ]);
502 | $item.addClass("selected");
503 | } else if (data.multiple) {
504 | data.$optionEls.eq(index).prop("selected", null);
505 | $item.removeClass("selected");
506 | }
507 |
508 | if (!isSelected || data.multiple) {
509 | // Fire callback
510 | data.callback.call(data.$selecter, data.$selectEl.val(), index);
511 | data.index = index;
512 | }
513 | }
514 | }
515 |
516 | // Check label's length
517 | function _checkLength(length, text) {
518 | if (length === false) {
519 | return text;
520 | } else {
521 | if (text.length > length) {
522 | return text.substring(0, length) + "...";
523 | } else {
524 | return text;
525 | }
526 | }
527 | }
528 |
529 | // Launch link
530 | function _launch(link, external) {
531 | if (external) {
532 | // Open link in a new tab/window
533 | window.open(link);
534 | } else {
535 | // Open link in same tab/window
536 | window.location.href = link;
537 | }
538 | }
539 |
540 | // Escape
541 | function _escape(str) {
542 | return str.replace(/([;&,\.\+\*\~':"\!\^#$%@\[\]\(\)=>\|])/g, '\\$1');
543 | }
544 |
545 | // Define Plugin
546 | $.fn.selecter = function(method) {
547 | if (pub[method]) {
548 | return pub[method].apply(this, Array.prototype.slice.call(arguments, 1));
549 | } else if (typeof method === 'object' || !method) {
550 | return _init.apply(this, arguments);
551 | }
552 | return this;
553 | };
554 | })(jQuery);
--------------------------------------------------------------------------------
/demo/assets/css/theme.css:
--------------------------------------------------------------------------------
1 | @import url(http://fonts.googleapis.com/css?family=Nunito:400,700,300);
2 | @import url(http://fonts.googleapis.com/css?family=Oxygen:400,300,700);
3 |
4 |
5 |
6 | /* Wrapper for page content to push down footer */
7 | #wrap {
8 | min-height: 100%;
9 | height: auto;
10 | /* Negative indent footer by its height */
11 | margin: 0 auto -60px;
12 | /* Pad bottom by footer height */
13 | padding: 0 0 60px;
14 | }
15 |
16 | /* Set the fixed height of the footer here */
17 | #footer {
18 | text-align: center;
19 | padding: 2em;
20 | background-color: white;
21 | border-top: 2px solid #F0F0F0;
22 | }
23 | #footer p {font-size: 12px;}
24 |
25 |
26 |
27 | body {
28 | font-family: "Oxygen",Helvetica,Arial,sans-serif; height: 100%;
29 | width: 100%;
30 | margin-top: 0px; /* 50px is the height of the navbar - change this if the navbarn height changes */
31 | background-color:#F0F0F0;
32 | }
33 |
34 |
35 | html {font-family: "Oxygen",Helvetica,Arial,sans-serif; height: 100% ;}
36 |
37 | .hero-spacer {
38 | margin-top: 50px;
39 | }
40 |
41 | .hero-feature {
42 | margin-bottom: 30px;/* spaces out the feature boxes once they start to stack responsively */
43 | }
44 |
45 | footer {
46 | font-size: 12px;
47 | margin: 50px 0;
48 | text-align: center;
49 | }
50 |
51 |
52 | /* Custom styles */
53 | body .btn .glyphicon {padding-right:4px;}
54 |
55 | body .top-form-inner {padding: 20px 20px;
56 | float: right;
57 | overflow: hidden;}
58 |
59 |
60 |
61 | #top .navbar-default {
62 | background-color: transparent;
63 | border-top: none;
64 | min-height: 40px;
65 |
66 | }
67 |
68 | #top .navbar-nav {
69 | font-size: 12px;
70 | text-transform: uppercase;
71 | font-weight: 400;
72 | }
73 |
74 | #top .navbar-nav > li > a {
75 | box-shadow: inset 0 15px 31px -24px rgba(182, 182, 182, 0.6);
76 | border-right: 1px solid #DADADA;
77 | padding-top: 10px;
78 | padding-bottom: 10px;
79 | font-weight: bold;
80 | }
81 |
82 | #top .navbar-default .navbar-nav > .active > a, .navbar-default .navbar-nav > .active > a:hover, .navbar-default .navbar-nav > .active > a:focus {
83 | color: #555;
84 | border-left: 1px solid #DADADA;
85 |
86 | background-color: #E7E7E7;
87 | }
88 |
89 |
90 | #top .navbar-nav > li > .dropdown-menu {
91 | text-transform: none;
92 | font-size: 12px;
93 | }
94 |
95 |
96 | .left-sec .filter-sec {}
97 |
98 |
99 | .left-sec .input-control {margin-top: 20px;
100 | font-size: 13px;}
101 |
102 |
103 | .left-sec .input-control label {
104 | font-size: 12px;}
105 |
106 | .left-sec {
107 | border-right: 1px solid #D6D6D6;
108 | height: 100%;
109 | padding-top: 1em;
110 | overflow-y: auto;
111 | z-index: 1000;}
112 |
113 | .left-sec .left-cont {
114 | padding:15px;
115 | border-bottom: 1px solid #D6D6D6;
116 |
117 | }
118 |
119 | .left-sec .left-cont h6 {text-transform: uppercase;
120 | color: grey; font-size: 9px;}
121 |
122 |
123 | .left-sec .left-cont p {
124 | font-size: 11px;
125 | color: grey;
126 | }
127 |
128 |
129 | .right-sec {
130 | margin-top: 1em;
131 | overflow: hidden;
132 | }
133 |
134 | .right-sec .thumbnail img {
135 | height: 175px;
136 | width: 100%;
137 | border: 1px solid rgb(126, 126, 126);
138 | }
139 | .right-sec .thumbnail img:hover {
140 | opacity: 0.9;
141 | }
142 | .right-sec .thumbnail {
143 | font-family: 'Montserrat',Arial,Helvetica,sans-serif;border-radius: 0px 0px 0px 0px;
144 | -moz-border-radius: 0px 0px 0px 0px;
145 | -webkit-border-radius: 0px 0px 0px 0px;
146 | padding:0px;
147 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08);
148 | margin-bottom: 25px;}
149 |
150 | .right-sec h4.title {
151 | font-size: 12px;
152 | font-weight: 700;
153 | margin-top: 0px;}
154 |
155 | .right-sec ul.list-unstyled {
156 | font-size: 11px;
157 | margin-bottom: 0px;
158 | color: #494949;
159 | }
160 |
161 | .right-sec ul.list-unstyled li {
162 | padding: 3px 2px;
163 | }
164 |
165 |
166 | .right-sec ul.media-list { font-family: 'Montserrat',Arial,Helvetica,sans-serif;}
167 |
168 | .right-sec ul.media-list li.premium-item {color: #DAF2FA;
169 | background: #27B3E0;
170 | }
171 |
172 |
173 | .right-sec .media-body h4 {margin-top: 0px; margin-bottom: 15px; font-family: inherit; font-weight: bold; padding-right: 10px;}
174 |
175 | .right-sec .media-body .label {font-family: "Oxygen",Helvetica,Arial,sans-serif;}
176 |
177 | .right-sec ul.media-list li.premium-item .label-success {background: #FFF;
178 | color: #5CB85C;
179 | font-size: 17px;}
180 |
181 |
182 |
183 | .right-sec ul.media-list li {
184 |
185 | background: #FFF;
186 | margin-bottom: 10px;
187 | border-right: 1px solid #D6D3D3;
188 | box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.08);
189 | }
190 |
191 | .right-sec ul.media-list .media-body {padding:10px;
192 | font-size: 12px;}
193 | .right-sec ul.media-list .media-object {width: 125px;
194 | height: 100px;
195 | }
196 |
197 |
198 | .right-sec .thumbnail .label {
199 |
200 | position: absolute;
201 | left: 15px;
202 | top: 15px;
203 | font-size: 18px;
204 | opacity: 0.9}
205 |
206 | .right-sec .thumbnail a {
207 | font-family: 'Montserrat',Arial,Helvetica,sans-serif;color: #444343;
208 | font-size: 15px;
209 | font-family: inherit;}
210 |
211 |
212 |
213 | .right-sec .top {margin: 30px 0px;}
214 | .right-sec .bio {margin: 60px 0px;}
215 | .right-sec .bio h3 {font-family: inherit; margin-bottom: 5px;}
216 | .right-sec .bio p {font-size: 12px; margin-top: 10px; color: #6D6A6A;}
217 | .right-sec .bio span {font-style: italic;}
218 |
219 | .right-sec .bio-img {text-align: center; width: 100%; }
220 | .right-sec .bio-img img {background: #FFF;padding: 4px;border: 1px solid #C2BABA; }
221 |
222 |
223 | .sub-foot {background-color: white;padding: 6em 0em;}
224 | .sub-foot p {color: grey; }
225 | .sub-foot img.logo {
226 | width: 100%;
227 | height: 100px;
228 | border-radius: 2px 2px 2px 2px;
229 | -moz-border-radius: 2px 2px 2px 2px;
230 | -webkit-border-radius: 2px 2px 2px 2px;
231 | border: 2px solid #E4E4E4;
232 | padding: 20px;
233 | }
234 |
235 | .sub-foot img.logo:hover {
236 | opacity: 0.6;
237 | }
238 |
239 | .sub-foot .thumbnail {border: none;}
240 |
241 |
242 | .right-sec .premium {color: #DAF2FA;
243 | background: #27B3E0;
244 |
245 | border-top: 5px solid #27B3E0; }
246 | .right-sec .premium img {min-height:175px; border-top: none;}
247 | .right-sec .premium img:hover {opacity: 0.8;}
248 |
249 | .right-sec .premium h4 a {font-size: 14px;
250 | color: #D5F0F9; }
251 | .right-sec .premium ul {margin-bottom: 0px;}
252 |
253 | .right-sec .premium ul> li {font-size: 9px; color: #A9EBFF; }
254 |
255 | .right-sec .list-inline > li {
256 | display: inline-block;
257 | padding-right: 5px;
258 | padding-left: 0px;
259 | }
260 |
261 | .right-sec .premium ul> li:first-child {padding-left:5px;}
262 |
263 |
264 |
265 | .listing-page {padding: 4em 0px;
266 | background: #FFF;
267 | }
268 |
269 | .listing-page-top {padding: 2em 0px 0em;
270 | border-bottom: 1px solid #DDD;
271 | }
272 |
273 | .listing-page-top .nav-tabs {
274 | border-bottom: none;
275 | margin-top: 45px;
276 | }
277 |
278 | .listing-page-top h2 {margin-top: 5px;
279 | font-family: inherit;
280 | font-weight: bold;}
281 |
282 | .listing-page-top .nav-tabs i {
283 | padding-right: 7px;
284 | font-size: 15px;
285 | vertical-align: middle;
286 | }
287 |
288 |
289 | .listing-page .tab-content {padding: 20px;
290 | border: 1px solid #D3D3D3;
291 | border-top: none;
292 | }
293 |
294 |
295 |
296 |
297 | .listing-page .col-lg-12
298 | {border-bottom: 1px solid #DAD7D7;
299 | margin-bottom: 17px;}
300 |
301 |
302 | .listing-page .media
303 | {
304 | /*box-shadow:0px 0px 4px -2px #000;*/
305 | margin: 13px 0;
306 | padding: 5px 25px;
307 | }
308 | .listing-page .dp
309 | {
310 | border:10px solid #eee;
311 | transition: all 0.2s ease-in-out;
312 | }
313 | .listing-page .dp:hover
314 | {
315 | border:5px solid #eee;
316 |
317 | /*-webkit-font-smoothing:antialiased;*/
318 | }
319 |
320 |
321 | .nav-tabs > li.active > a,
322 | .nav-tabs > li.active > a:focus {
323 | color: #555555;
324 | cursor: pointer;
325 | background-color: #ffffff;
326 | border: 1px solid #dddddd;
327 | border-bottom-color: transparent;
328 | }
329 |
330 | .nav-tabs > li.active > a:hover
331 |
332 | {background: #F8F8F8; cursor: pointer;}
333 |
334 | .listing-page-top p {font-size: 11px;
335 | color: #635F5F;
336 | }
337 |
338 | .listing-page .table {font-size: 11px;}
339 |
340 | .listing-page-top .label {font-family: inherit; font-size: 99%; }
341 |
342 | .error-page {
343 | text-align: center;
344 | margin: 5em;
345 | background: rgba(0, 0, 0, 0);
346 | }
347 |
348 | .error-page p.error {
349 | font-size: 10em;
350 | font-weight: bold;}
351 |
352 | .error-page p.text {
353 | font-family: inherit;
354 | font-size: 30px;
355 | font-weight: bold;
356 | margin-bottom: 2em;
357 | color: #838383;
358 | }
359 |
360 | .error-page .fa-compass {color:#A2C765;}
361 |
362 | #landing .services {background: white;}
363 |
364 |
365 |
366 | #landing .glyphicon {padding-right:5px;}
367 |
368 | #landing .nav-pills > li.active > a, .nav-pills > li.active > a:hover, .nav-pills > li.active > a:focus {
369 | text-transform: uppercase;
370 | color: #FFF;
371 | background-color: rgba(0, 0, 0, 0);
372 | border: 3px solid #10799B;
373 | }
374 |
375 | #landing .subline {font-size: 2em;
376 | color: rgba(192, 240, 255, 0.9);}
377 |
378 |
379 |
380 | #landing .nav > li > a {
381 | color: #FFF;
382 | text-transform: uppercase;
383 | padding: 10px 15px;}
384 |
385 | #landing .nav > li > a:hover {
386 | background: transparent;}
387 |
388 | #landing .text-muted {
389 | color: white;
390 | font-family: 'Nunito', sans-serif;
391 | font-size: 22px;
392 | letter-spacing: -1px;
393 | }
394 |
395 | #landing .search-block {
396 | background-color: rgba(16, 121, 155, 0.9);
397 | margin-left: auto;
398 | margin-right: auto;
399 | padding: 50px 0px;
400 | }
401 |
402 | #landing .header-image {
403 | position: relative;
404 | z-index: 1;
405 |
406 | background: url('../img/bg-main.jpg') repeat;/* Use a tiling background image or a full width image - if you're using full width you will need to change no-repeat center center cover */
407 | background-position: center;
408 | height: auto;
409 | display: block;
410 | width: 100%;
411 | min-height: 750px;
412 | -webkit-background-size: cover;
413 | -moz-background-size: cover;
414 | -o-background-size: cover;
415 | background-size: cover;
416 | }
417 |
418 |
419 | #landing .header-image:before {
420 | z-index: -2;
421 | content: "";
422 | display: block;
423 | position: absolute;
424 | top: 0;
425 | bottom: 0;
426 | left: 0;
427 | right: 0;
428 | background: rgba(39, 179, 224, 0.9);}
429 |
430 | #landing .header {overflow: hidden;
431 | margin-bottom: 6em;}
432 |
433 |
434 |
435 | #landing .headline {
436 | padding: 60px 10px 55px 10px;}
437 |
438 | #landing .headline > .container > h1 {
439 | font-weight: bold;
440 | font-size: 51px;
441 | text-shadow: 0px 2px 2px rgba(1, 52, 117, 0.4), 0px 8px 13px rgba(0, 0, 0, 0.1), 0px 18px 23px rgba(0, 0, 0, 0.1);
442 | color: #FFF;
443 |
444 | }
445 |
446 | #landing .headline > .container > h2 {
447 |
448 |
449 | font-size: 45px;
450 | color: #FFF;
451 |
452 | letter-spacing: -2px;
453 | }
454 |
455 |
456 |
457 | #landing .featurette-divider {
458 | margin: 80px 0;
459 | }
460 | #landing .featurette {
461 | overflow: hidden;
462 | }
463 |
464 | #landing .featurette-image.pull-left {
465 | margin-right: 40px;
466 | }
467 | #landing .featurette-image.pull-right {
468 | margin-left: 40px;
469 | }
470 |
471 | #landing .featurette-heading {
472 | font-size: 50px;
473 | }
474 |
475 |
476 |
477 | #landing .auth-unit {
478 | width: 300px;margin-right: auto;
479 | margin-left: auto;}
480 | #landing .auth-unit-inner {
481 | -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.65);
482 | -moz-box-shadow: 0 1px 5px rgba(0,0,0,0.1),inset 0 1px 0 rgba(255,255,255,0.65);
483 | box-shadow: 0 1px 5px rgba(0, 0, 0, 0.1),inset 0 1px 0 rgba(255, 255, 255, 0.65);
484 | border-radius: 0px 0px 3px 3px;
485 | -moz-border-radius: 0px 0px 3px 3px;
486 | -webkit-border-radius: 0px 0px 3px 3px;
487 | background: #F0F0F0;
488 |
489 | padding: 25px;
490 | }
491 |
492 | #landing .auth-unit label {font-size: 13px; width: 100%;}
493 |
494 | #landing .auth-unit-top {
495 |
496 | background: #FCFCFC;
497 | border-bottom: 1px solid #CACACA;
498 | padding: 5px 25px;
499 | border-radius: 3px 3px 0px 0px;
500 | -moz-border-radius: 3px 3px 0px 0px;
501 | -webkit-border-radius: 3px 3px 0px 0px;}
502 |
503 |
504 | #landing .auth-unit-top h3 {
505 | font-family: inherit;
506 | margin-top: 10px;
507 | margin-bottom: 5px;
508 | font-size: 25px;}
509 |
510 | #landing .auth-unit-top p {
511 | font-size: 12px;
512 | color: #7E7E7E;}
513 |
514 | #landing .auth-unit h3.text-brand {
515 | font-family: inherit;
516 | text-align: center;
517 | margin-bottom: 5px;
518 | padding: 1em 0em 35px;
519 | font-size: 30px;
520 | font-weight: bold;
521 | color: #FFF;
522 | letter-spacing: -1px;}
523 |
524 | #landing hr {border-top: 1px solid rgba(224, 213, 213, 0.87);
525 | border-bottom: 1px solid rgba(255, 255, 255, 0.5);
526 | margin-top: 20px;
527 | margin-bottom: 20px;}
528 |
529 | .sec-features {padding:4em 0em;}
530 |
531 |
532 |
533 | .section-sec {background: #F7F7F7; padding: 60px 0px;}
534 |
535 | footer {
536 | margin: 50px 0;
537 | }
538 |
539 |
540 | footer a {
541 | font-weight: bold;
542 | }
543 |
544 |
545 | /* Overide BS Styles */
546 |
547 | .fade {
548 | opacity: 1;
549 | transition: opacity .25s ease-in-out;
550 | -moz-transition: opacity .25s ease-in-out;
551 | -webkit-transition: opacity .25s ease-in-out;
552 | }
553 | .fade:hover {
554 | opacity: 0.5;
555 | }
556 |
557 | .featurette-divider {
558 | margin: 80px 0;
559 | }
560 | .featurette {
561 | overflow: hidden;
562 | }
563 |
564 | .featurette-image.pull-left {
565 | margin-right: 40px;
566 | }
567 | .featurette-image.pull-right {
568 | margin-left: 40px;
569 | }
570 |
571 | .featurette-heading {
572 | font-size: 50px;
573 | }
574 |
575 |
576 | img.featurette-image {
577 | height: 240px;
578 | width: 245px;
579 | padding: 10px;
580 | background: #FFF;
581 | }
582 |
583 |
584 | .navbar-form {
585 | margin-top: 10px;}
586 |
587 | .section {padding: 60px 0px;
588 | background: #FFF;}
589 |
590 | .section.secondary { background: #F7F7F7;}
591 |
592 | .section p {color: #6F6E6E;}
593 |
594 | .navbar-btn {
595 | margin-top: 10px;
596 | margin-bottom: 10px;
597 | }
598 |
599 | .navbar .btn-toolbar {
600 | border-right: 1px solid #C2C2C2;
601 | padding-right: 16px;}
602 |
603 | .navbar-default {
604 | background-color: #FFFFFF;
605 | border-color: #CFCFCF;
606 | }
607 | .navbar {
608 | border-radius: 0px 0px 0px 0px;
609 | -moz-border-radius: 0px 0px 0px 0px;
610 | -webkit-border-radius: 0px 0px 0px 0px;
611 | margin-bottom: 0px;
612 | }
613 |
614 | .selecter {
615 | display: block;
616 | margin: 10px 0;
617 | position: relative;
618 | max-width: 100%;
619 | z-index: 1;
620 | }
621 |
622 | .navbar-brand {
623 | color: #4B4949;
624 | font-family: 'Nunito', sans-serif;
625 | padding: 15px 30px;
626 | font-size: 16px;
627 | font-weight: bold;
628 | letter-spacing: -1px;
629 | }
630 | .navbar-brand:hover {
631 | opacity: 0.9;}
632 |
633 | .navbar-brand span.sub-brand {color: #6B6B6B;}
634 |
635 | .navbar-brand .glyphicon {color: #1EA4D1;
636 | vertical-align: top;
637 | line-height: 15px;}
638 |
639 |
640 | .navbar-default .navbar-brand {
641 | color: #575757;}
642 |
643 |
644 | .navbar-default .navbar-link {
645 | color: #555353;
646 | cursor: pointer;
647 | font-weight: bold;
648 | }
649 |
650 | .navbar-default .navbar-text {
651 | color: #7A7A7A;
652 | font-size: 12px;
653 | }
654 |
655 | .nav-tabs > li.active > a, .nav-tabs > li.active > a:hover, .nav-tabs > li.active > a:focus {border-bottom: 1px solid #dddddd;}
656 | .nav-tabs {
657 | }
658 |
659 | textarea:focus, input[type="text"]:focus, input[type="password"]:focus, input[type="datetime"]:focus, input[type="datetime-local"]:focus, input[type="date"]:focus, input[type="month"]:focus, input[type="time"]:focus, input[type="week"]:focus, input[type="number"]:focus, input[type="email"]:focus, input[type="url"]:focus, input[type="search"]:focus, input[type="tel"]:focus, input[type="color"]:focus, .uneditable- input:focus {
660 | border-color: none;
661 | box-shadow: none;
662 | -webkit-box-shadow: none;
663 | outline: -webkit-focus-ring-color auto 5px;
664 | }
665 |
666 |
667 | .has-error .form-control {
668 | border: 2px solid #de4343;
669 |
670 | }
671 |
672 |
673 | .btn-primary {
674 | background-color: #009DDC;
675 | border-color: #0085B7;}
676 |
677 |
678 | .btn-primary:hover,
679 | .btn-primary:focus,
680 | .btn-primary:active,
681 | .btn-primary.active,
682 | .open .dropdown-toggle.btn-primary {
683 | color: #ffffff;
684 | background-color: #0094CC;
685 | border-color: #285e8e;
686 | }
687 |
688 |
689 |
690 | .btn-success {
691 | background-color: #A2C765;
692 | border-color: #7DA53D;}
693 |
694 |
695 | .btn-success:hover, .btn-success:focus, .btn-success:active, .btn-success.active, .open .dropdown-toggle.btn-success {
696 | color: #FFF;
697 | background-color: #91BC47
698 | ;
699 | border-color: #739638;
700 | }
701 |
702 | .btn-danger {
703 | background-color: #F26963;
704 | border-color: #d43f3a;
705 | }
706 |
707 |
708 |
709 | .label-success {
710 | background-color:#A2C765;
711 | }
712 |
713 | .label-primary {
714 | background-color: #009DDC;
715 | }
716 |
717 |
718 |
719 | .grid i {
720 | font-size: 25px;
721 | padding-right: 10px;
722 |
723 | }
724 | .grid p {
725 | font-size: 12px;
726 | color: grey;
727 |
728 | }
729 | .grid {
730 | margin-left: 0px;
731 | list-style: none;
732 | overflow: hidden;
733 | max-width: 100%;
734 | margin: 0 auto;
735 | }
736 | .grid li {
737 | padding: 0 1.5em 1.5em 0;
738 | }
739 | .grid li > div {
740 | background: white;
741 | padding: 15px ; color: black;
742 | }
743 |
744 | .grid h5 {
745 | margin-top: 3px;
746 |
747 | }
748 |
749 |
750 | .grid li > div img {
751 | width: 100%;
752 | height: 210px;
753 |
754 | }
755 |
756 | .grid li.wide {
757 | width: 100%;
758 | }
759 | .grid li a {
760 | font-size: 17px;
761 | color: #3B3B3B;
762 |
763 | font-family: inherit;
764 | }
765 |
766 | @media all and (min-width: 27em) {
767 | .grid li {
768 | width: 50%;
769 | float: left;
770 | }
771 | }
772 |
773 | @media all and (min-width: 40em) {
774 | .grid li {
775 | width: 33.3333333%;
776 | }
777 | .grid li.wide {
778 | width: 66.666666%;
779 | }
780 | }
781 | @media all and (min-width: 60em) {
782 | .grid li {
783 | width: 25%;
784 | }
785 | .grid li.wide {
786 | width: 50%;
787 | }
788 |
789 |
--------------------------------------------------------------------------------
/demo/index.php:
--------------------------------------------------------------------------------
1 | prepare("SELECT id FROM cars $id_where");
36 | $stmt->execute($id_vals);
37 |
38 | $ids_list = "";
39 | while($car = $stmt->fetch()) {
40 | $ids_list .= $car['id'] . ",";
41 | }
42 | $ids_list = substr($ids_list, 0, -1);
43 |
44 | #return if we got no results from search!
45 | if($ids_list == "") {
46 | return $stmt;
47 | }
48 |
49 | unset($_GET['search']);
50 |
51 | #if we have facets
52 | if(count($_GET) > 0) {
53 |
54 | #handle specialCases
55 | if($_GET['onlyPhotos'] == "1") {
56 | $where .= " AND image!='' ";
57 | unset($_GET['onlyPhotos']);
58 | }
59 |
60 | if($_GET[minPrice] != "") {
61 | $where .= " AND price >= $_GET[minPrice] ";
62 | }
63 |
64 | if($_GET[maxPrice] != "") {
65 | $where .= " AND price <= $_GET[maxPrice] ";
66 | }
67 |
68 | unset($_GET[minPrice]);
69 | unset($_GET[maxPrice]);
70 |
71 | if($_GET[minYear] != "") {
72 | $where .= " AND year >= $_GET[minYear] ";
73 | }
74 |
75 |
76 | if($_GET[maxYear] != "") {
77 | $where .= " AND year <= $_GET[maxYear] ";
78 | }
79 |
80 | unset($_GET[minYear]);
81 | unset($_GET[maxYear]);
82 |
83 |
84 |
85 | foreach($_GET as $key=>$value) {
86 | if(is_array($value)) {
87 | $where .= " AND $key IN (";
88 | foreach($value as $el) {
89 | $where .= "?,";
90 | array_push($vals, $el);
91 | }
92 | $where = substr($where, 0, -1);
93 | $where .= ") ";
94 | }
95 | else {
96 | $where .= " AND $key=? ";
97 | array_push($vals, $value);
98 | }
99 | }
100 | }
101 |
102 | $stmt = $file_db->prepare("SELECT * FROM cars WHERE id IN ($ids_list) $where");
103 | $stmt->execute($vals);
104 |
105 | return $stmt;
106 | }
107 |
108 | function grid_view($stmt) {
109 | $string = "";
110 | while ($car = $stmt->fetch()) {
111 | $conds = explode("_", $car[condition]);
112 |
113 | $condition = ucfirst($conds[0]);
114 | if(count($conds) > 1) {
115 | $condition .= " " . ucfirst($conds[1]);
116 | }
117 |
118 | $image = $car[image];
119 | if($image == "") {
120 | $image = "no_image.jpg";
121 | }
122 |
123 | $string .= "
124 |
194 |
195 |
213 |
214 |
248 |
249 |
250 |
251 |
280 |
281 |
282 |
283 |
284 |
285 |
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
297 |
298 |
299 |
300 |
301 |
Refine Search
302 |
395 |
396 |
397 |
398 |
399 |
400 |
401 |
402 |
Subscribe for updates
403 |
nec eu singulis petentium. Ea quo modus officiis, tation mucius conclusionemque an vix. Ad vix deserunt consequat quaerendum.
404 |
416 |
417 |
418 |
419 |
420 |
421 |
422 |
423 |
424 |
425 |
426 |
427 |
428 |
429 |
430 |
431 |
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 |
475 |
476 |
477 |
478 |
483 |
484 |
485 |
486 |
487 |
488 |
489 |
490 |
513 |
514 |
515 |
516 |
517 |
518 |
519 |
520 |
521 |
522 |
523 |
524 |
525 |
526 |
527 |
528 |
529 |
530 |
531 |
532 |
533 |
534 |
535 |
536 |
537 |
538 |
539 |
540 |
541 |
542 |
543 |
544 |
545 |
546 |
572 |
573 |
574 |
575 |
576 |
577 |
578 |
579 |
--------------------------------------------------------------------------------
/demo/assets/css/font-awesome.css:
--------------------------------------------------------------------------------
1 | /*!
2 | * Font Awesome 4.0.3 by @davegandy - http://fontawesome.io - @fontawesome
3 | * License - http://fontawesome.io/license (Font: SIL OFL 1.1, CSS: MIT License)
4 | */
5 | /* FONT PATH
6 | * -------------------------- */
7 | @font-face {
8 | font-family: 'FontAwesome';
9 | src: url('../fonts/fontawesome-webfont.eot?v=4.0.3');
10 | src: url('../fonts/fontawesome-webfont.eot?#iefix&v=4.0.3') format('embedded-opentype'), url('../fonts/fontawesome-webfont.woff') format('woff'), url('../fonts/fontawesome-webfont.ttf?v=4.0.3') format('truetype'), url('../fonts/fontawesome-webfont.svg?v=4.0.3#fontawesomeregular') format('svg');
11 | font-weight: normal;
12 | font-style: normal;
13 | }
14 | .fa {
15 | display: inline-block;
16 | font-family: FontAwesome;
17 | font-style: normal;
18 | font-weight: normal;
19 | line-height: 1;
20 | -webkit-font-smoothing: antialiased;
21 | -moz-osx-font-smoothing: grayscale;
22 | }
23 | /* makes the font 33% larger relative to the icon container */
24 | .fa-lg {
25 | font-size: 1.3333333333333333em;
26 | line-height: 0.75em;
27 | vertical-align: -15%;
28 | }
29 | .fa-2x {
30 | font-size: 2em;
31 | }
32 | .fa-3x {
33 | font-size: 3em;
34 | }
35 | .fa-4x {
36 | font-size: 4em;
37 | }
38 | .fa-5x {
39 | font-size: 5em;
40 | }
41 | .fa-fw {
42 | width: 1.2857142857142858em;
43 | text-align: center;
44 | }
45 | .fa-ul {
46 | padding-left: 0;
47 | margin-left: 2.142857142857143em;
48 | list-style-type: none;
49 | }
50 | .fa-ul > li {
51 | position: relative;
52 | }
53 | .fa-li {
54 | position: absolute;
55 | left: -2.142857142857143em;
56 | width: 2.142857142857143em;
57 | top: 0.14285714285714285em;
58 | text-align: center;
59 | }
60 | .fa-li.fa-lg {
61 | left: -1.8571428571428572em;
62 | }
63 | .fa-border {
64 | padding: .2em .25em .15em;
65 | border: solid 0.08em #eeeeee;
66 | border-radius: .1em;
67 | }
68 | .pull-right {
69 | float: right;
70 | }
71 | .pull-left {
72 | float: left;
73 | }
74 | .fa.pull-left {
75 | margin-right: .3em;
76 | }
77 | .fa.pull-right {
78 | margin-left: .3em;
79 | }
80 | .fa-spin {
81 | -webkit-animation: spin 2s infinite linear;
82 | -moz-animation: spin 2s infinite linear;
83 | -o-animation: spin 2s infinite linear;
84 | animation: spin 2s infinite linear;
85 | }
86 | @-moz-keyframes spin {
87 | 0% {
88 | -moz-transform: rotate(0deg);
89 | }
90 | 100% {
91 | -moz-transform: rotate(359deg);
92 | }
93 | }
94 | @-webkit-keyframes spin {
95 | 0% {
96 | -webkit-transform: rotate(0deg);
97 | }
98 | 100% {
99 | -webkit-transform: rotate(359deg);
100 | }
101 | }
102 | @-o-keyframes spin {
103 | 0% {
104 | -o-transform: rotate(0deg);
105 | }
106 | 100% {
107 | -o-transform: rotate(359deg);
108 | }
109 | }
110 | @-ms-keyframes spin {
111 | 0% {
112 | -ms-transform: rotate(0deg);
113 | }
114 | 100% {
115 | -ms-transform: rotate(359deg);
116 | }
117 | }
118 | @keyframes spin {
119 | 0% {
120 | transform: rotate(0deg);
121 | }
122 | 100% {
123 | transform: rotate(359deg);
124 | }
125 | }
126 | .fa-rotate-90 {
127 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=1);
128 | -webkit-transform: rotate(90deg);
129 | -moz-transform: rotate(90deg);
130 | -ms-transform: rotate(90deg);
131 | -o-transform: rotate(90deg);
132 | transform: rotate(90deg);
133 | }
134 | .fa-rotate-180 {
135 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2);
136 | -webkit-transform: rotate(180deg);
137 | -moz-transform: rotate(180deg);
138 | -ms-transform: rotate(180deg);
139 | -o-transform: rotate(180deg);
140 | transform: rotate(180deg);
141 | }
142 | .fa-rotate-270 {
143 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
144 | -webkit-transform: rotate(270deg);
145 | -moz-transform: rotate(270deg);
146 | -ms-transform: rotate(270deg);
147 | -o-transform: rotate(270deg);
148 | transform: rotate(270deg);
149 | }
150 | .fa-flip-horizontal {
151 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1);
152 | -webkit-transform: scale(-1, 1);
153 | -moz-transform: scale(-1, 1);
154 | -ms-transform: scale(-1, 1);
155 | -o-transform: scale(-1, 1);
156 | transform: scale(-1, 1);
157 | }
158 | .fa-flip-vertical {
159 | filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1);
160 | -webkit-transform: scale(1, -1);
161 | -moz-transform: scale(1, -1);
162 | -ms-transform: scale(1, -1);
163 | -o-transform: scale(1, -1);
164 | transform: scale(1, -1);
165 | }
166 | .fa-stack {
167 | position: relative;
168 | display: inline-block;
169 | width: 2em;
170 | height: 2em;
171 | line-height: 2em;
172 | vertical-align: middle;
173 | }
174 | .fa-stack-1x,
175 | .fa-stack-2x {
176 | position: absolute;
177 | left: 0;
178 | width: 100%;
179 | text-align: center;
180 | }
181 | .fa-stack-1x {
182 | line-height: inherit;
183 | }
184 | .fa-stack-2x {
185 | font-size: 2em;
186 | }
187 | .fa-inverse {
188 | color: #ffffff;
189 | }
190 | /* Font Awesome uses the Unicode Private Use Area (PUA) to ensure screen
191 | readers do not read off random characters that represent icons */
192 | .fa-glass:before {
193 | content: "\f000";
194 | }
195 | .fa-music:before {
196 | content: "\f001";
197 | }
198 | .fa-search:before {
199 | content: "\f002";
200 | }
201 | .fa-envelope-o:before {
202 | content: "\f003";
203 | }
204 | .fa-heart:before {
205 | content: "\f004";
206 | }
207 | .fa-star:before {
208 | content: "\f005";
209 | }
210 | .fa-star-o:before {
211 | content: "\f006";
212 | }
213 | .fa-user:before {
214 | content: "\f007";
215 | }
216 | .fa-film:before {
217 | content: "\f008";
218 | }
219 | .fa-th-large:before {
220 | content: "\f009";
221 | }
222 | .fa-th:before {
223 | content: "\f00a";
224 | }
225 | .fa-th-list:before {
226 | content: "\f00b";
227 | }
228 | .fa-check:before {
229 | content: "\f00c";
230 | }
231 | .fa-times:before {
232 | content: "\f00d";
233 | }
234 | .fa-search-plus:before {
235 | content: "\f00e";
236 | }
237 | .fa-search-minus:before {
238 | content: "\f010";
239 | }
240 | .fa-power-off:before {
241 | content: "\f011";
242 | }
243 | .fa-signal:before {
244 | content: "\f012";
245 | }
246 | .fa-gear:before,
247 | .fa-cog:before {
248 | content: "\f013";
249 | }
250 | .fa-trash-o:before {
251 | content: "\f014";
252 | }
253 | .fa-home:before {
254 | content: "\f015";
255 | }
256 | .fa-file-o:before {
257 | content: "\f016";
258 | }
259 | .fa-clock-o:before {
260 | content: "\f017";
261 | }
262 | .fa-road:before {
263 | content: "\f018";
264 | }
265 | .fa-download:before {
266 | content: "\f019";
267 | }
268 | .fa-arrow-circle-o-down:before {
269 | content: "\f01a";
270 | }
271 | .fa-arrow-circle-o-up:before {
272 | content: "\f01b";
273 | }
274 | .fa-inbox:before {
275 | content: "\f01c";
276 | }
277 | .fa-play-circle-o:before {
278 | content: "\f01d";
279 | }
280 | .fa-rotate-right:before,
281 | .fa-repeat:before {
282 | content: "\f01e";
283 | }
284 | .fa-refresh:before {
285 | content: "\f021";
286 | }
287 | .fa-list-alt:before {
288 | content: "\f022";
289 | }
290 | .fa-lock:before {
291 | content: "\f023";
292 | }
293 | .fa-flag:before {
294 | content: "\f024";
295 | }
296 | .fa-headphones:before {
297 | content: "\f025";
298 | }
299 | .fa-volume-off:before {
300 | content: "\f026";
301 | }
302 | .fa-volume-down:before {
303 | content: "\f027";
304 | }
305 | .fa-volume-up:before {
306 | content: "\f028";
307 | }
308 | .fa-qrcode:before {
309 | content: "\f029";
310 | }
311 | .fa-barcode:before {
312 | content: "\f02a";
313 | }
314 | .fa-tag:before {
315 | content: "\f02b";
316 | }
317 | .fa-tags:before {
318 | content: "\f02c";
319 | }
320 | .fa-book:before {
321 | content: "\f02d";
322 | }
323 | .fa-bookmark:before {
324 | content: "\f02e";
325 | }
326 | .fa-print:before {
327 | content: "\f02f";
328 | }
329 | .fa-camera:before {
330 | content: "\f030";
331 | }
332 | .fa-font:before {
333 | content: "\f031";
334 | }
335 | .fa-bold:before {
336 | content: "\f032";
337 | }
338 | .fa-italic:before {
339 | content: "\f033";
340 | }
341 | .fa-text-height:before {
342 | content: "\f034";
343 | }
344 | .fa-text-width:before {
345 | content: "\f035";
346 | }
347 | .fa-align-left:before {
348 | content: "\f036";
349 | }
350 | .fa-align-center:before {
351 | content: "\f037";
352 | }
353 | .fa-align-right:before {
354 | content: "\f038";
355 | }
356 | .fa-align-justify:before {
357 | content: "\f039";
358 | }
359 | .fa-list:before {
360 | content: "\f03a";
361 | }
362 | .fa-dedent:before,
363 | .fa-outdent:before {
364 | content: "\f03b";
365 | }
366 | .fa-indent:before {
367 | content: "\f03c";
368 | }
369 | .fa-video-camera:before {
370 | content: "\f03d";
371 | }
372 | .fa-picture-o:before {
373 | content: "\f03e";
374 | }
375 | .fa-pencil:before {
376 | content: "\f040";
377 | }
378 | .fa-map-marker:before {
379 | content: "\f041";
380 | }
381 | .fa-adjust:before {
382 | content: "\f042";
383 | }
384 | .fa-tint:before {
385 | content: "\f043";
386 | }
387 | .fa-edit:before,
388 | .fa-pencil-square-o:before {
389 | content: "\f044";
390 | }
391 | .fa-share-square-o:before {
392 | content: "\f045";
393 | }
394 | .fa-check-square-o:before {
395 | content: "\f046";
396 | }
397 | .fa-arrows:before {
398 | content: "\f047";
399 | }
400 | .fa-step-backward:before {
401 | content: "\f048";
402 | }
403 | .fa-fast-backward:before {
404 | content: "\f049";
405 | }
406 | .fa-backward:before {
407 | content: "\f04a";
408 | }
409 | .fa-play:before {
410 | content: "\f04b";
411 | }
412 | .fa-pause:before {
413 | content: "\f04c";
414 | }
415 | .fa-stop:before {
416 | content: "\f04d";
417 | }
418 | .fa-forward:before {
419 | content: "\f04e";
420 | }
421 | .fa-fast-forward:before {
422 | content: "\f050";
423 | }
424 | .fa-step-forward:before {
425 | content: "\f051";
426 | }
427 | .fa-eject:before {
428 | content: "\f052";
429 | }
430 | .fa-chevron-left:before {
431 | content: "\f053";
432 | }
433 | .fa-chevron-right:before {
434 | content: "\f054";
435 | }
436 | .fa-plus-circle:before {
437 | content: "\f055";
438 | }
439 | .fa-minus-circle:before {
440 | content: "\f056";
441 | }
442 | .fa-times-circle:before {
443 | content: "\f057";
444 | }
445 | .fa-check-circle:before {
446 | content: "\f058";
447 | }
448 | .fa-question-circle:before {
449 | content: "\f059";
450 | }
451 | .fa-info-circle:before {
452 | content: "\f05a";
453 | }
454 | .fa-crosshairs:before {
455 | content: "\f05b";
456 | }
457 | .fa-times-circle-o:before {
458 | content: "\f05c";
459 | }
460 | .fa-check-circle-o:before {
461 | content: "\f05d";
462 | }
463 | .fa-ban:before {
464 | content: "\f05e";
465 | }
466 | .fa-arrow-left:before {
467 | content: "\f060";
468 | }
469 | .fa-arrow-right:before {
470 | content: "\f061";
471 | }
472 | .fa-arrow-up:before {
473 | content: "\f062";
474 | }
475 | .fa-arrow-down:before {
476 | content: "\f063";
477 | }
478 | .fa-mail-forward:before,
479 | .fa-share:before {
480 | content: "\f064";
481 | }
482 | .fa-expand:before {
483 | content: "\f065";
484 | }
485 | .fa-compress:before {
486 | content: "\f066";
487 | }
488 | .fa-plus:before {
489 | content: "\f067";
490 | }
491 | .fa-minus:before {
492 | content: "\f068";
493 | }
494 | .fa-asterisk:before {
495 | content: "\f069";
496 | }
497 | .fa-exclamation-circle:before {
498 | content: "\f06a";
499 | }
500 | .fa-gift:before {
501 | content: "\f06b";
502 | }
503 | .fa-leaf:before {
504 | content: "\f06c";
505 | }
506 | .fa-fire:before {
507 | content: "\f06d";
508 | }
509 | .fa-eye:before {
510 | content: "\f06e";
511 | }
512 | .fa-eye-slash:before {
513 | content: "\f070";
514 | }
515 | .fa-warning:before,
516 | .fa-exclamation-triangle:before {
517 | content: "\f071";
518 | }
519 | .fa-plane:before {
520 | content: "\f072";
521 | }
522 | .fa-calendar:before {
523 | content: "\f073";
524 | }
525 | .fa-random:before {
526 | content: "\f074";
527 | }
528 | .fa-comment:before {
529 | content: "\f075";
530 | }
531 | .fa-magnet:before {
532 | content: "\f076";
533 | }
534 | .fa-chevron-up:before {
535 | content: "\f077";
536 | }
537 | .fa-chevron-down:before {
538 | content: "\f078";
539 | }
540 | .fa-retweet:before {
541 | content: "\f079";
542 | }
543 | .fa-shopping-cart:before {
544 | content: "\f07a";
545 | }
546 | .fa-folder:before {
547 | content: "\f07b";
548 | }
549 | .fa-folder-open:before {
550 | content: "\f07c";
551 | }
552 | .fa-arrows-v:before {
553 | content: "\f07d";
554 | }
555 | .fa-arrows-h:before {
556 | content: "\f07e";
557 | }
558 | .fa-bar-chart-o:before {
559 | content: "\f080";
560 | }
561 | .fa-twitter-square:before {
562 | content: "\f081";
563 | }
564 | .fa-facebook-square:before {
565 | content: "\f082";
566 | }
567 | .fa-camera-retro:before {
568 | content: "\f083";
569 | }
570 | .fa-key:before {
571 | content: "\f084";
572 | }
573 | .fa-gears:before,
574 | .fa-cogs:before {
575 | content: "\f085";
576 | }
577 | .fa-comments:before {
578 | content: "\f086";
579 | }
580 | .fa-thumbs-o-up:before {
581 | content: "\f087";
582 | }
583 | .fa-thumbs-o-down:before {
584 | content: "\f088";
585 | }
586 | .fa-star-half:before {
587 | content: "\f089";
588 | }
589 | .fa-heart-o:before {
590 | content: "\f08a";
591 | }
592 | .fa-sign-out:before {
593 | content: "\f08b";
594 | }
595 | .fa-linkedin-square:before {
596 | content: "\f08c";
597 | }
598 | .fa-thumb-tack:before {
599 | content: "\f08d";
600 | }
601 | .fa-external-link:before {
602 | content: "\f08e";
603 | }
604 | .fa-sign-in:before {
605 | content: "\f090";
606 | }
607 | .fa-trophy:before {
608 | content: "\f091";
609 | }
610 | .fa-github-square:before {
611 | content: "\f092";
612 | }
613 | .fa-upload:before {
614 | content: "\f093";
615 | }
616 | .fa-lemon-o:before {
617 | content: "\f094";
618 | }
619 | .fa-phone:before {
620 | content: "\f095";
621 | }
622 | .fa-square-o:before {
623 | content: "\f096";
624 | }
625 | .fa-bookmark-o:before {
626 | content: "\f097";
627 | }
628 | .fa-phone-square:before {
629 | content: "\f098";
630 | }
631 | .fa-twitter:before {
632 | content: "\f099";
633 | }
634 | .fa-facebook:before {
635 | content: "\f09a";
636 | }
637 | .fa-github:before {
638 | content: "\f09b";
639 | }
640 | .fa-unlock:before {
641 | content: "\f09c";
642 | }
643 | .fa-credit-card:before {
644 | content: "\f09d";
645 | }
646 | .fa-rss:before {
647 | content: "\f09e";
648 | }
649 | .fa-hdd-o:before {
650 | content: "\f0a0";
651 | }
652 | .fa-bullhorn:before {
653 | content: "\f0a1";
654 | }
655 | .fa-bell:before {
656 | content: "\f0f3";
657 | }
658 | .fa-certificate:before {
659 | content: "\f0a3";
660 | }
661 | .fa-hand-o-right:before {
662 | content: "\f0a4";
663 | }
664 | .fa-hand-o-left:before {
665 | content: "\f0a5";
666 | }
667 | .fa-hand-o-up:before {
668 | content: "\f0a6";
669 | }
670 | .fa-hand-o-down:before {
671 | content: "\f0a7";
672 | }
673 | .fa-arrow-circle-left:before {
674 | content: "\f0a8";
675 | }
676 | .fa-arrow-circle-right:before {
677 | content: "\f0a9";
678 | }
679 | .fa-arrow-circle-up:before {
680 | content: "\f0aa";
681 | }
682 | .fa-arrow-circle-down:before {
683 | content: "\f0ab";
684 | }
685 | .fa-globe:before {
686 | content: "\f0ac";
687 | }
688 | .fa-wrench:before {
689 | content: "\f0ad";
690 | }
691 | .fa-tasks:before {
692 | content: "\f0ae";
693 | }
694 | .fa-filter:before {
695 | content: "\f0b0";
696 | }
697 | .fa-briefcase:before {
698 | content: "\f0b1";
699 | }
700 | .fa-arrows-alt:before {
701 | content: "\f0b2";
702 | }
703 | .fa-group:before,
704 | .fa-users:before {
705 | content: "\f0c0";
706 | }
707 | .fa-chain:before,
708 | .fa-link:before {
709 | content: "\f0c1";
710 | }
711 | .fa-cloud:before {
712 | content: "\f0c2";
713 | }
714 | .fa-flask:before {
715 | content: "\f0c3";
716 | }
717 | .fa-cut:before,
718 | .fa-scissors:before {
719 | content: "\f0c4";
720 | }
721 | .fa-copy:before,
722 | .fa-files-o:before {
723 | content: "\f0c5";
724 | }
725 | .fa-paperclip:before {
726 | content: "\f0c6";
727 | }
728 | .fa-save:before,
729 | .fa-floppy-o:before {
730 | content: "\f0c7";
731 | }
732 | .fa-square:before {
733 | content: "\f0c8";
734 | }
735 | .fa-bars:before {
736 | content: "\f0c9";
737 | }
738 | .fa-list-ul:before {
739 | content: "\f0ca";
740 | }
741 | .fa-list-ol:before {
742 | content: "\f0cb";
743 | }
744 | .fa-strikethrough:before {
745 | content: "\f0cc";
746 | }
747 | .fa-underline:before {
748 | content: "\f0cd";
749 | }
750 | .fa-table:before {
751 | content: "\f0ce";
752 | }
753 | .fa-magic:before {
754 | content: "\f0d0";
755 | }
756 | .fa-truck:before {
757 | content: "\f0d1";
758 | }
759 | .fa-pinterest:before {
760 | content: "\f0d2";
761 | }
762 | .fa-pinterest-square:before {
763 | content: "\f0d3";
764 | }
765 | .fa-google-plus-square:before {
766 | content: "\f0d4";
767 | }
768 | .fa-google-plus:before {
769 | content: "\f0d5";
770 | }
771 | .fa-money:before {
772 | content: "\f0d6";
773 | }
774 | .fa-caret-down:before {
775 | content: "\f0d7";
776 | }
777 | .fa-caret-up:before {
778 | content: "\f0d8";
779 | }
780 | .fa-caret-left:before {
781 | content: "\f0d9";
782 | }
783 | .fa-caret-right:before {
784 | content: "\f0da";
785 | }
786 | .fa-columns:before {
787 | content: "\f0db";
788 | }
789 | .fa-unsorted:before,
790 | .fa-sort:before {
791 | content: "\f0dc";
792 | }
793 | .fa-sort-down:before,
794 | .fa-sort-asc:before {
795 | content: "\f0dd";
796 | }
797 | .fa-sort-up:before,
798 | .fa-sort-desc:before {
799 | content: "\f0de";
800 | }
801 | .fa-envelope:before {
802 | content: "\f0e0";
803 | }
804 | .fa-linkedin:before {
805 | content: "\f0e1";
806 | }
807 | .fa-rotate-left:before,
808 | .fa-undo:before {
809 | content: "\f0e2";
810 | }
811 | .fa-legal:before,
812 | .fa-gavel:before {
813 | content: "\f0e3";
814 | }
815 | .fa-dashboard:before,
816 | .fa-tachometer:before {
817 | content: "\f0e4";
818 | }
819 | .fa-comment-o:before {
820 | content: "\f0e5";
821 | }
822 | .fa-comments-o:before {
823 | content: "\f0e6";
824 | }
825 | .fa-flash:before,
826 | .fa-bolt:before {
827 | content: "\f0e7";
828 | }
829 | .fa-sitemap:before {
830 | content: "\f0e8";
831 | }
832 | .fa-umbrella:before {
833 | content: "\f0e9";
834 | }
835 | .fa-paste:before,
836 | .fa-clipboard:before {
837 | content: "\f0ea";
838 | }
839 | .fa-lightbulb-o:before {
840 | content: "\f0eb";
841 | }
842 | .fa-exchange:before {
843 | content: "\f0ec";
844 | }
845 | .fa-cloud-download:before {
846 | content: "\f0ed";
847 | }
848 | .fa-cloud-upload:before {
849 | content: "\f0ee";
850 | }
851 | .fa-user-md:before {
852 | content: "\f0f0";
853 | }
854 | .fa-stethoscope:before {
855 | content: "\f0f1";
856 | }
857 | .fa-suitcase:before {
858 | content: "\f0f2";
859 | }
860 | .fa-bell-o:before {
861 | content: "\f0a2";
862 | }
863 | .fa-coffee:before {
864 | content: "\f0f4";
865 | }
866 | .fa-cutlery:before {
867 | content: "\f0f5";
868 | }
869 | .fa-file-text-o:before {
870 | content: "\f0f6";
871 | }
872 | .fa-building-o:before {
873 | content: "\f0f7";
874 | }
875 | .fa-hospital-o:before {
876 | content: "\f0f8";
877 | }
878 | .fa-ambulance:before {
879 | content: "\f0f9";
880 | }
881 | .fa-medkit:before {
882 | content: "\f0fa";
883 | }
884 | .fa-fighter-jet:before {
885 | content: "\f0fb";
886 | }
887 | .fa-beer:before {
888 | content: "\f0fc";
889 | }
890 | .fa-h-square:before {
891 | content: "\f0fd";
892 | }
893 | .fa-plus-square:before {
894 | content: "\f0fe";
895 | }
896 | .fa-angle-double-left:before {
897 | content: "\f100";
898 | }
899 | .fa-angle-double-right:before {
900 | content: "\f101";
901 | }
902 | .fa-angle-double-up:before {
903 | content: "\f102";
904 | }
905 | .fa-angle-double-down:before {
906 | content: "\f103";
907 | }
908 | .fa-angle-left:before {
909 | content: "\f104";
910 | }
911 | .fa-angle-right:before {
912 | content: "\f105";
913 | }
914 | .fa-angle-up:before {
915 | content: "\f106";
916 | }
917 | .fa-angle-down:before {
918 | content: "\f107";
919 | }
920 | .fa-desktop:before {
921 | content: "\f108";
922 | }
923 | .fa-laptop:before {
924 | content: "\f109";
925 | }
926 | .fa-tablet:before {
927 | content: "\f10a";
928 | }
929 | .fa-mobile-phone:before,
930 | .fa-mobile:before {
931 | content: "\f10b";
932 | }
933 | .fa-circle-o:before {
934 | content: "\f10c";
935 | }
936 | .fa-quote-left:before {
937 | content: "\f10d";
938 | }
939 | .fa-quote-right:before {
940 | content: "\f10e";
941 | }
942 | .fa-spinner:before {
943 | content: "\f110";
944 | }
945 | .fa-circle:before {
946 | content: "\f111";
947 | }
948 | .fa-mail-reply:before,
949 | .fa-reply:before {
950 | content: "\f112";
951 | }
952 | .fa-github-alt:before {
953 | content: "\f113";
954 | }
955 | .fa-folder-o:before {
956 | content: "\f114";
957 | }
958 | .fa-folder-open-o:before {
959 | content: "\f115";
960 | }
961 | .fa-smile-o:before {
962 | content: "\f118";
963 | }
964 | .fa-frown-o:before {
965 | content: "\f119";
966 | }
967 | .fa-meh-o:before {
968 | content: "\f11a";
969 | }
970 | .fa-gamepad:before {
971 | content: "\f11b";
972 | }
973 | .fa-keyboard-o:before {
974 | content: "\f11c";
975 | }
976 | .fa-flag-o:before {
977 | content: "\f11d";
978 | }
979 | .fa-flag-checkered:before {
980 | content: "\f11e";
981 | }
982 | .fa-terminal:before {
983 | content: "\f120";
984 | }
985 | .fa-code:before {
986 | content: "\f121";
987 | }
988 | .fa-reply-all:before {
989 | content: "\f122";
990 | }
991 | .fa-mail-reply-all:before {
992 | content: "\f122";
993 | }
994 | .fa-star-half-empty:before,
995 | .fa-star-half-full:before,
996 | .fa-star-half-o:before {
997 | content: "\f123";
998 | }
999 | .fa-location-arrow:before {
1000 | content: "\f124";
1001 | }
1002 | .fa-crop:before {
1003 | content: "\f125";
1004 | }
1005 | .fa-code-fork:before {
1006 | content: "\f126";
1007 | }
1008 | .fa-unlink:before,
1009 | .fa-chain-broken:before {
1010 | content: "\f127";
1011 | }
1012 | .fa-question:before {
1013 | content: "\f128";
1014 | }
1015 | .fa-info:before {
1016 | content: "\f129";
1017 | }
1018 | .fa-exclamation:before {
1019 | content: "\f12a";
1020 | }
1021 | .fa-superscript:before {
1022 | content: "\f12b";
1023 | }
1024 | .fa-subscript:before {
1025 | content: "\f12c";
1026 | }
1027 | .fa-eraser:before {
1028 | content: "\f12d";
1029 | }
1030 | .fa-puzzle-piece:before {
1031 | content: "\f12e";
1032 | }
1033 | .fa-microphone:before {
1034 | content: "\f130";
1035 | }
1036 | .fa-microphone-slash:before {
1037 | content: "\f131";
1038 | }
1039 | .fa-shield:before {
1040 | content: "\f132";
1041 | }
1042 | .fa-calendar-o:before {
1043 | content: "\f133";
1044 | }
1045 | .fa-fire-extinguisher:before {
1046 | content: "\f134";
1047 | }
1048 | .fa-rocket:before {
1049 | content: "\f135";
1050 | }
1051 | .fa-maxcdn:before {
1052 | content: "\f136";
1053 | }
1054 | .fa-chevron-circle-left:before {
1055 | content: "\f137";
1056 | }
1057 | .fa-chevron-circle-right:before {
1058 | content: "\f138";
1059 | }
1060 | .fa-chevron-circle-up:before {
1061 | content: "\f139";
1062 | }
1063 | .fa-chevron-circle-down:before {
1064 | content: "\f13a";
1065 | }
1066 | .fa-html5:before {
1067 | content: "\f13b";
1068 | }
1069 | .fa-css3:before {
1070 | content: "\f13c";
1071 | }
1072 | .fa-anchor:before {
1073 | content: "\f13d";
1074 | }
1075 | .fa-unlock-alt:before {
1076 | content: "\f13e";
1077 | }
1078 | .fa-bullseye:before {
1079 | content: "\f140";
1080 | }
1081 | .fa-ellipsis-h:before {
1082 | content: "\f141";
1083 | }
1084 | .fa-ellipsis-v:before {
1085 | content: "\f142";
1086 | }
1087 | .fa-rss-square:before {
1088 | content: "\f143";
1089 | }
1090 | .fa-play-circle:before {
1091 | content: "\f144";
1092 | }
1093 | .fa-ticket:before {
1094 | content: "\f145";
1095 | }
1096 | .fa-minus-square:before {
1097 | content: "\f146";
1098 | }
1099 | .fa-minus-square-o:before {
1100 | content: "\f147";
1101 | }
1102 | .fa-level-up:before {
1103 | content: "\f148";
1104 | }
1105 | .fa-level-down:before {
1106 | content: "\f149";
1107 | }
1108 | .fa-check-square:before {
1109 | content: "\f14a";
1110 | }
1111 | .fa-pencil-square:before {
1112 | content: "\f14b";
1113 | }
1114 | .fa-external-link-square:before {
1115 | content: "\f14c";
1116 | }
1117 | .fa-share-square:before {
1118 | content: "\f14d";
1119 | }
1120 | .fa-compass:before {
1121 | content: "\f14e";
1122 | }
1123 | .fa-toggle-down:before,
1124 | .fa-caret-square-o-down:before {
1125 | content: "\f150";
1126 | }
1127 | .fa-toggle-up:before,
1128 | .fa-caret-square-o-up:before {
1129 | content: "\f151";
1130 | }
1131 | .fa-toggle-right:before,
1132 | .fa-caret-square-o-right:before {
1133 | content: "\f152";
1134 | }
1135 | .fa-euro:before,
1136 | .fa-eur:before {
1137 | content: "\f153";
1138 | }
1139 | .fa-gbp:before {
1140 | content: "\f154";
1141 | }
1142 | .fa-dollar:before,
1143 | .fa-usd:before {
1144 | content: "\f155";
1145 | }
1146 | .fa-rupee:before,
1147 | .fa-inr:before {
1148 | content: "\f156";
1149 | }
1150 | .fa-cny:before,
1151 | .fa-rmb:before,
1152 | .fa-yen:before,
1153 | .fa-jpy:before {
1154 | content: "\f157";
1155 | }
1156 | .fa-ruble:before,
1157 | .fa-rouble:before,
1158 | .fa-rub:before {
1159 | content: "\f158";
1160 | }
1161 | .fa-won:before,
1162 | .fa-krw:before {
1163 | content: "\f159";
1164 | }
1165 | .fa-bitcoin:before,
1166 | .fa-btc:before {
1167 | content: "\f15a";
1168 | }
1169 | .fa-file:before {
1170 | content: "\f15b";
1171 | }
1172 | .fa-file-text:before {
1173 | content: "\f15c";
1174 | }
1175 | .fa-sort-alpha-asc:before {
1176 | content: "\f15d";
1177 | }
1178 | .fa-sort-alpha-desc:before {
1179 | content: "\f15e";
1180 | }
1181 | .fa-sort-amount-asc:before {
1182 | content: "\f160";
1183 | }
1184 | .fa-sort-amount-desc:before {
1185 | content: "\f161";
1186 | }
1187 | .fa-sort-numeric-asc:before {
1188 | content: "\f162";
1189 | }
1190 | .fa-sort-numeric-desc:before {
1191 | content: "\f163";
1192 | }
1193 | .fa-thumbs-up:before {
1194 | content: "\f164";
1195 | }
1196 | .fa-thumbs-down:before {
1197 | content: "\f165";
1198 | }
1199 | .fa-youtube-square:before {
1200 | content: "\f166";
1201 | }
1202 | .fa-youtube:before {
1203 | content: "\f167";
1204 | }
1205 | .fa-xing:before {
1206 | content: "\f168";
1207 | }
1208 | .fa-xing-square:before {
1209 | content: "\f169";
1210 | }
1211 | .fa-youtube-play:before {
1212 | content: "\f16a";
1213 | }
1214 | .fa-dropbox:before {
1215 | content: "\f16b";
1216 | }
1217 | .fa-stack-overflow:before {
1218 | content: "\f16c";
1219 | }
1220 | .fa-instagram:before {
1221 | content: "\f16d";
1222 | }
1223 | .fa-flickr:before {
1224 | content: "\f16e";
1225 | }
1226 | .fa-adn:before {
1227 | content: "\f170";
1228 | }
1229 | .fa-bitbucket:before {
1230 | content: "\f171";
1231 | }
1232 | .fa-bitbucket-square:before {
1233 | content: "\f172";
1234 | }
1235 | .fa-tumblr:before {
1236 | content: "\f173";
1237 | }
1238 | .fa-tumblr-square:before {
1239 | content: "\f174";
1240 | }
1241 | .fa-long-arrow-down:before {
1242 | content: "\f175";
1243 | }
1244 | .fa-long-arrow-up:before {
1245 | content: "\f176";
1246 | }
1247 | .fa-long-arrow-left:before {
1248 | content: "\f177";
1249 | }
1250 | .fa-long-arrow-right:before {
1251 | content: "\f178";
1252 | }
1253 | .fa-apple:before {
1254 | content: "\f179";
1255 | }
1256 | .fa-windows:before {
1257 | content: "\f17a";
1258 | }
1259 | .fa-android:before {
1260 | content: "\f17b";
1261 | }
1262 | .fa-linux:before {
1263 | content: "\f17c";
1264 | }
1265 | .fa-dribbble:before {
1266 | content: "\f17d";
1267 | }
1268 | .fa-skype:before {
1269 | content: "\f17e";
1270 | }
1271 | .fa-foursquare:before {
1272 | content: "\f180";
1273 | }
1274 | .fa-trello:before {
1275 | content: "\f181";
1276 | }
1277 | .fa-female:before {
1278 | content: "\f182";
1279 | }
1280 | .fa-male:before {
1281 | content: "\f183";
1282 | }
1283 | .fa-gittip:before {
1284 | content: "\f184";
1285 | }
1286 | .fa-sun-o:before {
1287 | content: "\f185";
1288 | }
1289 | .fa-moon-o:before {
1290 | content: "\f186";
1291 | }
1292 | .fa-archive:before {
1293 | content: "\f187";
1294 | }
1295 | .fa-bug:before {
1296 | content: "\f188";
1297 | }
1298 | .fa-vk:before {
1299 | content: "\f189";
1300 | }
1301 | .fa-weibo:before {
1302 | content: "\f18a";
1303 | }
1304 | .fa-renren:before {
1305 | content: "\f18b";
1306 | }
1307 | .fa-pagelines:before {
1308 | content: "\f18c";
1309 | }
1310 | .fa-stack-exchange:before {
1311 | content: "\f18d";
1312 | }
1313 | .fa-arrow-circle-o-right:before {
1314 | content: "\f18e";
1315 | }
1316 | .fa-arrow-circle-o-left:before {
1317 | content: "\f190";
1318 | }
1319 | .fa-toggle-left:before,
1320 | .fa-caret-square-o-left:before {
1321 | content: "\f191";
1322 | }
1323 | .fa-dot-circle-o:before {
1324 | content: "\f192";
1325 | }
1326 | .fa-wheelchair:before {
1327 | content: "\f193";
1328 | }
1329 | .fa-vimeo-square:before {
1330 | content: "\f194";
1331 | }
1332 | .fa-turkish-lira:before,
1333 | .fa-try:before {
1334 | content: "\f195";
1335 | }
1336 | .fa-plus-square-o:before {
1337 | content: "\f196";
1338 | }
1339 |
--------------------------------------------------------------------------------
/demo/assets/js/jquery.refineslide.js:
--------------------------------------------------------------------------------
1 | /*
2 | * jQuery RefineSlide plugin v0.4.1
3 | * http://github.com/alexdunphy/refineslide
4 | * Requires: jQuery v1.8+
5 | * MIT License (http://www.opensource.org/licenses/mit-license.php)
6 | */
7 |
8 | ;(function ($, window, document) {
9 | 'use strict';
10 |
11 | // Baked-in settings for extension
12 | var defaults = {
13 | maxWidth : 800, // Max slider width - should be set to image width
14 | transition : 'cubeV', // String (default 'cubeV'): Transition type ('custom', random', 'cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV')
15 | customTransitions : [],
16 | fallback3d : 'sliceV', // String (default 'sliceV'): Fallback for browsers that support transitions, but not 3d transforms (only used if primary transition makes use of 3d-transforms)
17 | perspective : 1000, // Perspective (used for 3d transforms)
18 | useThumbs : true, // Bool (default true): Navigation type thumbnails
19 | useArrows : false, // Bool (default false): Navigation type previous and next arrows
20 | thumbMargin : 3, // Int (default 3): Percentage width of thumb margin
21 | autoPlay : false, // Int (default false): Auto-cycle slider
22 | delay : 5000, // Int (default 5000) Time between slides in ms
23 | transitionDuration : 800, // Int (default 800): Transition length in ms
24 | startSlide : 0, // Int (default 0): First slide
25 | keyNav : true, // Bool (default true): Use left/right arrow keys to switch slide
26 | captionWidth : 50, // Int (default 50): Percentage of slide taken by caption
27 | arrowTemplate : '
', // String: The markup used for arrow controls (if arrows are used). Must use classes '.rs-next' & '.rs-prev'
28 | onInit : function () {}, // Func: User-defined, fires with slider initialisation
29 | onChange : function () {}, // Func: User-defined, fires with transition start
30 | afterChange : function () {} // Func: User-defined, fires after transition end
31 | };
32 |
33 | // RS (RefineSlide) object constructor
34 | function RS(elem, settings) {
35 | this.$slider = $(elem).addClass('rs-slider'); // Elem: Slider element
36 | this.settings = $.extend({}, defaults, settings); // Obj: Merged user settings/defaults
37 | this.$slides = this.$slider.find('> li'); // Elem Arr: Slide elements
38 | this.totalSlides = this.$slides.length; // Int: Number of slides
39 | this.cssTransitions = testBrowser.cssTransitions(); // Bool: Test for CSS transition support
40 | this.cssTransforms3d = testBrowser.cssTransforms3d(); // Bool: Test for 3D transform support
41 | this.currentPlace = this.settings.startSlide; // Int: Index of current slide (starts at 0)
42 | this.$currentSlide = this.$slides.eq(this.currentPlace); // Elem: Starting slide
43 | this.inProgress = false; // Bool: Prevents overlapping transitions
44 | this.$sliderWrap = this.$slider.wrap('
').parent(); // Elem: Slider wrapper div
45 | this.$sliderBG = this.$slider.wrap('
').parent(); // Elem: Slider background (useful for styling & essential for cube transitions)
46 | this.settings.slider = this; // Make slider object accessible to client call code with 'this.slider' (there's probably a better way to do this)
47 |
48 | this.init();
49 | }
50 |
51 | RS.prototype = {
52 | cycling: null,
53 | $slideImages: null,
54 |
55 | init: function () {
56 | // User-defined function to fire on slider initialisation
57 | this.settings.onInit();
58 |
59 | // Setup captions
60 | this.captions();
61 |
62 | if(this.settings.transition === 'custom') {
63 | this.nextAnimIndex = -1; // Set animation index for custom animation
64 | }
65 |
66 | if (this.settings.useArrows) {
67 | this.setArrows(); // Setup arrow navigation
68 | }
69 |
70 | if (this.settings.keyNav) {
71 | this.setKeys(); // Setup keyboard navigation
72 | }
73 |
74 | for (var i = 0; i < this.totalSlides; i++) { // Add slide identifying classes
75 | this.$slides.eq(i).addClass('rs-slide-' + i);
76 | }
77 |
78 | if (this.settings.autoPlay) {
79 | this.setAutoPlay();
80 |
81 | // Listen for slider mouseover
82 | this.$slider.on({
83 | mouseenter: $.proxy(function () {
84 | if (this.cycling !== null) {
85 | clearTimeout(this.cycling);
86 | }
87 | }, this),
88 | mouseleave: $.proxy(this.setAutoPlay, this) // Resume slideshow
89 | });
90 | }
91 |
92 | // Get the first image in each slide
93 | this.$slideImages = this.$slides.find('img:eq(0)').addClass('rs-slide-image');
94 |
95 | this.setup();
96 | }
97 |
98 | ,setup: function () {
99 | this.$sliderWrap.css('width', this.settings.maxWidth);
100 |
101 | if (this.settings.useThumbs) {
102 | this.setThumbs();
103 | }
104 |
105 | // Display first slide
106 | this.$currentSlide.css({'opacity' : 1, 'z-index' : 2});
107 | }
108 |
109 | ,setArrows:function () {
110 | var that = this;
111 |
112 | // Append user-defined arrow template (elems) to '.rs-wrap' elem
113 | this.$sliderWrap.append(this.settings.arrowTemplate);
114 |
115 | // Fire next() method when clicked
116 | $('.rs-next', this.$sliderWrap).on('click', function (e) {
117 | e.preventDefault();
118 | that.next();
119 | });
120 |
121 | // Fire prev() method when clicked
122 | $('.rs-prev', this.$sliderWrap).on('click', function (e) {
123 | e.preventDefault();
124 | that.prev();
125 | });
126 | }
127 |
128 | ,next: function () {
129 | if (this.settings.transition === 'custom') {
130 | this.nextAnimIndex++;
131 | }
132 |
133 | // If on final slide, loop back to first slide
134 | if (this.currentPlace === this.totalSlides - 1) {
135 | this.transition(0, true); // Call transition
136 | } else {
137 | this.transition(this.currentPlace + 1, true); // Call transition
138 | }
139 | }
140 |
141 | ,prev: function () {
142 | if (this.settings.transition === 'custom') {
143 | this.nextAnimIndex--;
144 | }
145 |
146 | // If on first slide, loop round to final slide
147 | if (this.currentPlace == 0) {
148 | this.transition(this.totalSlides - 1, false); // Call transition
149 | } else {
150 | this.transition(this.currentPlace - 1, false); // Call transition
151 | }
152 | }
153 |
154 | ,setKeys: function () {
155 | var that = this;
156 |
157 | // Bind keyboard left/right arrows to next/prev methods
158 | $(document).on('keydown', function (e) {
159 | if (e.keyCode === 39) { // Right arrow key
160 | that.next();
161 | } else if (e.keyCode === 37) { // Left arrow key
162 | that.prev();
163 | }
164 | });
165 | }
166 |
167 | ,setAutoPlay: function () {
168 | var that = this;
169 |
170 | // Set timeout to object property so it can be accessed/cleared externally
171 | this.cycling = setTimeout(function () {
172 | that.next();
173 | }, this.settings.delay);
174 | }
175 |
176 | ,setThumbs: function () {
177 | var that = this,
178 | // Set percentage width (minus user-defined margin) to span width of slider
179 | width = (100 - ((this.totalSlides - 1) * this.settings.thumbMargin)) / this.totalSlides + '%';
180 |
181 | //').appendTo(this.$sliderWrap);
183 |
184 | // Loop to apply thumbnail widths/margins to wraps, appending an image clone to each
185 | for (var i = 0; i < this.totalSlides; i++) {
186 | var $thumb = $('')
187 | .css({
188 | width : width,
189 | marginLeft : this.settings.thumbMargin + '%'
190 | })
191 | .attr('href', '#')
192 | .data('rs-num', i);
193 |
194 | this.$slideImages.eq(i).clone()
195 | .removeAttr('style')
196 | .appendTo(this.$thumbWrap)
197 | .wrap($thumb);
198 | }
199 |
200 | this.$thumbWrapLinks = this.$thumbWrap.find('a');
201 |
202 | // Safety margin to stop IE7 wrapping the thumbnails (no visual effect in other browsers)
203 | this.$thumbWrap.children().last().css('margin-right', -10);
204 |
205 | // Add active class to starting slide's respective thumb
206 | this.$thumbWrapLinks.eq(this.settings.startSlide).addClass('active');
207 |
208 | // Listen for click events on thumnails
209 | this.$thumbWrap.on('click', 'a', function (e) {
210 | e.preventDefault();
211 |
212 | that.transition(parseInt($(this).data('rs-num'))); // Call transition using identifier from thumb class
213 | });
214 | }
215 |
216 | ,captions: function() {
217 | var that = this,
218 | $captions = this.$slides.find('.rs-caption');
219 |
220 | // User-defined caption width
221 | $captions.css({
222 | width: that.settings.captionWidth + '%',
223 | opacity: 0
224 | });
225 |
226 | // Display starting slide's caption
227 | this.$currentSlide.find('.rs-caption').css('opacity', 1);
228 |
229 | $captions.each(function() {
230 | $(this).css({
231 | transition: 'opacity ' + that.settings.transitionDuration + 'ms linear',
232 | backfaceVisibility: 'hidden'
233 | });
234 | });
235 | }
236 |
237 | ,transition: function (slideNum, forward) {
238 | // If inProgress flag is not set (i.e. if not mid-transition)
239 | if (!this.inProgress) {
240 | // If not already on requested slide
241 | if (slideNum !== this.currentPlace) {
242 | // Check whether the requested slide index is ahead or behind in the array (if not passed in as param)
243 | if (typeof forward === 'undefined') {
244 | forward = slideNum > this.currentPlace ? true : false;
245 | }
246 |
247 | // If thumbnails exist, revise active class states
248 | if (this.settings.useThumbs) {
249 | this.$thumbWrapLinks.eq(this.currentPlace).removeClass('active');
250 | this.$thumbWrapLinks.eq(slideNum).addClass('active');
251 | }
252 |
253 | // Assign next slide prop (elem)
254 | this.$nextSlide = this.$slides.eq(slideNum);
255 |
256 | // Assign next slide index prop (int)
257 | this.currentPlace = slideNum;
258 |
259 | // User-defined function, fires with transition
260 | this.settings.onChange();
261 |
262 | // Instantiate new Transition object, passing in self (RS obj), transition type (string), direction (bool)
263 | new Transition(this, this.settings.transition, forward);
264 | }
265 | }
266 | }
267 | };
268 |
269 | // Transition object constructor
270 | function Transition(RS, transition, forward) {
271 | this.RS = RS; // RS (RefineSlide) object
272 | this.RS.inProgress = true; // Set RS inProgress flag to prevent additional Transition objects being instantiated until transition end
273 | this.forward = forward; // Bool: true for forward, false for backward
274 | this.transition = transition; // String: name of transition requested
275 |
276 | if (this.transition === 'custom') {
277 | this.customAnims = this.RS.settings.customTransitions;
278 | this.isCustomTransition = true;
279 | }
280 |
281 | // Remove incorrect specified elements from customAnims array.
282 | if (this.transition === 'custom') {
283 | var that = this;
284 | $.each(this.customAnims, function (i, obj) {
285 | if ($.inArray(obj, that.anims) === -1) {
286 | that.customAnims.splice(i, 1);
287 | }
288 | });
289 | }
290 |
291 | this.fallback3d = this.RS.settings.fallback3d; // String: fallback to use when 3D transforms aren't supported
292 |
293 | this.init(); // Call Transition initialisation method
294 | }
295 |
296 | // Transition object Prototype
297 | Transition.prototype = {
298 | // Fallback to use if CSS transitions are unsupported
299 | fallback: 'fade'
300 |
301 | // Array of possible animations
302 | ,anims: ['cubeH', 'cubeV', 'fade', 'sliceH', 'sliceV', 'slideH', 'slideV', 'scale', 'blockScale', 'kaleidoscope', 'fan', 'blindH', 'blindV']
303 |
304 | ,customAnims: []
305 |
306 | ,init: function () {
307 | // Call requested transition method
308 | this[this.transition]();
309 | }
310 |
311 | ,before: function (callback) {
312 | var that = this;
313 |
314 | // Prepare slide opacity & z-index
315 | this.RS.$currentSlide.css('z-index', 2);
316 | this.RS.$nextSlide.css({'opacity' : 1, 'z-index' : 1});
317 |
318 | // Fade out/in captions with CSS/JS depending on browser capability
319 | if (this.RS.cssTransitions) {
320 | this.RS.$currentSlide.find('.rs-caption').css('opacity', 0);
321 | this.RS.$nextSlide.find('.rs-caption').css('opacity', 1);
322 | } else {
323 | this.RS.$currentSlide.find('.rs-caption').animate({'opacity' : 0}, that.RS.settings.transitionDuration);
324 | this.RS.$nextSlide.find('.rs-caption').animate({'opacity' : 1}, that.RS.settings.transitionDuration);
325 | }
326 |
327 | // Check if transition describes a setup method
328 | if (typeof this.setup === 'function') {
329 | // Setup required by transition
330 | var transition = this.setup();
331 |
332 | setTimeout(function () {
333 | callback(transition);
334 | }, 20);
335 | } else {
336 | // Transition execution
337 | this.execute();
338 | }
339 |
340 | // Listen for CSS transition end on elem (set by transition)
341 | if (this.RS.cssTransitions) {
342 | $(this.listenTo).one('webkitTransitionEnd transitionend otransitionend oTransitionEnd mstransitionend', $.proxy(this.after, this));
343 | }
344 | }
345 |
346 | ,after: function () {
347 | // Reset transition CSS
348 | this.RS.$sliderBG.removeAttr('style');
349 | this.RS.$slider.removeAttr('style');
350 | this.RS.$currentSlide.removeAttr('style');
351 | this.RS.$nextSlide.removeAttr('style');
352 | this.RS.$currentSlide.css({
353 | zIndex: 1,
354 | opacity: 0
355 | });
356 | this.RS.$nextSlide.css({
357 | zIndex: 2,
358 | opacity : 1
359 | });
360 |
361 | // Additional reset steps required by transition (if any exist)
362 | if (typeof this.reset === 'function') {
363 | this.reset();
364 | }
365 |
366 | // If slideshow is active, reset the timeout
367 | if (this.RS.settings.autoPlay) {
368 | clearTimeout(this.RS.cycling);
369 | this.RS.setAutoPlay();
370 | }
371 |
372 | // Assign new slide position
373 | this.RS.$currentSlide = this.RS.$nextSlide;
374 |
375 | // Remove RS obj inProgress flag (i.e. allow new Transition to be instantiated)
376 | this.RS.inProgress = false;
377 |
378 | // User-defined function, fires after transition has ended
379 | this.RS.settings.afterChange();
380 | }
381 |
382 | ,fade: function () {
383 | var that = this;
384 |
385 | // If CSS transitions are supported by browser
386 | if (this.RS.cssTransitions) {
387 | // Setup steps
388 | this.setup = function () {
389 | // Set event listener to next slide elem
390 | that.listenTo = that.RS.$currentSlide;
391 |
392 | that.RS.$currentSlide.css('transition', 'opacity ' + that.RS.settings.transitionDuration + 'ms linear');
393 | };
394 |
395 | // Execution steps
396 | this.execute = function () {
397 | // Display next slide over current slide
398 | that.RS.$currentSlide.css('opacity', 0);
399 | }
400 | } else { // JS animation fallback
401 | this.execute = function () {
402 | that.RS.$currentSlide.animate({'opacity' : 0}, that.RS.settings.transitionDuration, function () {
403 | // Reset steps
404 | that.after();
405 | });
406 | }
407 | }
408 |
409 | this.before($.proxy(this.execute, this));
410 | }
411 |
412 | // cube() method is used by cubeH() & cubeV() - not for calling directly
413 | ,cube: function (tz, ntx, nty, nrx, nry, wrx, wry) { // Args: translateZ, (next slide) translateX, (next slide) translateY, (next slide) rotateX, (next slide) rotateY, (wrap) rotateX, (wrap) rotateY
414 | // Fallback if browser does not support 3d transforms/CSS transitions
415 | if (!this.RS.cssTransitions || !this.RS.cssTransforms3d) {
416 | return this[this['fallback3d']](); // User-defined transition
417 | }
418 |
419 | var that = this;
420 |
421 | // Setup steps
422 | this.setup = function () {
423 | // Set event listener to '.rs-slider'
424 | that.listenTo = that.RS.$slider;
425 |
426 | this.RS.$sliderBG.css('perspective', 1000);
427 |
428 | // props for slide - s
429 | that.RS.$currentSlide.css({
430 | transform : 'translateZ(' + tz + 'px)',
431 | backfaceVisibility : 'hidden'
432 | });
433 |
434 | // props for next slide
-
435 | that.RS.$nextSlide.css({
436 | opacity : 1,
437 | backfaceVisibility : 'hidden',
438 | transform : 'translateY(' + nty + 'px) translateX(' + ntx + 'px) rotateY('+ nry +'deg) rotateX('+ nrx +'deg)'
439 | });
440 |
441 | // props for slider
442 | that.RS.$slider.css({
443 | transform: 'translateZ(-' + tz + 'px)',
444 | transformStyle: 'preserve-3d'
445 | });
446 | };
447 |
448 | // Execution steps
449 | this.execute = function () {
450 | that.RS.$slider.css({
451 | transition: 'all ' + that.RS.settings.transitionDuration + 'ms ease-in-out',
452 | transform: 'translateZ(-' + tz + 'px) rotateX('+ wrx +'deg) rotateY('+ wry +'deg)'
453 | });
454 | };
455 |
456 | this.before($.proxy(this.execute, this));
457 | }
458 |
459 | ,cubeH: function () {
460 | // Set to half of slide width
461 | var dimension = $(this.RS.$slides).width() / 2;
462 |
463 | // If next slide is ahead in array
464 | if (this.forward) {
465 | this.cube(dimension, dimension, 0, 0, 90, 0, -90);
466 | } else {
467 | this.cube(dimension, -dimension, 0, 0, -90, 0, 90);
468 | }
469 | }
470 |
471 | ,cubeV: function () {
472 | // Set to half of slide height
473 | var dimension = $(this.RS.$slides).height() / 2;
474 |
475 | // If next slide is ahead in array
476 | if (this.forward) {
477 | this.cube(dimension, 0, -dimension, 90, 0, -90, 0);
478 | } else {
479 | this.cube(dimension, 0, dimension, -90, 0, 90, 0);
480 | }
481 | }
482 |
483 | // grid() method is used by many transitions - not for calling directly
484 | // Grid calculations are based on those in the awesome flux slider (joelambert.co.uk/flux)
485 | ,grid: function (cols, rows, ro, tx, ty, sc, op) { // Args: columns, rows, rotate, translateX, translateY, scale, opacity
486 | // Fallback if browser does not support CSS transitions
487 | if (!this.RS.cssTransitions) {
488 | return this[this['fallback']]();
489 | }
490 |
491 | var that = this;
492 |
493 | // Setup steps
494 | this.setup = function () {
495 | // The time (in ms) added to/subtracted from the delay total for each new gridlet
496 | var count = (that.RS.settings.transitionDuration) / (cols + rows);
497 |
498 | // Gridlet creator (divisions of the image grid, positioned with background-images to replicate the look of an entire slide image when assembled)
499 | function gridlet(width, height, top, left, src, imgWidth, imgHeight, c, r) {
500 | var delay = (c + r) * count;
501 |
502 | // Return a gridlet elem with styles for specific transition
503 | return $('').css({
504 | width : width,
505 | height : height,
506 | top : top,
507 | left : left,
508 | backgroundImage : 'url(' + src + ')',
509 | backgroundPosition : '-' + left + 'px -' + top + 'px',
510 | backgroundSize : imgWidth + 'px ' + imgHeight + 'px',
511 | transition : 'all ' + that.RS.settings.transitionDuration + 'ms ease-in-out ' + delay + 'ms',
512 | transform : 'none'
513 | });
514 | }
515 |
516 | // Get the next slide's image
517 | that.$img = that.RS.$currentSlide.find('img.rs-slide-image');
518 |
519 | // Create a grid to hold the gridlets
520 | that.$grid = $('').addClass('rs-grid');
521 |
522 | // Prepend the grid to the next slide (i.e. so it's above the slide image)
523 | that.RS.$currentSlide.prepend(that.$grid);
524 |
525 | // vars to calculate positioning/size of gridlets
526 | var imgWidth = that.$img.width(),
527 | imgHeight = that.$img.height(),
528 | imgSrc = that.$img.attr('src'),
529 | colWidth = Math.floor(imgWidth / cols),
530 | rowHeight = Math.floor(imgHeight / rows),
531 | colRemainder = imgWidth - (cols * colWidth),
532 | colAdd = Math.ceil(colRemainder / cols),
533 | rowRemainder = imgHeight - (rows * rowHeight),
534 | rowAdd = Math.ceil(rowRemainder / rows),
535 | leftDist = 0;
536 |
537 | // tx/ty args can be passed as 'auto'/'min-auto' (meaning use slide width/height or negative slide width/height)
538 | tx = tx === 'auto' ? imgWidth : tx;
539 | tx = tx === 'min-auto' ? - imgWidth : tx;
540 | ty = ty === 'auto' ? imgHeight : ty;
541 | ty = ty === 'min-auto' ? - imgHeight : ty;
542 |
543 | // Loop through cols
544 | for (var i = 0; i < cols; i++) {
545 | var topDist = 0,
546 | newColWidth = colWidth;
547 |
548 | // If imgWidth (px) does not divide cleanly into the specified number of cols, adjust individual col widths to create correct total
549 | if (colRemainder > 0) {
550 | var add = colRemainder >= colAdd ? colAdd : colRemainder;
551 | newColWidth += add;
552 | colRemainder -= add;
553 | }
554 |
555 | // Nested loop to create row gridlets for each col
556 | for (var j = 0; j < rows; j++) {
557 | var newRowHeight = rowHeight,
558 | newRowRemainder = rowRemainder;
559 |
560 | // If imgHeight (px) does not divide cleanly into the specified number of rows, adjust individual row heights to create correct total
561 | if (newRowRemainder > 0) {
562 | add = newRowRemainder >= rowAdd ? rowAdd : rowRemainder;
563 | newRowHeight += add;
564 | newRowRemainder -= add;
565 | }
566 |
567 | // Create & append gridlet to grid
568 | that.$grid.append(gridlet(newColWidth, newRowHeight, topDist, leftDist, imgSrc, imgWidth, imgHeight, i, j));
569 |
570 | topDist += newRowHeight;
571 | }
572 |
573 | leftDist += newColWidth;
574 | }
575 |
576 | // Set event listener on last gridlet to finish transitioning
577 | that.listenTo = that.$grid.children().last();
578 |
579 | // Show grid & hide the image it replaces
580 | that.$grid.show();
581 | that.$img.css('opacity', 0);
582 |
583 | // Add identifying classes to corner gridlets (useful if applying border radius)
584 | that.$grid.children().first().addClass('rs-top-left');
585 | that.$grid.children().last().addClass('rs-bottom-right');
586 | that.$grid.children().eq(rows - 1).addClass('rs-bottom-left');
587 | that.$grid.children().eq(- rows).addClass('rs-top-right');
588 | };
589 |
590 | // Execution steps
591 | this.execute = function () {
592 | that.$grid.children().css({
593 | opacity: op,
594 | transform: 'rotate('+ ro +'deg) translateX('+ tx +'px) translateY('+ ty +'px) scale('+ sc +')'
595 | });
596 | };
597 |
598 | this.before($.proxy(this.execute, this));
599 |
600 | // Reset steps
601 | this.reset = function () {
602 | that.$img.css('opacity', 1);
603 | that.$grid.remove();
604 | }
605 | }
606 |
607 | ,sliceH: function () {
608 | this.grid(1, 8, 0, 'min-auto', 0, 1, 0);
609 | }
610 |
611 | ,sliceV: function () {
612 | this.grid(10, 1, 0, 0, 'auto', 1, 0);
613 | }
614 |
615 | ,slideV: function () {
616 | var dir = this.forward ?
617 | 'min-auto' :
618 | 'auto';
619 |
620 | this.grid(1, 1, 0, 0, dir, 1, 1);
621 | }
622 |
623 | ,slideH: function () {
624 | var dir = this.forward ?
625 | 'min-auto' :
626 | 'auto';
627 |
628 | this.grid(1, 1, 0, dir, 0, 1, 1);
629 | }
630 |
631 | ,scale: function () {
632 | this.grid(1, 1, 0, 0, 0, 1.5, 0);
633 | }
634 |
635 | ,blockScale: function () {
636 | this.grid(8, 6, 0, 0, 0, .6, 0);
637 | }
638 |
639 | ,kaleidoscope: function () {
640 | this.grid(10, 8, 0, 0, 0, 1, 0);
641 | }
642 |
643 | ,fan: function () {
644 | this.grid(1, 10, 45, 100, 0, 1, 0);
645 | }
646 |
647 | ,blindV: function () {
648 | this.grid(1, 8, 0, 0, 0, .7, 0);
649 | }
650 |
651 | ,blindH: function () {
652 | this.grid(10, 1, 0, 0, 0, .7, 0);
653 | }
654 |
655 | ,random: function () {
656 | // Pick a random transition from the anims array (obj prop)
657 | this[this.anims[Math.floor(Math.random() * this.anims.length)]]();
658 | }
659 |
660 | ,custom: function() {
661 | if (this.RS.nextAnimIndex < 0) {
662 | this.RS.nextAnimIndex = this.customAnims.length - 1;
663 | }
664 | if (this.RS.nextAnimIndex === this.customAnims.length) {
665 | this.RS.nextAnimIndex = 0;
666 | }
667 |
668 | // Pick the next item in the list of transitions provided by user.
669 | this[this.customAnims[this.RS.nextAnimIndex]]();
670 | }
671 | };
672 |
673 | // Obj to check browser capabilities
674 | var testBrowser = {
675 | // Browser vendor CSS prefixes
676 | browserVendors: ['', '-webkit-', '-moz-', '-ms-', '-o-', '-khtml-']
677 |
678 | // Browser vendor DOM prefixes
679 | ,domPrefixes: ['', 'Webkit', 'Moz', 'ms', 'O', 'Khtml']
680 |
681 | // Method to iterate over a property (using all DOM prefixes)
682 | // Returns true if prop is recognised by browser (else returns false)
683 | ,testDom: function (prop) {
684 | var i = this.domPrefixes.length;
685 |
686 | while (i--) {
687 | if (typeof document.body.style[this.domPrefixes[i] + prop] !== 'undefined') {
688 | return true;
689 | }
690 | }
691 |
692 | return false;
693 | }
694 |
695 | ,cssTransitions: function () {
696 | // Use Modernizr if available & implements csstransitions test
697 | if (typeof window.Modernizr !== 'undefined' && Modernizr.csstransitions !== 'undefined') {
698 | return Modernizr.csstransitions;
699 | }
700 |
701 | // Use testDom method to check prop (returns bool)
702 | return this.testDom('Transition');
703 | }
704 |
705 | ,cssTransforms3d: function () {
706 | // Use Modernizr if available & implements csstransforms3d test
707 | if (typeof window.Modernizr !== 'undefined' && Modernizr.csstransforms3d !== 'undefined') {
708 | return Modernizr.csstransforms3d;
709 | }
710 |
711 | // Check for vendor-less prop
712 | if (typeof document.body.style['perspectiveProperty'] !== 'undefined') {
713 | return true;
714 | }
715 |
716 | // Use testDom method to check prop (returns bool)
717 | return this.testDom('Perspective');
718 | }
719 | };
720 |
721 | // jQuery plugin wrapper
722 | $.fn['refineSlide'] = function (settings) {
723 | return this.each(function () {
724 | // Check if already instantiated on this elem
725 | if (!$.data(this, 'refineSlide')) {
726 | // Instantiate & store elem + string
727 | $.data(this, 'refineSlide', new RS(this, settings));
728 | }
729 | });
730 | }
731 | })(window.jQuery, window, window.document);
732 |
--------------------------------------------------------------------------------