├── js
├── common.js
├── html5shiv.js
├── jquery.scrollTo.js
└── cycle.js
├── img
├── bg.jpg
├── bg1.png
├── map.jpg
├── facebook.jpg
├── icons
│ ├── in.png
│ ├── bullet.png
│ ├── date.png
│ ├── logo.png
│ ├── phone.png
│ ├── vote.png
│ ├── addpost.png
│ ├── codedby.png
│ ├── comments.png
│ ├── location.png
│ ├── coderiver.png
│ ├── social__fb.png
│ ├── social__in.png
│ ├── social__ok.png
│ ├── social__vk.png
│ ├── location_blue.png
│ ├── location_red.png
│ ├── location_green.png
│ ├── vote__comments.png
│ └── topline__location.png
└── icons-s8c356d3a85.png
├── sass
├── screen.sass
├── _layouts.sass
├── lib
│ ├── _base.scss
│ ├── ceaser-easing
│ │ ├── _ceaser.sass
│ │ ├── _easing-vars.sass
│ │ ├── _ease-types.sass
│ │ └── _easing-functions.sass
│ ├── _sprites.scss
│ ├── _demo.scss
│ ├── _keyframes.sass
│ ├── _animations.scss
│ ├── _mixins.sass
│ └── _media.scss
├── _styledocco.sass
├── _reset.sass
├── _common.sass
├── _main.sass
└── _content.sass
├── README.md
├── config.rb
├── css
└── screen.css
└── index.html
/js/common.js:
--------------------------------------------------------------------------------
1 | $(document).ready(function() {
2 |
3 | });
--------------------------------------------------------------------------------
/img/bg.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/bg.jpg
--------------------------------------------------------------------------------
/img/bg1.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/bg1.png
--------------------------------------------------------------------------------
/img/map.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/map.jpg
--------------------------------------------------------------------------------
/img/facebook.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/facebook.jpg
--------------------------------------------------------------------------------
/img/icons/in.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/in.png
--------------------------------------------------------------------------------
/img/icons/bullet.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/bullet.png
--------------------------------------------------------------------------------
/img/icons/date.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/date.png
--------------------------------------------------------------------------------
/img/icons/logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/logo.png
--------------------------------------------------------------------------------
/img/icons/phone.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/phone.png
--------------------------------------------------------------------------------
/img/icons/vote.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/vote.png
--------------------------------------------------------------------------------
/img/icons/addpost.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/addpost.png
--------------------------------------------------------------------------------
/img/icons/codedby.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/codedby.png
--------------------------------------------------------------------------------
/img/icons/comments.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/comments.png
--------------------------------------------------------------------------------
/img/icons/location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location.png
--------------------------------------------------------------------------------
/img/icons-s8c356d3a85.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons-s8c356d3a85.png
--------------------------------------------------------------------------------
/img/icons/coderiver.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/coderiver.png
--------------------------------------------------------------------------------
/img/icons/social__fb.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__fb.png
--------------------------------------------------------------------------------
/img/icons/social__in.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__in.png
--------------------------------------------------------------------------------
/img/icons/social__ok.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__ok.png
--------------------------------------------------------------------------------
/img/icons/social__vk.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/social__vk.png
--------------------------------------------------------------------------------
/img/icons/location_blue.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_blue.png
--------------------------------------------------------------------------------
/img/icons/location_red.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_red.png
--------------------------------------------------------------------------------
/img/icons/location_green.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/location_green.png
--------------------------------------------------------------------------------
/img/icons/vote__comments.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/vote__comments.png
--------------------------------------------------------------------------------
/img/icons/topline__location.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/akella/screencast/HEAD/img/icons/topline__location.png
--------------------------------------------------------------------------------
/sass/screen.sass:
--------------------------------------------------------------------------------
1 | @import lib/base
2 | @import reset
3 | @import common
4 |
5 | @import layouts
6 | @import main
7 | @import content
8 |
--------------------------------------------------------------------------------
/sass/_layouts.sass:
--------------------------------------------------------------------------------
1 | // default layout
2 | .l
3 | +clr
4 | @extend %in
5 | .l-col1
6 | float: left
7 | width: 620px
8 | .l-col11
9 | float: left
10 | width: 300px
11 | .l-col12
12 | float: right
13 | width: 300px
14 | .l-col2
15 | float: right
16 | width: 300px
17 |
18 |
--------------------------------------------------------------------------------
/sass/lib/_base.scss:
--------------------------------------------------------------------------------
1 | // this one just agregates all the libs
2 | @import "compass/css3";
3 | @import "mixins";
4 | @import "animations";
5 | @import "keyframes";
6 | @import "media";
7 | @import "ceaser-easing/ceaser";
8 | @import "sprites";
9 |
10 | // gradients for ie, turn it off to disable svg base64
11 | //$experimental-support-for-svg: true;
12 |
--------------------------------------------------------------------------------
/sass/lib/ceaser-easing/_ceaser.sass:
--------------------------------------------------------------------------------
1 | @import "compass/css3/transition"
2 | @import "ease-types"
3 | @import "easing-vars"
4 |
5 | $ceaser-legacy: false !default
6 |
7 | @function ceaser($type: $ease)
8 | @if $ceaser-legacy
9 | $easingValue: returnEaseType($type)
10 | @return cubic-bezier(unquote($easingValue))
11 | @else
12 | @return cubic-bezier(unquote($type))
13 |
14 | @mixin ceaser-transition($type: $ease, $properties: all, $duration: 500ms, $delay: 0ms)
15 | @if $ceaser-legacy
16 | $easingValue : returnEaseType($type)
17 | @include transition($properties $duration cubic-bezier(unquote($easingValue)) $delay)
18 | @else
19 | @include transition($properties $duration cubic-bezier(unquote($type)) $delay)
20 |
21 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | Sass Boilerplate for generic CSS/HTML
2 | =============
3 | Done by akella with kind help of Coderiver guys.
4 |
5 | I'm using this as a starting template for almost any project now.
6 | It includes sprites, assorted mixins (aka code snippets), file structure, jquery+cycle+scrollto (most usable these days).
7 | And, that's it.
8 |
9 | You need to have Compass installed for it to work properly.
10 |
11 | Structure
12 | =============
13 | `/sass/lib/base` - all the mixins and libs needed for us.
14 |
15 | `/sass/screen.sass` - agregates all .sass files.
16 |
17 | `/sass/main.sass` - styles for the mainpage.
18 |
19 | Naming blocks
20 | =============
21 | I use BEM naming, meaning `.block` for independent block. `.block__element` for elements inside that block. And `.block_modification` for modification of the block.
22 |
23 | `layouts.sass` consists of all the columns-header-footer stuff, all with `.l-*` prefixes. So you know its layout.
24 |
25 | States of the blocks use prefix `.is-*`. For example `.is-running`, `.is-hidden`, `.is-open`.
26 |
27 | Hooks for js should use prefix `.js-*`.
28 |
--------------------------------------------------------------------------------
/sass/lib/_sprites.scss:
--------------------------------------------------------------------------------
1 | // sprites with padding
2 | $icons: sprite-map("icons/*.png", $spacing: 10px);
3 |
4 | // sized sprites
5 | @mixin image-size($path){
6 | width: image-width($path);
7 | height: image-height($path);
8 | }
9 | @mixin sized-sprite($map, $sprite){
10 | background: sprite($map, $sprite) no-repeat;
11 | @include image-size(sprite-file($map, $sprite));
12 | }
13 | //shortcut
14 | @mixin s($sprite, $map: $icons){
15 | background: sprite($map, $sprite) no-repeat;
16 | //background-image: inline-image('icons/'+$sprite+'.png','image/png'); to switches sprites to base64, elegant
17 | @include image-size(sprite-file($map, $sprite));
18 | }
19 | //only image, when dimensions are useless
20 | @mixin si($sprite, $map: $icons){
21 | background: sprite($map, $sprite) no-repeat;
22 | }
23 | // insert svg
24 | @mixin svg($name, $width, $height){
25 | background: url('../img/svg/#{$name}.svg') no-repeat 0 0;
26 | @include background-size(#{$width}px #{$height}px);
27 | // background-image: inline-image('svg/#{$name}.svg','image/svg');
28 | width: #{$width}px;
29 | height: #{$height}px;
30 | display: inline-block;
31 | }
--------------------------------------------------------------------------------
/sass/_styledocco.sass:
--------------------------------------------------------------------------------
1 | // Styledocco example of commenting blocks, should be removed or renamed
2 |
3 | // Button (documenting example)
4 | // ====
5 | // small button
6 |
7 | // button
8 | .button
9 | padding: 9px 14px
10 | font-size: 12px
11 | line-height: normal
12 | border-radius: 5px
13 | display: inline-block
14 |
15 | // big button example
16 |
17 | // button
18 | .button_large
19 | font-size: 30px
20 |
21 | // Green button example
22 | // ====
23 | //small greenbutton example
24 |
25 | //
button
26 | .greenbutton
27 | padding: 9px 14px
28 | font-size: 12px
29 | line-height: normal
30 | border-radius: 5px
31 | background: green
32 | color: #fff
33 | text-shadow: 0 -1px 0 #000
34 | display: inline-block
35 | i
36 | width: 10px
37 | height: 10px
38 | background: pink
39 | display: inline-block
40 | margin-right: 10px
41 |
42 | // big button example
43 |
44 | //
greenbutton
45 | .greenbutton_large
46 | font-size: 30px
47 |
--------------------------------------------------------------------------------
/sass/_reset.sass:
--------------------------------------------------------------------------------
1 | html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5,
2 | h6, p, blockquote, pre,a, abbr, acronym, address, big,
3 | cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small,
4 | strike, strong, sub, sup, tt, var,b, u, i, center,dl, dt,
5 | dd, ol, ul, li,fieldset, form, label, legend,table, caption,
6 | tbody, tfoot, thead, tr, th, td,article, aside, canvas, details,
7 | embed, figure, figcaption, footer, header, hgroup, menu, nav,
8 | output, ruby, section, summary,time, mark, audio, video
9 | margin: 0
10 | padding: 0
11 | border: 0
12 | vertical-align: baseline
13 | body, html
14 | height: 100%
15 | img,fieldset, a img
16 | border: none
17 | input[type="submit"],
18 | button
19 | cursor: pointer
20 | &::-moz-focus-inner
21 | padding: 0
22 | border: 0
23 | textarea
24 | overflow: auto
25 | input, button
26 | margin: 0
27 | padding: 0
28 | border: 0
29 | input, textarea, select,button,
30 | h1,h2,h3,h4,h5,h6,a,span,a:focus
31 | outline: none
32 | ul,ol
33 | list-style-type: none
34 | +iphone
35 | *
36 | -webkit-text-size-adjust: none
37 | table
38 | border-spacing: 0
39 | border-collapse: collapse
40 | width: 100%
41 |
--------------------------------------------------------------------------------
/sass/lib/_demo.scss:
--------------------------------------------------------------------------------
1 | @import "compass/css3", "_animations";
2 |
3 | $experimental-support-for-khtml: false;
4 |
5 | @include keyframes(anim-1) {
6 | from {
7 | margin-left: 100px;
8 | }
9 |
10 | 50% {
11 | margin-left: 200px;
12 | }
13 |
14 | to {
15 | margin-left: 100px;
16 | }
17 | }
18 |
19 |
20 | @include keyframes(anim-2) {
21 | from {
22 | @include rotateZ(-30deg);
23 | }
24 |
25 | 50% {
26 | @include rotateZ(30deg);
27 | }
28 |
29 | to {
30 | @include rotateZ(-30deg);
31 | }
32 | }
33 |
34 | div {
35 | margin-top: 80px;
36 | margin-left: 150px;
37 | padding: 10px;
38 | width: 200px;
39 | font-size: 24px;
40 | text-align: center;
41 | background: #DDD;
42 | }
43 |
44 | // Single shortcut way
45 | #demo-1 {
46 | @include animation(anim-1 2s linear infinite);
47 | }
48 |
49 | #demo-2 {
50 | @include animation(anim-2 2s linear infinite);
51 | }
52 |
53 | // Multiple shortcut way
54 | #demo-3 {
55 | @include animation(anim-1 1s ease infinite, anim-2 2s linear infinite);
56 | }
57 |
58 | #demo-4 {
59 | @include animation-simple(
60 | $name: anim-2,
61 | $duration: 10s,
62 | $iteration-count: infinite
63 | );
64 | }
65 |
66 |
--------------------------------------------------------------------------------
/sass/_common.sass:
--------------------------------------------------------------------------------
1 | // # SHORT HOWTO
2 | // ## Sprites
3 | // .whatever
4 | // +sized-sprite($icons, coderiver) //or
5 | // +s(codedby) //gets default value for spritemap as $icons
6 | // ### animation example
7 | // +include keyframes(rotate)
8 | // from
9 | // +rotate(0)
10 | // to
11 | // +rotate(360)
12 | // ## animation usage
13 | // body:hover
14 | // +animation(rotate 200s linear infinite)
15 | // ## animations easing, see easings.net for full list and examples, tnx @ai
16 | // transition: all 1.2s ceaser($ease-in)
17 | // ## gradient example
18 | // +background-image(linear-gradient(#232323, #5c5c5c));
19 | // +g(#232323, #5c5c5c);
20 | // horizontal
21 | // +gh(#232323, #5c5c5c);
22 | // ## making bw-images
23 | // img
24 | // @extend %gray
25 | // ## predefined media-queries: https://github.com/paranoida/sass-mediaqueries
26 | // +min-screen(320)
27 | // display: none
28 | // +max-screen(1000), +iphone5, +iphone4, +ipad-retina, +ipad, +hdpi - also available
29 | //
30 | // ## use cycles
31 | // @for $i from 1 through 3
32 | // .item-#{$i}
33 | // width: 2em * $i;
34 | // @each $s in a,b,c
35 | // #{$s}
36 | // display: none
37 | // ## fonts
38 | // Save fonts to /css/fonts, after that write (eot, woff, ttf):
39 | // +font(book, cytiapro-black-webfont)
40 | // =book
41 | // font-family: "book",arial,sans-serif
42 |
43 | body
44 | font:
45 | family: "Myriad Pro",Arial,sans-serif
46 | weight: normal
47 | size: 12px
48 | line-height: 1.4
49 | background: url(../img/bg.jpg) repeat 50% 0
50 | .out
51 | background: url(../img/bg1.png) no-repeat 50% 0
52 | a
53 | color: #3885AF
54 | // common blocks
--------------------------------------------------------------------------------
/sass/lib/ceaser-easing/_easing-vars.sass:
--------------------------------------------------------------------------------
1 | $linear : "0.250, 0.250, 0.750, 0.750" !default
2 | $ease : "0.250, 0.100, 0.250, 1.000"
3 | $ease-in : "0.420, 0.000, 1.000, 1.000" !default
4 | $ease-out : "0.000, 0.000, 0.580, 1.000" !default
5 | $ease-in-out : "0.420, 0.000, 0.580, 1.000" !default
6 |
7 | $easeInQuad : "0.550, 0.085, 0.680, 0.530" !default
8 | $easeInCubic : "0.550, 0.055, 0.675, 0.190" !default
9 | $easeInQuart : "0.895, 0.030, 0.685, 0.220" !default
10 | $easeInQuint : "0.755, 0.050, 0.855, 0.060" !default
11 | $easeInSine : "0.470, 0.000, 0.745, 0.715" !default
12 | $easeInExpo : "0.950, 0.050, 0.795, 0.035" !default
13 | $easeInCirc : "0.600, 0.040, 0.980, 0.335" !default
14 | $easeInBack : "0.600, -0.280, 0.735, 0.045" !default
15 |
16 | $easeOutQuad : "0.250, 0.460, 0.450, 0.940" !default
17 | $easeOutCubic : "0.215, 0.610, 0.355, 1.000" !default
18 | $easeOutQuart : "0.165, 0.840, 0.440, 1.000" !default
19 | $easeOutQuint : "0.230, 1.000, 0.320, 1.000" !default
20 | $easeOutSine : "0.390, 0.575, 0.565, 1.000" !default
21 | $easeOutExpo : "0.190, 1.000, 0.220, 1.000" !default
22 | $easeOutCirc : "0.075, 0.820, 0.165, 1.000" !default
23 | $easeOutBack : "0.175, 0.885, 0.320, 1.275" !default
24 |
25 | $easeInOutQuad : "0.455, 0.030, 0.515, 0.955" !default
26 | $easeInOutCubic : "0.645, 0.045, 0.355, 1.000" !default
27 | $easeInOutQuart : "0.770, 0.000, 0.175, 1.000" !default
28 | $easeInOutQuint : "0.860, 0.000, 0.070, 1.000" !default
29 | $easeInOutSine : "0.445, 0.050, 0.550, 0.950" !default
30 | $easeInOutExpo : "1.000, 0.000, 0.000, 1.000" !default
31 | $easeInOutCirc : "0.785, 0.135, 0.150, 0.860" !default
32 | $easeInOutBack : "0.680, -0.550, 0.265, 1.550" !default
--------------------------------------------------------------------------------
/config.rb:
--------------------------------------------------------------------------------
1 | # Require any additional compass plugins here.
2 |
3 | # Set this to the root of your project when deployed:
4 | http_path = "/"
5 | css_dir = "css"
6 | sass_dir = "sass"
7 | images_dir = "img"
8 | javascripts_dir = "js"
9 |
10 |
11 | # You can select your preferred output style here (can be overridden via the command line):
12 | # output_style = :expanded or :nested or :compact or :compressed
13 | output_style = :compact
14 |
15 | # To enable relative paths to assets via compass helper functions. Uncomment:
16 | relative_assets = true
17 |
18 | # To disable debugging comments that display the original location of your selectors. Uncomment:
19 | line_comments = false
20 |
21 | preferred_syntax = :sass
22 |
23 |
24 | # ===================
25 | # Uncomment this part to make sprite name static, icons-123asda.png -> icons.png
26 | # useful for diffs in screen.css
27 | # ===================
28 | # # Make a copy of sprites with a name that has no uniqueness of the hash.
29 | # on_sprite_saved do |filename|
30 | # if File.exists?(filename)
31 | # FileUtils.cp filename, filename.gsub(%r{-s[a-z0-9]{10}\.png$}, '.png')
32 | # end
33 | # end
34 | # # Replace in stylesheets generated references to sprites
35 | # # by their counterparts without the hash uniqueness.
36 | # on_stylesheet_saved do |filename|
37 | # if File.exists?(filename)
38 | # css = File.read filename
39 | # File.open(filename, 'w+') do |f|
40 | # f << css.gsub(%r{-s[a-z0-9]{10}\.png}, '.png')
41 | # end
42 | # end
43 | # end
44 |
45 | # # this one for switching between production and dev versions of the website
46 | # module Sass::Script::Functions
47 | # def image_path(string)
48 | # assert_type string, :String
49 | # Sass::Script::String.new("../img/#{string.value}")
50 | # end
51 | # alias_method :"image-path",:image_path
52 | # declare :"image-path", :args => [:string]
53 | # end
--------------------------------------------------------------------------------
/js/html5shiv.js:
--------------------------------------------------------------------------------
1 | /*
2 | HTML5 Shiv v3.6.2pre | @afarkas @jdalton @jon_neal @rem | MIT/GPL2 Licensed
3 | */
4 | (function(l,f){function m(){var a=e.elements;return"string"==typeof a?a.split(" "):a}function i(a){var b=n[a[o]];b||(b={},h++,a[o]=h,n[h]=b);return b}function p(a,b,c){b||(b=f);if(g)return b.createElement(a);c||(c=i(b));b=c.cache[a]?c.cache[a].cloneNode():r.test(a)?(c.cache[a]=c.createElem(a)).cloneNode():c.createElem(a);return b.canHaveChildren&&!s.test(a)?c.frag.appendChild(b):b}function t(a,b){if(!b.cache)b.cache={},b.createElem=a.createElement,b.createFrag=a.createDocumentFragment,b.frag=b.createFrag();
5 | a.createElement=function(c){return!e.shivMethods?b.createElem(c):p(c,a,b)};a.createDocumentFragment=Function("h,f","return function(){var n=f.cloneNode(),c=n.createElement;h.shivMethods&&("+m().join().replace(/\w+/g,function(a){b.createElem(a);b.frag.createElement(a);return'c("'+a+'")'})+");return n}")(e,b.frag)}function q(a){a||(a=f);var b=i(a);if(e.shivCSS&&!j&&!b.hasCSS){var c,d=a;c=d.createElement("p");d=d.getElementsByTagName("head")[0]||d.documentElement;c.innerHTML="x";
6 | c=d.insertBefore(c.lastChild,d.firstChild);b.hasCSS=!!c}g||t(a,b);return a}var k=l.html5||{},s=/^<|^(?:button|map|select|textarea|object|iframe|option|optgroup)$/i,r=/^(?:a|b|code|div|fieldset|h1|h2|h3|h4|h5|h6|i|label|li|ol|p|q|span|strong|style|table|tbody|td|th|tr|ul)$/i,j,o="_html5shiv",h=0,n={},g;(function(){try{var a=f.createElement("a");a.innerHTML="
";j="hidden"in a;var b;if(!(b=1==a.childNodes.length)){f.createElement("a");var c=f.createDocumentFragment();b="undefined"==typeof c.cloneNode||
7 | "undefined"==typeof c.createDocumentFragment||"undefined"==typeof c.createElement}g=b}catch(d){g=j=!0}})();var e={elements:k.elements||"abbr article aside audio bdi canvas data datalist details figcaption figure footer header hgroup mark meter nav output progress section summary time video",version:"3.6.2pre",shivCSS:!1!==k.shivCSS,supportsUnknownElements:g,shivMethods:!1!==k.shivMethods,type:"default",shivDocument:q,createElement:p,createDocumentFragment:function(a,b){a||(a=f);if(g)return a.createDocumentFragment();
8 | for(var b=b||i(a),c=b.frag.cloneNode(),d=0,e=m(),h=e.length;d
#grayscale")
113 | // Firefox 10+
114 | filter: gray
115 | // IE6-9
116 | -webkit-filter: grayscale(100%)
117 | // Chrome 19+ & Safari 6+
118 | filter: progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)
119 | -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(grayScale=1)"
120 |
121 | =gray-half
122 | filter: url("data:image/svg+xml;utf8, #grayscale")
123 | // Firefox 10+
124 | filter: gray alpha(opacity = 50)
125 | // IE6-9
126 | -webkit-filter: grayscale(50%)
127 | // Chrome 19+ & Safari 6+
128 |
129 | =gray-zero
130 | filter: url("data:image/svg+xml;utf8, #grayscale")
131 | -webkit-filter: grayscale(0%)
132 |
133 | =unselectable
134 | -webkit-touch-callout: none
135 | -webkit-user-select: none
136 | -khtml-user-select: none
137 | -moz-user-select: none
138 | -ms-user-select: none
139 | user-select: none
140 |
141 | =nosel
142 | +unselectable
143 |
144 | =prevent-text
145 | -ms-word-break: break-all
146 | word-break: break-all
147 | word-break: break-word
148 | -webkit-hyphens: auto
149 | -moz-hyphens: auto
150 | hyphens: auto
151 |
152 | =font-smoothing($val: antialiased)
153 | -webkit-font-smoothing: $val
154 | -moz-font-smoothing: $val
155 | -ms-font-smoothing: $val
156 | -o-font-smoothing: $val
157 |
158 | =selection
159 | & ::selection
160 | @content
161 | & ::-moz-selection
162 | @content
163 |
164 | =sel
165 | +selection
166 |
167 | =gpu
168 | +transform(translate3d(0, 0, 0))
169 |
170 | =smooth-triangle
171 | -webkit-transform: rotate(0.05deg)
172 | -moz-transform: scale(1.1)
173 | -o-transform: rotate(0.05deg)
174 | transform: rotate(0.05deg)
175 |
176 | =scrollbar
177 | & ::-moz-scrollbar
178 | @content
179 | & ::-webkit-scrollbar
180 | @content
181 | & ::scrollbar
182 | @content
183 |
184 | =scrollbar-track
185 | & ::-moz-scrollbar-track
186 | @content
187 | & ::-webkit-scrollbar-track
188 | @content
189 | & ::scrollbar-track
190 | @content
191 |
192 | =scrollbar-thumb
193 | & ::-moz-scrollbar-thumb
194 | @content
195 | & ::-webkit-scrollbar-thumb
196 | @content
197 | & ::scrollbar-thumb
198 | @content
199 |
200 | =scrollbar-track-piece
201 | & ::-moz-scrollbar-track-piece
202 | @content
203 | & ::-webkit-scrollbar-track-piece
204 | @content
205 | & ::scrollbar-track-piece
206 | @content
207 |
208 | //triangle
209 | =arr($width, $height, $bg, $direction)
210 | width: 0px
211 | height: 0px
212 | border-style: solid
213 | @if $direction == t
214 | border-width: 0 $width / 2 + px $height + px $width / 2 + px
215 | border-color: transparent transparent $bg transparent
216 | @if $direction == r
217 | border-width: $height / 2 + px 0 $height / 2 + px $width + px
218 | border-color: transparent transparent transparent $bg
219 | @if $direction == b
220 | border-width: $height + px $width / 2 + px 0 $width / 2 + px
221 | border-color: $bg transparent transparent transparent
222 | @if $direction == l
223 | border-width: $height / 2 + px $width + px $height / 2 + px 0
224 | border-color: transparent $bg transparent transparent
225 | @if $direction == tl
226 | border-width: $height + px $width + px 0 0
227 | border-color: $bg transparent transparent transparent
228 | @if $direction == tr
229 | border-width: 0 $width + px $height + px 0
230 | border-color: transparent $bg transparent transparent
231 | @if $direction == br
232 | border-width: 0 0 $height + px $width + px
233 | border-color: transparent transparent $bg transparent
234 | @if $direction == bl
235 | border-width: $width + px 0 0 $height + px
236 | border-color: transparent transparent transparent $bg
237 |
238 | // example
239 | // +arr(500,50, #000, l)
240 | // +arr(500,50, #000, bl)
241 |
--------------------------------------------------------------------------------
/js/jquery.scrollTo.js:
--------------------------------------------------------------------------------
1 | /**
2 | * jQuery.ScrollTo
3 | * Copyright (c) 2007-2009 Ariel Flesler - aflesler(at)gmail(dot)com | http://flesler.blogspot.com
4 | * Dual licensed under MIT and GPL.
5 | * Date: 5/25/2009
6 | *
7 | * @projectDescription Easy element scrolling using jQuery.
8 | * http://flesler.blogspot.com/2007/10/jqueryscrollto.html
9 | * Works with jQuery +1.2.6. Tested on FF 2/3, IE 6/7/8, Opera 9.5/6, Safari 3, Chrome 1 on WinXP.
10 | *
11 | * @author Ariel Flesler
12 | * @version 1.4.2
13 | *
14 | * @id jQuery.scrollTo
15 | * @id jQuery.fn.scrollTo
16 | * @param {String, Number, DOMElement, jQuery, Object} target Where to scroll the matched elements.
17 | * The different options for target are:
18 | * - A number position (will be applied to all axes).
19 | * - A string position ('44', '100px', '+=90', etc ) will be applied to all axes
20 | * - A jQuery/DOM element ( logically, child of the element to scroll )
21 | * - A string selector, that will be relative to the element to scroll ( 'li:eq(2)', etc )
22 | * - A hash { top:x, left:y }, x and y can be any kind of number/string like above.
23 | * - A percentage of the container's dimension/s, for example: 50% to go to the middle.
24 | * - The string 'max' for go-to-end.
25 | * @param {Number} duration The OVERALL length of the animation, this argument can be the settings object instead.
26 | * @param {Object,Function} settings Optional set of settings or the onAfter callback.
27 | * @option {String} axis Which axis must be scrolled, use 'x', 'y', 'xy' or 'yx'.
28 | * @option {Number} duration The OVERALL length of the animation.
29 | * @option {String} easing The easing method for the animation.
30 | * @option {Boolean} margin If true, the margin of the target element will be deducted from the final position.
31 | * @option {Object, Number} offset Add/deduct from the end position. One number for both axes or { top:x, left:y }.
32 | * @option {Object, Number} over Add/deduct the height/width multiplied by 'over', can be { top:x, left:y } when using both axes.
33 | * @option {Boolean} queue If true, and both axis are given, the 2nd axis will only be animated after the first one ends.
34 | * @option {Function} onAfter Function to be called after the scrolling ends.
35 | * @option {Function} onAfterFirst If queuing is activated, this function will be called after the first scrolling ends.
36 | * @return {jQuery} Returns the same jQuery object, for chaining.
37 | *
38 | * @desc Scroll to a fixed position
39 | * @example $('div').scrollTo( 340 );
40 | *
41 | * @desc Scroll relatively to the actual position
42 | * @example $('div').scrollTo( '+=340px', { axis:'y' } );
43 | *
44 | * @dec Scroll using a selector (relative to the scrolled element)
45 | * @example $('div').scrollTo( 'p.paragraph:eq(2)', 500, { easing:'swing', queue:true, axis:'xy' } );
46 | *
47 | * @ Scroll to a DOM element (same for jQuery object)
48 | * @example var second_child = document.getElementById('container').firstChild.nextSibling;
49 | * $('#container').scrollTo( second_child, { duration:500, axis:'x', onAfter:function(){
50 | * alert('scrolled!!');
51 | * }});
52 | *
53 | * @desc Scroll on both axes, to different values
54 | * @example $('div').scrollTo( { top: 300, left:'+=200' }, { axis:'xy', offset:-20 } );
55 | */
56 | ;(function( $ ){
57 |
58 | var $scrollTo = $.scrollTo = function( target, duration, settings ){
59 | $(window).scrollTo( target, duration, settings );
60 | };
61 |
62 | $scrollTo.defaults = {
63 | axis:'xy',
64 | duration: parseFloat($.fn.jquery) >= 1.3 ? 0 : 1
65 | };
66 |
67 | // Returns the element that needs to be animated to scroll the window.
68 | // Kept for backwards compatibility (specially for localScroll & serialScroll)
69 | $scrollTo.window = function( scope ){
70 | return $(window)._scrollable();
71 | };
72 |
73 | // Hack, hack, hack :)
74 | // Returns the real elements to scroll (supports window/iframes, documents and regular nodes)
75 | $.fn._scrollable = function(){
76 | return this.map(function(){
77 | var elem = this,
78 | isWin = !elem.nodeName || $.inArray( elem.nodeName.toLowerCase(), ['iframe','#document','html','body'] ) != -1;
79 |
80 | if( !isWin )
81 | return elem;
82 |
83 | var doc = (elem.contentWindow || elem).document || elem.ownerDocument || elem;
84 |
85 | return $.browser.safari || doc.compatMode == 'BackCompat' ?
86 | doc.body :
87 | doc.documentElement;
88 | });
89 | };
90 |
91 | $.fn.scrollTo = function( target, duration, settings ){
92 | if( typeof duration == 'object' ){
93 | settings = duration;
94 | duration = 0;
95 | }
96 | if( typeof settings == 'function' )
97 | settings = { onAfter:settings };
98 |
99 | if( target == 'max' )
100 | target = 9e9;
101 |
102 | settings = $.extend( {}, $scrollTo.defaults, settings );
103 | // Speed is still recognized for backwards compatibility
104 | duration = duration || settings.speed || settings.duration;
105 | // Make sure the settings are given right
106 | settings.queue = settings.queue && settings.axis.length > 1;
107 |
108 | if( settings.queue )
109 | // Let's keep the overall duration
110 | duration /= 2;
111 | settings.offset = both( settings.offset );
112 | settings.over = both( settings.over );
113 |
114 | return this._scrollable().each(function(){
115 | var elem = this,
116 | $elem = $(elem),
117 | targ = target, toff, attr = {},
118 | win = $elem.is('html,body');
119 |
120 | switch( typeof targ ){
121 | // A number will pass the regex
122 | case 'number':
123 | case 'string':
124 | if( /^([+-]=)?\d+(\.\d+)?(px|%)?$/.test(targ) ){
125 | targ = both( targ );
126 | // We are done
127 | break;
128 | }
129 | // Relative selector, no break!
130 | targ = $(targ,this);
131 | case 'object':
132 | // DOMElement / jQuery
133 | if( targ.is || targ.style )
134 | // Get the real position of the target
135 | toff = (targ = $(targ)).offset();
136 | }
137 | $.each( settings.axis.split(''), function( i, axis ){
138 | var Pos = axis == 'x' ? 'Left' : 'Top',
139 | pos = Pos.toLowerCase(),
140 | key = 'scroll' + Pos,
141 | old = elem[key],
142 | max = $scrollTo.max(elem, axis);
143 |
144 | if( toff ){// jQuery / DOMElement
145 | attr[key] = toff[pos] + ( win ? 0 : old - $elem.offset()[pos] );
146 |
147 | // If it's a dom element, reduce the margin
148 | if( settings.margin ){
149 | attr[key] -= parseInt(targ.css('margin'+Pos)) || 0;
150 | attr[key] -= parseInt(targ.css('border'+Pos+'Width')) || 0;
151 | }
152 |
153 | attr[key] += settings.offset[pos] || 0;
154 |
155 | if( settings.over[pos] )
156 | // Scroll to a fraction of its width/height
157 | attr[key] += targ[axis=='x'?'width':'height']() * settings.over[pos];
158 | }else{
159 | var val = targ[pos];
160 | // Handle percentage values
161 | attr[key] = val.slice && val.slice(-1) == '%' ?
162 | parseFloat(val) / 100 * max
163 | : val;
164 | }
165 |
166 | // Number or 'number'
167 | if( /^\d+$/.test(attr[key]) )
168 | // Check the limits
169 | attr[key] = attr[key] <= 0 ? 0 : Math.min( attr[key], max );
170 |
171 | // Queueing axes
172 | if( !i && settings.queue ){
173 | // Don't waste time animating, if there's no need.
174 | if( old != attr[key] )
175 | // Intermediate animation
176 | animate( settings.onAfterFirst );
177 | // Don't animate this axis again in the next iteration.
178 | delete attr[key];
179 | }
180 | });
181 |
182 | animate( settings.onAfter );
183 |
184 | function animate( callback ){
185 | $elem.animate( attr, duration, settings.easing, callback && function(){
186 | callback.call(this, target, settings);
187 | });
188 | };
189 |
190 | }).end();
191 | };
192 |
193 | // Max scrolling position, works on quirks mode
194 | // It only fails (not too badly) on IE, quirks mode.
195 | $scrollTo.max = function( elem, axis ){
196 | var Dim = axis == 'x' ? 'Width' : 'Height',
197 | scroll = 'scroll'+Dim;
198 |
199 | if( !$(elem).is('html,body') )
200 | return elem[scroll] - $(elem)[Dim.toLowerCase()]();
201 |
202 | var size = 'client' + Dim,
203 | html = elem.ownerDocument.documentElement,
204 | body = elem.ownerDocument.body;
205 |
206 | return Math.max( html[scroll], body[scroll] )
207 | - Math.min( html[size] , body[size] );
208 |
209 | };
210 |
211 | function both( val ){
212 | return typeof val == 'object' ? val : { top:val, left:val };
213 | };
214 |
215 | })( jQuery );
--------------------------------------------------------------------------------
/sass/lib/_media.scss:
--------------------------------------------------------------------------------
1 | // ---------------------------------------------------------------------------------------------------------------------
2 | //
3 | // Author: Rafal Bromirski
4 | // www: http://paranoida.com/
5 | // twitter: http://twitter.com/paranoida
6 | // dribbble: http://dribbble.com/paranoida
7 | //
8 | // Licensed under a MIT License
9 | //
10 | // ---------------------------------------------------------------------------------------------------------------------
11 | //
12 | // Requirements:
13 | // Sass 3.2.0+
14 | //
15 | // Version:
16 | // 2.2 // developed on 25/02/2013
17 | //
18 | // Variables:
19 | // $units: 1px; // default units for 'screen' mixins - it must include a digit!
20 | //
21 | // Mixins:
22 | // @ min-screen(width) // shortcut for @media screen and (min-width ...)
23 | // @ max-screen(width) // shortcut for @media screen and (max-width ...)
24 | // @ screen(min-width, max-width) // shortcut for @media screen and (min-width ...) and (max-width ...)
25 | // ---
26 | // @ iphone3 // only iPhone (2, 3G, 3GS) landscape & portrait
27 | // @ iphone3-landscape // only iPhone (2, 3G, 3GS) only landscape
28 | // @ iphone3-portrait // only iPhone (2, 3G, 3GS) only portrait
29 | // ---
30 | // @ iphone4 // only iPhone (4, 4S) landscape & portrait
31 | // @ iphone4-landscape // only iPhone (4, 4S) only landscape
32 | // @ iphone4-portrait // only iPhone (4, 4S) only portrait
33 | // ---
34 | // @ iphone5 // only iPhone (5) landscape & portrait
35 | // @ iphone5-landscape // only iPhone (5) only landscape
36 | // @ iphone5-portrait // only iPhone (5) only portrait
37 | // ---
38 | // @ ipad // only iPad (1, 2, Mini) landscape & portrait
39 | // @ ipad-landscape // only iPad (1, 2, Mini) only landscape
40 | // @ ipad-portrait // only iPad (1, 2, Mini) only portrait
41 | // ---
42 | // @ ipad-retina // only iPad (3, 4) landscape & portrait
43 | // @ ipad-retina-landscape // only iPad (3, 4) only landscape
44 | // @ ipad-retina-portrait // only iPad (3, 4) only portrait
45 | // ---
46 | // @ hdpi(ratio) // devices with hidpi displays (default ratio: 1.3)
47 | //
48 | // ---------------------------------------------------------------------------------------------------------------------
49 |
50 | // ---------------------------------------------------------------------------------------------------------------------
51 | // --- screen ----------------------------------------------------------------------------------------------------------
52 | // ---------------------------------------------------------------------------------------------------------------------
53 |
54 | $units: 1px !default;
55 |
56 | @mixin screen($res-min, $res-max)
57 | {
58 | @media screen and ( min-width: if(unitless($res-min), $res-min*$units, $res-min) ) and ( max-width: if(unitless($res-max), $res-max*$units, $res-max) )
59 | {
60 | @content;
61 | }
62 | }
63 |
64 | @mixin max-screen($res)
65 | {
66 | @media screen and ( max-width: if(unitless($res), $res*$units, $res) )
67 | {
68 | @content;
69 | }
70 | }
71 |
72 | @mixin min-screen($res)
73 | {
74 | @media screen and ( min-width: if(unitless($res), $res*$units, $res) )
75 | {
76 | @content;
77 | }
78 | }
79 |
80 | // ---------------------------------------------------------------------------------------------------------------------
81 | // --- hdpi ------------------------------------------------------------------------------------------------------------
82 | // ---------------------------------------------------------------------------------------------------------------------
83 |
84 | // Based on bourbon hidpi-media-queries file (https://github.com/thoughtbot/bourbon/blob/master/app/assets/stylesheets/css3/_hidpi-media-query.scss)
85 | // HiDPI mixin. Default value set to 1.3 to target Google Nexus 7 (http://bjango.com/articles/min-device-pixel-ratio/)
86 |
87 | @mixin hdpi($ratio: 1.3)
88 | {
89 | @media only screen and (-webkit-min-device-pixel-ratio: $ratio),
90 | only screen and (min--moz-device-pixel-ratio: $ratio),
91 | only screen and (-o-min-device-pixel-ratio: #{$ratio}/1),
92 | only screen and (min-resolution: #{round($ratio*96)}dpi),
93 | only screen and (min-resolution: #{$ratio}dppx)
94 | {
95 | @content;
96 | }
97 | }
98 |
99 | // ---------------------------------------------------------------------------------------------------------------------
100 | // --- iphone ----------------------------------------------------------------------------------------------------------
101 | // ---------------------------------------------------------------------------------------------------------------------
102 |
103 |
104 | @mixin iphone
105 | {
106 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
107 | {
108 | @content;
109 | }
110 | }
111 |
112 | @mixin iphone3
113 | {
114 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
115 | and (-webkit-device-pixel-ratio: 1)
116 | {
117 | @content;
118 | }
119 | }
120 |
121 | @mixin iphone3-portrait
122 | {
123 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
124 | and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
125 | {
126 | @content;
127 | }
128 | }
129 |
130 | @mixin iphone3-landscape
131 | {
132 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
133 | and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
134 | {
135 | @content;
136 | }
137 | }
138 |
139 | // ---------------------------------------------------------------------------------------------------------------------
140 | // --- iphone-retina ---------------------------------------------------------------------------------------------------
141 | // ---------------------------------------------------------------------------------------------------------------------
142 |
143 | @mixin iphone4
144 | {
145 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
146 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3)
147 | {
148 | @content;
149 | }
150 | }
151 |
152 | @mixin iphone4-portrait
153 | {
154 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
155 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:portrait)
156 | {
157 | @content;
158 | }
159 | }
160 |
161 | @mixin iphone4-landscape
162 | {
163 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px)
164 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 2/3) and (orientation:landscape)
165 | {
166 | @content;
167 | }
168 | }
169 |
170 | // ---------------------------------------------------------------------------------------------------------------------
171 | // --- iphone-5 --------------------------------------------------------------------------------------------------------
172 | // ---------------------------------------------------------------------------------------------------------------------
173 |
174 | @mixin iphone5
175 | {
176 | @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
177 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71)
178 | {
179 | @content;
180 | }
181 | }
182 |
183 | @mixin iphone5-portrait
184 | {
185 | @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
186 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:portrait)
187 |
188 | {
189 | @content;
190 | }
191 | }
192 |
193 | @mixin iphone5-landscape
194 | {
195 | @media only screen and (min-device-width: 320px) and (max-device-width: 568px)
196 | and (-webkit-device-pixel-ratio: 2) and (device-aspect-ratio: 40/71) and (orientation:landscape)
197 | {
198 | @content;
199 | }
200 | }
201 |
202 | // ---------------------------------------------------------------------------------------------------------------------
203 | // --- ipad + ipad mini ------------------------------------------------------------------------------------------------
204 | // ---------------------------------------------------------------------------------------------------------------------
205 |
206 | @mixin ipad
207 | {
208 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
209 | and (-webkit-device-pixel-ratio: 1)
210 | {
211 | @content;
212 | }
213 | }
214 |
215 | @mixin ipad-portrait
216 | {
217 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
218 | and (-webkit-device-pixel-ratio: 1) and (orientation:portrait)
219 | {
220 | @content;
221 | }
222 | }
223 |
224 | @mixin ipad-landscape
225 | {
226 | @media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
227 | and (-webkit-device-pixel-ratio: 1) and (orientation:landscape)
228 | {
229 | @content;
230 | }
231 | }
232 |
233 | // ---------------------------------------------------------------------------------------------------------------------
234 | // --- ipad-retina -----------------------------------------------------------------------------------------------------
235 | // ---------------------------------------------------------------------------------------------------------------------
236 |
237 | @mixin ipad-retina
238 | {
239 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
240 | and (-webkit-device-pixel-ratio: 2)
241 | {
242 | @content;
243 | }
244 | }
245 |
246 | @mixin ipad-retina-portrait
247 | {
248 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
249 | and (-webkit-device-pixel-ratio: 2) and (orientation:portrait)
250 | {
251 | @content;
252 | }
253 | }
254 |
255 | @mixin ipad-retina-landscape
256 | {
257 | @media screen and (min-device-width: 768px) and (max-device-width: 1024px)
258 | and (-webkit-device-pixel-ratio: 2) and (orientation:landscape)
259 | {
260 | @content;
261 | }
262 | }
--------------------------------------------------------------------------------
/css/screen.css:
--------------------------------------------------------------------------------
1 | html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; vertical-align: baseline; }
2 |
3 | body, html { height: 100%; }
4 |
5 | img, fieldset, a img { border: none; }
6 |
7 | input[type="submit"], button { cursor: pointer; }
8 | input[type="submit"]::-moz-focus-inner, button::-moz-focus-inner { padding: 0; border: 0; }
9 |
10 | textarea { overflow: auto; }
11 |
12 | input, button { margin: 0; padding: 0; border: 0; }
13 |
14 | input, textarea, select, button, h1, h2, h3, h4, h5, h6, a, span, a:focus { outline: none; }
15 |
16 | ul, ol { list-style-type: none; }
17 |
18 | @media only screen and (min-device-width: 320px) and (max-device-width: 480px) { * { -webkit-text-size-adjust: none; } }
19 | table { border-spacing: 0; border-collapse: collapse; width: 100%; }
20 |
21 | body { font-family: "Myriad Pro", Arial, sans-serif; font-weight: normal; font-size: 12px; line-height: 1.4; background: url(../img/bg.jpg) repeat 50% 0; }
22 |
23 | .out { background: url(../img/bg1.png) no-repeat 50% 0; }
24 |
25 | a { color: #3885af; }
26 |
27 | .l { *zoom: 1; }
28 | .l:after { content: " "; display: table; clear: both; }
29 | .l .l-col1 { float: left; width: 620px; }
30 | .l .l-col1 .l-col11 { float: left; width: 300px; }
31 | .l .l-col1 .l-col12 { float: right; width: 300px; }
32 | .l .l-col2 { float: right; width: 300px; }
33 |
34 | .l, .topline .topline__in, .header .header__in, .footer .footer__in { width: 940px; margin: 0 auto; }
35 |
36 | .topline { background: #114b68; }
37 | .topline .topline__in { height: 60px; line-height: 60px; font-size: 18px; color: white; }
38 | .topline .topline__in a { color: white; text-decoration: none; }
39 | .topline .topline__addpost { display: inline-block; font-weight: bold; }
40 | .topline .topline__addpost i { display: inline-block; background: url('../img/icons-s8c356d3a85.png') 0 -252px no-repeat; width: 20px; height: 20px; margin-right: 8px; vertical-align: middle; position: relative; top: -2px; }
41 | .topline .topline__phone { display: inline-block; margin-left: 37px; }
42 | .topline .topline__phone i { display: inline-block; background: url('../img/icons-s8c356d3a85.png') 0 -188px no-repeat; width: 14px; height: 20px; margin-right: 8px; vertical-align: middle; position: relative; top: -2px; }
43 | .topline .topline__user { float: right; height: 60px; line-height: 60px; text-align: right; }
44 | .topline .topline__user a { margin: 0 4px; text-decoration: underline; }
45 | .topline .topline__location { position: absolute; left: 530px; top: 0; height: 60px; line-height: 60px; }
46 | .topline .topline__location i { background: url('../img/icons-s8c356d3a85.png') 0 -154px no-repeat; width: 18px; height: 24px; display: inline-block; margin-right: 8px; vertical-align: middle; top: -2px; position: relative; }
47 |
48 | .header { opacity: 0.9; background-color: #3383b1; }
49 | .header .header__in { *zoom: 1; padding: 25px 0 29px; position: relative; }
50 | .header .header__in:after { content: " "; display: table; clear: both; }
51 | .header .header__logo { float: left; background: url('../img/icons-s8c356d3a85.png') 0 0 no-repeat; width: 325px; height: 50px; font: 0/0 a; text-shadow: none; color: transparent; }
52 | .header .search { position: absolute; right: 150px; top: 35px; width: 270px; }
53 | .header .search input { border: 1px solid #b4d6e8; border-radius: 2px; color: #b4d6e8; font-size: 24px; padding: 4px 13px; width: 242px; background: transparent; }
54 | .header .search input:-moz-placeholder { color: #b4d6e8; }
55 | .header .search input::-webkit-input-placeholder { color: #b4d6e8; }
56 | .header .social { position: absolute; top: 42px; right: 0; text-align: right; }
57 | .header .social a { display: inline-block; margin-left: 20px; vertical-align: middle; }
58 | .header .social .social__fb { background: url('../img/icons-s8c356d3a85.png') 0 -536px no-repeat; width: 11px; height: 20px; }
59 | .header .social .social__vk { background: url('../img/icons-s8c356d3a85.png') 0 -412px no-repeat; width: 21px; height: 12px; }
60 | .header .social .social__ok { background: url('../img/icons-s8c356d3a85.png') 0 -218px no-repeat; width: 15px; height: 24px; }
61 | .header .social .social__in { background: url('../img/icons-s8c356d3a85.png') 0 -509px no-repeat; width: 19px; height: 17px; }
62 |
63 | .nav { text-align: center; text-transform: uppercase; padding: 30px 0 25px; }
64 | .nav ul { list-style: none; }
65 | .nav li { display: inline-block; margin: 0 15px; }
66 | .nav a { text-decoration: none; font-size: 30px; color: black; }
67 |
68 | .loadmoarnews { clear: both; padding-bottom: 50px; padding-top: 40px; text-align: center; font-size: 30px; }
69 | .loadmoarnews a { color: #1e7aa9; }
70 |
71 | .footer .footer__in { padding-top: 14px; border-top: 1px solid #010101; padding-bottom: 30px; }
72 | .footer .footer__nav { list-style: none; text-align: center; margin-bottom: 20px; }
73 | .footer .footer__nav li { display: inline-block; margin: 0 15px; }
74 | .footer .footer__nav a { text-decoration: none; font-size: 30px; color: black; }
75 | .footer .footer__text { font-size: 11px; line-height: 1.4; text-align: center; }
76 | .footer .footer__text p { margin-bottom: 15px; }
77 | .footer .footer__text .footer__copy { font-size: 14px; margin-right: 30px; }
78 |
79 | .entry, .switcher li a, .expert, .vote, .b, .map { background-color: white; box-shadow: 0 0 5px rgba(0, 0, 0, 0.1); margin-bottom: 25px; }
80 |
81 | .comments { font-size: 14px; text-decoration: none; color: #8c8c8c; display: inline-block; }
82 | .comments i { background: url('../img/icons-s8c356d3a85.png') 0 -458px no-repeat; width: 16px; height: 14px; display: inline-block; vertical-align: middle; margin-right: 3px; position: relative; top: -2px; }
83 |
84 | .date { font-size: 14px; text-decoration: none; color: #8c8c8c; display: inline-block; }
85 | .date i { background: url('../img/icons-s8c356d3a85.png') 0 -386px no-repeat; width: 17px; height: 16px; display: inline-block; vertical-align: middle; margin-right: 6px; position: relative; top: -2px; }
86 |
87 | .entry .entry__content { padding: 10px; }
88 | .entry .entry__text { font-size: 14px; line-height: 1.3; color: black; }
89 | .entry .entry__title { font-size: 22px; font-weight: bold; line-height: 1.2; margin-bottom: 4px; }
90 | .entry .entry__categ { font-size: 24px; font-weight: bold; text-transform: uppercase; display: inline-block; margin-right: 28px; vertical-align: middle; line-height: 1; text-decoration: none; }
91 | .entry .entry__location { display: inline-block; margin-right: 18px; }
92 | .entry .entry__location i { background: url('../img/icons-s8c356d3a85.png') 0 -308px no-repeat; width: 12px; height: 16px; display: inline-block; vertical-align: middle; position: relative; top: -2px; margin-right: 4px; }
93 | .entry .comments { margin-right: 18px; }
94 | .entry .entry__meta { margin-bottom: 4px; }
95 | .entry .entry__meta_green .entry__categ { color: #65a927; }
96 | .entry .entry__meta_green .entry__location { color: #65a927; }
97 | .entry .entry__meta_green .entry__location i { background: url('../img/icons-s8c356d3a85.png') 0 -334px no-repeat; width: 12px; height: 16px; }
98 | .entry .entry__meta_red .entry__categ { color: #a9281d; }
99 | .entry .entry__meta_red .entry__location { color: #a9281d; }
100 | .entry .entry__meta_red .entry__location i { background: url('../img/icons-s8c356d3a85.png') 0 -282px no-repeat; width: 12px; height: 16px; }
101 | .entry.entry_big { margin-bottom: 0; }
102 | .entry.entry_big .entry__title { font-size: 36px; }
103 | .entry.entry_big .entry__pic { position: relative; }
104 | .entry.entry_big .entry__exclusive { position: absolute; top: 19px; left: 0; font-size: 30px; background: #fed631; color: black; padding: 4px 15px 0 20px; font-weight: bold; text-transform: uppercase; height: 36px; line-height: 40px; }
105 |
106 | .switcher { list-style: none; *zoom: 1; margin-bottom: 23px; }
107 | .switcher:after { content: " "; display: table; clear: both; }
108 | .switcher li { float: left; width: 25%; text-align: center; padding-top: 7px; }
109 | .switcher li a { display: inline-block; width: 136px; height: 107px; position: relative; }
110 | .switcher li a img { display: block; }
111 | .switcher li a i { position: absolute; top: 0; bottom: 0; right: 0; left: 0; border: 5px solid white; }
112 | .switcher li.is-active { background: white; height: 120px; overflow: hidden; box-shadow: 0 3px 5px rgba(0, 0, 0, 0.1); }
113 | .switcher li.is-active a { box-shadow: none; width: auto; height: auto; }
114 | .switcher li.is-active a i { display: none; }
115 |
116 | .expert { *zoom: 1; }
117 | .expert:after { content: " "; display: table; clear: both; }
118 | .expert .expert__pic { float: left; }
119 | .expert .expert__pic img { display: block; }
120 | .expert .expert__content { overflow: hidden; padding-left: 7px; padding-top: 4px; }
121 | .expert .expert__title { font-size: 18px; font-weight: bold; color: #3885af; line-height: 1.2; margin-bottom: 4px; }
122 | .expert .expert__type { color: #7021a8; text-transform: uppercase; text-decoration: none; font-size: 18px; font-weight: bold; }
123 | .expert .expert__location { font-size: 14px; color: #8c8c8c; display: inline-block; margin-right: 14px; }
124 | .expert .expert__location i { background: url('../img/icons-s8c356d3a85.png') 0 -360px no-repeat; width: 12px; height: 16px; vertical-align: middle; margin-right: 4px; display: inline-block; position: relative; top: -2px; }
125 |
126 | .vote { padding: 10px; }
127 | .vote .vote__header { margin-bottom: 8px; *zoom: 1; }
128 | .vote .vote__header:after { content: " "; display: table; clear: both; }
129 | .vote .vote__header .vote__icon { background: url('../img/icons-s8c356d3a85.png') 0 -60px no-repeat; width: 49px; height: 84px; float: left; margin-right: 12px; margin-top: 10px; }
130 | .vote .vote__header .vote__title { font-size: 24px; font-weight: bold; overflow: hidden; line-height: 1.1; }
131 | .vote .vote__type { font-size: 24px; font-weight: bold; line-height: 1; color: #1e7aa9; text-decoration: none; display: inline-block; margin-right: 27px; vertical-align: middle; }
132 | .vote .vote__comments { font-size: 14px; color: #1e7aa9; display: inline-block; vertical-align: middle; }
133 | .vote .vote__comments i { display: inline-block; background: url('../img/icons-s8c356d3a85.png') 0 -434px no-repeat; width: 16px; height: 14px; margin-right: 3px; vertical-align: middle; position: relative; top: -1px; }
134 | .vote .vote__options { list-style: none; font-size: 18px; color: #1e7aa9; margin-top: 14px; }
135 | .vote .vote__options li { padding-left: 20px; position: relative; margin-bottom: 16px; line-height: 1.2; }
136 | .vote .vote__options li:last-child { margin-bottom: 0; }
137 | .vote .vote__options li:before { content: " "; position: absolute; left: 0; top: 0.3em; background: url('../img/icons-s8c356d3a85.png') 0 -581px no-repeat; width: 10px; height: 10px; }
138 |
139 | .b { padding: 10px; }
140 | .b .b__header { font-size: 30px; font-weight: bold; color: black; margin-bottom: 10px; margin-bottom: 11px; }
141 |
142 | .newslist { list-style: none; }
143 | .newslist li { margin-bottom: 25px; }
144 | .newslist li:last-child { margin-bottom: 0; }
145 | .newslist li a { font-size: 18px; font-weight: bold; line-height: 1.2; }
146 | .newslist li span { font-size: 12px; display: block; color: #a1a1a1; }
147 |
148 | .map { padding: 12px 12px 0 12px; text-align: center; }
149 | .map .map__title { font-size: 24px; font-weight: bold; color: #3885af; margin-top: 40px; margin-bottom: 10px; }
150 | .map .map__nav { font-size: 14px; padding-bottom: 26px; }
151 | .map .map__nav a { display: inline-block; margin: 0 7px; }
152 | .map .map__nav a.is-active { font-weight: bold; }
153 |
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 | Template
7 |
8 |
9 |
10 |
11 |
12 |
13 |
14 |
23 |
24 |
25 |
26 |
38 |
39 |
40 |
41 |
50 |
51 |
52 |
53 |
54 |
55 |
56 |
57 |
58 |
59 |
60 |
61 |
ЭКСКЛЮЗИВ
62 |
63 |
64 |
70 |
71 |
72 |
Равным образом начало повседневной работы по формированию позиции в значительной степени обуславливает создание модели развития. Задача организации, в особенности же постоянный количественный рост и сфера нашей активности позволяет выполнять важные задания по разработке направлений прогрессивного развития. Не следует, однако забывать, что сложившаяся структура организации позволяет выполнять важные задания по разработке направлений прогрессивного развития. Повседневная практика показывает, что начало повседневной работы по формированию позиции играет важную роль в формировании позиций, занимаемых участниками в отношении поставленных задач.
73 |
74 |
75 |
76 |
77 |
78 |
86 |
87 |
88 |
101 |
102 |
103 |
104 |
105 |
106 |
107 |
108 |
109 |
110 |
114 |
115 |
116 |
7 октября 2014
117 |
118 |
119 |
120 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
121 |
122 |
123 |
124 |
125 |
126 |
127 |
128 |
129 |
130 |
131 |
132 |
136 |
137 |
138 |
7 октября 2014
139 |
140 |
141 |
142 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
143 |
144 |
145 |
146 |
147 |
148 |
149 |
150 |
151 |
152 |
153 |
154 |
155 |
156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
ЭКСПЕРТ
165 |
Сибирский округ
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 |
175 |
176 |
177 |
181 |
182 |
183 |
7 октября 2014
184 |
185 |
186 |
187 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
188 |
189 |
190 |
191 |
192 |
193 |
194 |
195 |
196 |
197 |
198 |
199 |
201 |
ЭКСПЕРТ
202 |
Сибирский округ
203 |
204 |
205 |
206 |
207 |
208 |
209 |
210 |
211 |
212 |
213 |
214 |
216 |
ЭКСПЕРТ
217 |
Сибирский округ
218 |
219 |
220 |
221 |
222 |
223 |
224 |
225 |
226 |
227 |
228 |
229 |
233 |
234 |
235 |
7 октября 2014
236 |
237 |
238 |
239 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
240 |
241 |
242 |
243 |
244 |
245 |
246 |
247 |
248 |
249 |
250 |
251 |
252 |
253 |
254 |
255 |
256 |
257 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
258 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
259 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
260 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
261 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
262 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
263 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
264 | Вице-президента Газпромбанка, чья машина сбила ребенка, уличили во лжи 7 октября 2014, 12.45
265 |
266 |
267 |
268 |
269 |
270 |
271 |
272 |
273 |
274 |
275 |
279 |
280 |
281 |
7 октября 2014
282 |
283 |
284 |
285 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
286 |
287 |
288 |
289 |
290 |
291 |
292 |
293 |
294 |
295 |
296 |
300 |
301 |
302 |
7 октября 2014
303 |
304 |
305 |
306 |
По мнению экспертов, вступление в ВТО — это не только новые рынки для российского экспорта, но и ввоз в страну ГМО-продуктов питания - жесткая ценовая конкуренция для отечественного села и возможная угроза здоровью нации.
307 |
308 |
309 |
310 |
311 |
312 |
313 |
314 |
315 |
316 |
317 |
319 |
ЭКСПЕРТ
320 |
Сибирский округ
321 |
322 |
323 |
324 |
325 |
326 |
327 |
328 |
332 |
ОПРОС
333 |
334 |
342 |
343 |
344 |
345 |
346 |
347 |
348 |
349 |
350 |
351 |
353 |
ЭКСПЕРТ
354 |
Сибирский округ
355 |
356 |
357 |
358 |
359 |
360 |
361 |
362 |
363 |
364 |
365 |
367 |
ЭКСПЕРТ
368 |
Сибирский округ
369 |
370 |
371 |
372 |
373 |
374 |
375 |
376 |
379 |
380 |
381 |
382 |
383 |
384 |
398 |
399 |
400 |
401 |
--------------------------------------------------------------------------------
/js/cycle.js:
--------------------------------------------------------------------------------
1 | /*!
2 | * jQuery Cycle2; build: v20131005
3 | * http://jquery.malsup.com/cycle2/
4 | * Copyright (c) 2013 M. Alsup; Dual licensed: MIT/GPL
5 | */
6 |
7 | /*! core engine; version: 20131003 */
8 | ;(function($) {
9 | "use strict";
10 |
11 | var version = '20131003';
12 |
13 | $.fn.cycle = function( options ) {
14 | // fix mistakes with the ready state
15 | var o;
16 | if ( this.length === 0 && !$.isReady ) {
17 | o = { s: this.selector, c: this.context };
18 | $.fn.cycle.log('requeuing slideshow (dom not ready)');
19 | $(function() {
20 | $( o.s, o.c ).cycle(options);
21 | });
22 | return this;
23 | }
24 |
25 | return this.each(function() {
26 | var data, opts, shortName, val;
27 | var container = $(this);
28 | var log = $.fn.cycle.log;
29 |
30 | if ( container.data('cycle.opts') )
31 | return; // already initialized
32 |
33 | if ( container.data('cycle-log') === false ||
34 | ( options && options.log === false ) ||
35 | ( opts && opts.log === false) ) {
36 | log = $.noop;
37 | }
38 |
39 | log('--c2 init--');
40 | data = container.data();
41 | for (var p in data) {
42 | // allow props to be accessed sans 'cycle' prefix and log the overrides
43 | if (data.hasOwnProperty(p) && /^cycle[A-Z]+/.test(p) ) {
44 | val = data[p];
45 | shortName = p.match(/^cycle(.*)/)[1].replace(/^[A-Z]/, lowerCase);
46 | log(shortName+':', val, '('+typeof val +')');
47 | data[shortName] = val;
48 | }
49 | }
50 |
51 | opts = $.extend( {}, $.fn.cycle.defaults, data, options || {});
52 |
53 | opts.timeoutId = 0;
54 | opts.paused = opts.paused || false; // #57
55 | opts.container = container;
56 | opts._maxZ = opts.maxZ;
57 |
58 | opts.API = $.extend ( { _container: container }, $.fn.cycle.API );
59 | opts.API.log = log;
60 | opts.API.trigger = function( eventName, args ) {
61 | opts.container.trigger( eventName, args );
62 | return opts.API;
63 | };
64 |
65 | container.data( 'cycle.opts', opts );
66 | container.data( 'cycle.API', opts.API );
67 |
68 | // opportunity for plugins to modify opts and API
69 | opts.API.trigger('cycle-bootstrap', [ opts, opts.API ]);
70 |
71 | opts.API.addInitialSlides();
72 | opts.API.preInitSlideshow();
73 |
74 | if ( opts.slides.length )
75 | opts.API.initSlideshow();
76 | });
77 | };
78 |
79 | $.fn.cycle.API = {
80 | opts: function() {
81 | return this._container.data( 'cycle.opts' );
82 | },
83 | addInitialSlides: function() {
84 | var opts = this.opts();
85 | var slides = opts.slides;
86 | opts.slideCount = 0;
87 | opts.slides = $(); // empty set
88 |
89 | // add slides that already exist
90 | slides = slides.jquery ? slides : opts.container.find( slides );
91 |
92 | if ( opts.random ) {
93 | slides.sort(function() {return Math.random() - 0.5;});
94 | }
95 |
96 | opts.API.add( slides );
97 | },
98 |
99 | preInitSlideshow: function() {
100 | var opts = this.opts();
101 | opts.API.trigger('cycle-pre-initialize', [ opts ]);
102 | var tx = $.fn.cycle.transitions[opts.fx];
103 | if (tx && $.isFunction(tx.preInit))
104 | tx.preInit( opts );
105 | opts._preInitialized = true;
106 | },
107 |
108 | postInitSlideshow: function() {
109 | var opts = this.opts();
110 | opts.API.trigger('cycle-post-initialize', [ opts ]);
111 | var tx = $.fn.cycle.transitions[opts.fx];
112 | if (tx && $.isFunction(tx.postInit))
113 | tx.postInit( opts );
114 | },
115 |
116 | initSlideshow: function() {
117 | var opts = this.opts();
118 | var pauseObj = opts.container;
119 | var slideOpts;
120 | opts.API.calcFirstSlide();
121 |
122 | if ( opts.container.css('position') == 'static' )
123 | opts.container.css('position', 'relative');
124 |
125 | $(opts.slides[opts.currSlide]).css('opacity',1).show();
126 | opts.API.stackSlides( opts.slides[opts.currSlide], opts.slides[opts.nextSlide], !opts.reverse );
127 |
128 | if ( opts.pauseOnHover ) {
129 | // allow pauseOnHover to specify an element
130 | if ( opts.pauseOnHover !== true )
131 | pauseObj = $( opts.pauseOnHover );
132 |
133 | pauseObj.hover(
134 | function(){ opts.API.pause( true ); },
135 | function(){ opts.API.resume( true ); }
136 | );
137 | }
138 |
139 | // stage initial transition
140 | if ( opts.timeout ) {
141 | slideOpts = opts.API.getSlideOpts( opts.currSlide );
142 | opts.API.queueTransition( slideOpts, slideOpts.timeout + opts.delay );
143 | }
144 |
145 | opts._initialized = true;
146 | opts.API.updateView( true );
147 | opts.API.trigger('cycle-initialized', [ opts ]);
148 | opts.API.postInitSlideshow();
149 | },
150 |
151 | pause: function( hover ) {
152 | var opts = this.opts(),
153 | slideOpts = opts.API.getSlideOpts(),
154 | alreadyPaused = opts.hoverPaused || opts.paused;
155 |
156 | if ( hover )
157 | opts.hoverPaused = true;
158 | else
159 | opts.paused = true;
160 |
161 | if ( ! alreadyPaused ) {
162 | opts.container.addClass('cycle-paused');
163 | opts.API.trigger('cycle-paused', [ opts ]).log('cycle-paused');
164 |
165 | if ( slideOpts.timeout ) {
166 | clearTimeout( opts.timeoutId );
167 | opts.timeoutId = 0;
168 |
169 | // determine how much time is left for the current slide
170 | opts._remainingTimeout -= ( $.now() - opts._lastQueue );
171 | if ( opts._remainingTimeout < 0 || isNaN(opts._remainingTimeout) )
172 | opts._remainingTimeout = undefined;
173 | }
174 | }
175 | },
176 |
177 | resume: function( hover ) {
178 | var opts = this.opts(),
179 | alreadyResumed = !opts.hoverPaused && !opts.paused,
180 | remaining;
181 |
182 | if ( hover )
183 | opts.hoverPaused = false;
184 | else
185 | opts.paused = false;
186 |
187 |
188 | if ( ! alreadyResumed ) {
189 | opts.container.removeClass('cycle-paused');
190 | // #gh-230; if an animation is in progress then don't queue a new transition; it will
191 | // happen naturally
192 | if ( opts.slides.filter(':animated').length === 0 )
193 | opts.API.queueTransition( opts.API.getSlideOpts(), opts._remainingTimeout );
194 | opts.API.trigger('cycle-resumed', [ opts, opts._remainingTimeout ] ).log('cycle-resumed');
195 | }
196 | },
197 |
198 | add: function( slides, prepend ) {
199 | var opts = this.opts();
200 | var oldSlideCount = opts.slideCount;
201 | var startSlideshow = false;
202 | var len;
203 |
204 | if ( $.type(slides) == 'string')
205 | slides = $.trim( slides );
206 |
207 | $( slides ).each(function(i) {
208 | var slideOpts;
209 | var slide = $(this);
210 |
211 | if ( prepend )
212 | opts.container.prepend( slide );
213 | else
214 | opts.container.append( slide );
215 |
216 | opts.slideCount++;
217 | slideOpts = opts.API.buildSlideOpts( slide );
218 |
219 | if ( prepend )
220 | opts.slides = $( slide ).add( opts.slides );
221 | else
222 | opts.slides = opts.slides.add( slide );
223 |
224 | opts.API.initSlide( slideOpts, slide, --opts._maxZ );
225 |
226 | slide.data('cycle.opts', slideOpts);
227 | opts.API.trigger('cycle-slide-added', [ opts, slideOpts, slide ]);
228 | });
229 |
230 | opts.API.updateView( true );
231 |
232 | startSlideshow = opts._preInitialized && (oldSlideCount < 2 && opts.slideCount >= 1);
233 | if ( startSlideshow ) {
234 | if ( !opts._initialized )
235 | opts.API.initSlideshow();
236 | else if ( opts.timeout ) {
237 | len = opts.slides.length;
238 | opts.nextSlide = opts.reverse ? len - 1 : 1;
239 | if ( !opts.timeoutId ) {
240 | opts.API.queueTransition( opts );
241 | }
242 | }
243 | }
244 | },
245 |
246 | calcFirstSlide: function() {
247 | var opts = this.opts();
248 | var firstSlideIndex;
249 | firstSlideIndex = parseInt( opts.startingSlide || 0, 10 );
250 | if (firstSlideIndex >= opts.slides.length || firstSlideIndex < 0)
251 | firstSlideIndex = 0;
252 |
253 | opts.currSlide = firstSlideIndex;
254 | if ( opts.reverse ) {
255 | opts.nextSlide = firstSlideIndex - 1;
256 | if (opts.nextSlide < 0)
257 | opts.nextSlide = opts.slides.length - 1;
258 | }
259 | else {
260 | opts.nextSlide = firstSlideIndex + 1;
261 | if (opts.nextSlide == opts.slides.length)
262 | opts.nextSlide = 0;
263 | }
264 | },
265 |
266 | calcNextSlide: function() {
267 | var opts = this.opts();
268 | var roll;
269 | if ( opts.reverse ) {
270 | roll = (opts.nextSlide - 1) < 0;
271 | opts.nextSlide = roll ? opts.slideCount - 1 : opts.nextSlide-1;
272 | opts.currSlide = roll ? 0 : opts.nextSlide+1;
273 | }
274 | else {
275 | roll = (opts.nextSlide + 1) == opts.slides.length;
276 | opts.nextSlide = roll ? 0 : opts.nextSlide+1;
277 | opts.currSlide = roll ? opts.slides.length-1 : opts.nextSlide-1;
278 | }
279 | },
280 |
281 | calcTx: function( slideOpts, manual ) {
282 | var opts = slideOpts;
283 | var tx;
284 | if ( manual && opts.manualFx )
285 | tx = $.fn.cycle.transitions[opts.manualFx];
286 | if ( !tx )
287 | tx = $.fn.cycle.transitions[opts.fx];
288 |
289 | if (!tx) {
290 | tx = $.fn.cycle.transitions.fade;
291 | opts.API.log('Transition "' + opts.fx + '" not found. Using fade.');
292 | }
293 | return tx;
294 | },
295 |
296 | prepareTx: function( manual, fwd ) {
297 | var opts = this.opts();
298 | var after, curr, next, slideOpts, tx;
299 |
300 | if ( opts.slideCount < 2 ) {
301 | opts.timeoutId = 0;
302 | return;
303 | }
304 | if ( manual && ( !opts.busy || opts.manualTrump ) ) {
305 | opts.API.stopTransition();
306 | opts.busy = false;
307 | clearTimeout(opts.timeoutId);
308 | opts.timeoutId = 0;
309 | }
310 | if ( opts.busy )
311 | return;
312 | if ( opts.timeoutId === 0 && !manual )
313 | return;
314 |
315 | curr = opts.slides[opts.currSlide];
316 | next = opts.slides[opts.nextSlide];
317 | slideOpts = opts.API.getSlideOpts( opts.nextSlide );
318 | tx = opts.API.calcTx( slideOpts, manual );
319 |
320 | opts._tx = tx;
321 |
322 | if ( manual && slideOpts.manualSpeed !== undefined )
323 | slideOpts.speed = slideOpts.manualSpeed;
324 |
325 | // if ( opts.nextSlide === opts.currSlide )
326 | // opts.API.calcNextSlide();
327 |
328 | // ensure that:
329 | // 1. advancing to a different slide
330 | // 2. this is either a manual event (prev/next, pager, cmd) or
331 | // a timer event and slideshow is not paused
332 | if ( opts.nextSlide != opts.currSlide &&
333 | (manual || (!opts.paused && !opts.hoverPaused && opts.timeout) )) { // #62
334 |
335 | opts.API.trigger('cycle-before', [ slideOpts, curr, next, fwd ]);
336 | if ( tx.before )
337 | tx.before( slideOpts, curr, next, fwd );
338 |
339 | after = function() {
340 | opts.busy = false;
341 | // #76; bail if slideshow has been destroyed
342 | if (! opts.container.data( 'cycle.opts' ) )
343 | return;
344 |
345 | if (tx.after)
346 | tx.after( slideOpts, curr, next, fwd );
347 | opts.API.trigger('cycle-after', [ slideOpts, curr, next, fwd ]);
348 | opts.API.queueTransition( slideOpts);
349 | opts.API.updateView( true );
350 | };
351 |
352 | opts.busy = true;
353 | if (tx.transition)
354 | tx.transition(slideOpts, curr, next, fwd, after);
355 | else
356 | opts.API.doTransition( slideOpts, curr, next, fwd, after);
357 |
358 | opts.API.calcNextSlide();
359 | opts.API.updateView();
360 | } else {
361 | opts.API.queueTransition( slideOpts );
362 | }
363 | },
364 |
365 | // perform the actual animation
366 | doTransition: function( slideOpts, currEl, nextEl, fwd, callback) {
367 | var opts = slideOpts;
368 | var curr = $(currEl), next = $(nextEl);
369 | var fn = function() {
370 | // make sure animIn has something so that callback doesn't trigger immediately
371 | next.animate(opts.animIn || { opacity: 1}, opts.speed, opts.easeIn || opts.easing, callback);
372 | };
373 |
374 | next.css(opts.cssBefore || {});
375 | curr.animate(opts.animOut || {}, opts.speed, opts.easeOut || opts.easing, function() {
376 | curr.css(opts.cssAfter || {});
377 | if (!opts.sync) {
378 | fn();
379 | }
380 | });
381 | if (opts.sync) {
382 | fn();
383 | }
384 | },
385 |
386 | queueTransition: function( slideOpts, specificTimeout ) {
387 | var opts = this.opts();
388 | var timeout = specificTimeout !== undefined ? specificTimeout : slideOpts.timeout;
389 | if (opts.nextSlide === 0 && --opts.loop === 0) {
390 | opts.API.log('terminating; loop=0');
391 | opts.timeout = 0;
392 | if ( timeout ) {
393 | setTimeout(function() {
394 | opts.API.trigger('cycle-finished', [ opts ]);
395 | }, timeout);
396 | }
397 | else {
398 | opts.API.trigger('cycle-finished', [ opts ]);
399 | }
400 | // reset nextSlide
401 | opts.nextSlide = opts.currSlide;
402 | return;
403 | }
404 | if ( timeout ) {
405 | opts._lastQueue = $.now();
406 | if ( specificTimeout === undefined )
407 | opts._remainingTimeout = slideOpts.timeout;
408 |
409 | if ( !opts.paused && ! opts.hoverPaused ) {
410 | opts.timeoutId = setTimeout(function() {
411 | opts.API.prepareTx( false, !opts.reverse );
412 | }, timeout );
413 | }
414 | }
415 | },
416 |
417 | stopTransition: function() {
418 | var opts = this.opts();
419 | if ( opts.slides.filter(':animated').length ) {
420 | opts.slides.stop(false, true);
421 | opts.API.trigger('cycle-transition-stopped', [ opts ]);
422 | }
423 |
424 | if ( opts._tx && opts._tx.stopTransition )
425 | opts._tx.stopTransition( opts );
426 | },
427 |
428 | // advance slide forward or back
429 | advanceSlide: function( val ) {
430 | var opts = this.opts();
431 | clearTimeout(opts.timeoutId);
432 | opts.timeoutId = 0;
433 | opts.nextSlide = opts.currSlide + val;
434 |
435 | if (opts.nextSlide < 0)
436 | opts.nextSlide = opts.slides.length - 1;
437 | else if (opts.nextSlide >= opts.slides.length)
438 | opts.nextSlide = 0;
439 |
440 | opts.API.prepareTx( true, val >= 0 );
441 | return false;
442 | },
443 |
444 | buildSlideOpts: function( slide ) {
445 | var opts = this.opts();
446 | var val, shortName;
447 | var slideOpts = slide.data() || {};
448 | for (var p in slideOpts) {
449 | // allow props to be accessed sans 'cycle' prefix and log the overrides
450 | if (slideOpts.hasOwnProperty(p) && /^cycle[A-Z]+/.test(p) ) {
451 | val = slideOpts[p];
452 | shortName = p.match(/^cycle(.*)/)[1].replace(/^[A-Z]/, lowerCase);
453 | opts.API.log('['+(opts.slideCount-1)+']', shortName+':', val, '('+typeof val +')');
454 | slideOpts[shortName] = val;
455 | }
456 | }
457 |
458 | slideOpts = $.extend( {}, $.fn.cycle.defaults, opts, slideOpts );
459 | slideOpts.slideNum = opts.slideCount;
460 |
461 | try {
462 | // these props should always be read from the master state object
463 | delete slideOpts.API;
464 | delete slideOpts.slideCount;
465 | delete slideOpts.currSlide;
466 | delete slideOpts.nextSlide;
467 | delete slideOpts.slides;
468 | } catch(e) {
469 | // no op
470 | }
471 | return slideOpts;
472 | },
473 |
474 | getSlideOpts: function( index ) {
475 | var opts = this.opts();
476 | if ( index === undefined )
477 | index = opts.currSlide;
478 |
479 | var slide = opts.slides[index];
480 | var slideOpts = $(slide).data('cycle.opts');
481 | return $.extend( {}, opts, slideOpts );
482 | },
483 |
484 | initSlide: function( slideOpts, slide, suggestedZindex ) {
485 | var opts = this.opts();
486 | slide.css( slideOpts.slideCss || {} );
487 | if ( suggestedZindex > 0 )
488 | slide.css( 'zIndex', suggestedZindex );
489 |
490 | // ensure that speed settings are sane
491 | if ( isNaN( slideOpts.speed ) )
492 | slideOpts.speed = $.fx.speeds[slideOpts.speed] || $.fx.speeds._default;
493 | if ( !slideOpts.sync )
494 | slideOpts.speed = slideOpts.speed / 2;
495 |
496 | slide.addClass( opts.slideClass );
497 | },
498 |
499 | updateView: function( isAfter, isDuring ) {
500 | var opts = this.opts();
501 | if ( !opts._initialized )
502 | return;
503 | var slideOpts = opts.API.getSlideOpts();
504 | var currSlide = opts.slides[ opts.currSlide ];
505 |
506 | if ( ! isAfter && isDuring !== true ) {
507 | opts.API.trigger('cycle-update-view-before', [ opts, slideOpts, currSlide ]);
508 | if ( opts.updateView < 0 )
509 | return;
510 | }
511 |
512 | if ( opts.slideActiveClass ) {
513 | opts.slides.removeClass( opts.slideActiveClass )
514 | .eq( opts.currSlide ).addClass( opts.slideActiveClass );
515 | }
516 |
517 | if ( isAfter && opts.hideNonActive )
518 | opts.slides.filter( ':not(.' + opts.slideActiveClass + ')' ).hide();
519 |
520 | opts.API.trigger('cycle-update-view', [ opts, slideOpts, currSlide, isAfter ]);
521 |
522 | if ( isAfter )
523 | opts.API.trigger('cycle-update-view-after', [ opts, slideOpts, currSlide ]);
524 | },
525 |
526 | getComponent: function( name ) {
527 | var opts = this.opts();
528 | var selector = opts[name];
529 | if (typeof selector === 'string') {
530 | // if selector is a child, sibling combinator, adjancent selector then use find, otherwise query full dom
531 | return (/^\s*[\>|\+|~]/).test( selector ) ? opts.container.find( selector ) : $( selector );
532 | }
533 | if (selector.jquery)
534 | return selector;
535 |
536 | return $(selector);
537 | },
538 |
539 | stackSlides: function( curr, next, fwd ) {
540 | var opts = this.opts();
541 | if ( !curr ) {
542 | curr = opts.slides[opts.currSlide];
543 | next = opts.slides[opts.nextSlide];
544 | fwd = !opts.reverse;
545 | }
546 |
547 | // reset the zIndex for the common case:
548 | // curr slide on top, next slide beneath, and the rest in order to be shown
549 | $(curr).css('zIndex', opts.maxZ);
550 |
551 | var i;
552 | var z = opts.maxZ - 2;
553 | var len = opts.slideCount;
554 | if (fwd) {
555 | for ( i = opts.currSlide + 1; i < len; i++ )
556 | $( opts.slides[i] ).css( 'zIndex', z-- );
557 | for ( i = 0; i < opts.currSlide; i++ )
558 | $( opts.slides[i] ).css( 'zIndex', z-- );
559 | }
560 | else {
561 | for ( i = opts.currSlide - 1; i >= 0; i-- )
562 | $( opts.slides[i] ).css( 'zIndex', z-- );
563 | for ( i = len - 1; i > opts.currSlide; i-- )
564 | $( opts.slides[i] ).css( 'zIndex', z-- );
565 | }
566 |
567 | $(next).css('zIndex', opts.maxZ - 1);
568 | },
569 |
570 | getSlideIndex: function( el ) {
571 | return this.opts().slides.index( el );
572 | }
573 |
574 | }; // API
575 |
576 | // default logger
577 | $.fn.cycle.log = function log() {
578 | /*global console:true */
579 | if (window.console && console.log)
580 | console.log('[cycle2] ' + Array.prototype.join.call(arguments, ' ') );
581 | };
582 |
583 | $.fn.cycle.version = function() { return 'Cycle2: ' + version; };
584 |
585 | // helper functions
586 |
587 | function lowerCase(s) {
588 | return (s || '').toLowerCase();
589 | }
590 |
591 | // expose transition object
592 | $.fn.cycle.transitions = {
593 | custom: {
594 | },
595 | none: {
596 | before: function( opts, curr, next, fwd ) {
597 | opts.API.stackSlides( next, curr, fwd );
598 | opts.cssBefore = { opacity: 1, display: 'block' };
599 | }
600 | },
601 | fade: {
602 | before: function( opts, curr, next, fwd ) {
603 | var css = opts.API.getSlideOpts( opts.nextSlide ).slideCss || {};
604 | opts.API.stackSlides( curr, next, fwd );
605 | opts.cssBefore = $.extend(css, { opacity: 0, display: 'block' });
606 | opts.animIn = { opacity: 1 };
607 | opts.animOut = { opacity: 0 };
608 | }
609 | },
610 | fadeout: {
611 | before: function( opts , curr, next, fwd ) {
612 | var css = opts.API.getSlideOpts( opts.nextSlide ).slideCss || {};
613 | opts.API.stackSlides( curr, next, fwd );
614 | opts.cssBefore = $.extend(css, { opacity: 1, display: 'block' });
615 | opts.animOut = { opacity: 0 };
616 | }
617 | },
618 | scrollHorz: {
619 | before: function( opts, curr, next, fwd ) {
620 | opts.API.stackSlides( curr, next, fwd );
621 | var w = opts.container.css('overflow','hidden').width();
622 | opts.cssBefore = { left: fwd ? w : - w, top: 0, opacity: 1, display: 'block' };
623 | opts.cssAfter = { zIndex: opts._maxZ - 2, left: 0 };
624 | opts.animIn = { left: 0 };
625 | opts.animOut = { left: fwd ? -w : w };
626 | }
627 | }
628 | };
629 |
630 | // @see: http://jquery.malsup.com/cycle2/api
631 | $.fn.cycle.defaults = {
632 | allowWrap: true,
633 | autoSelector: '.cycle-slideshow[data-cycle-auto-init!=false]',
634 | delay: 0,
635 | easing: null,
636 | fx: 'fade',
637 | hideNonActive: true,
638 | loop: 0,
639 | manualFx: undefined,
640 | manualSpeed: undefined,
641 | manualTrump: true,
642 | maxZ: 100,
643 | pauseOnHover: false,
644 | reverse: false,
645 | slideActiveClass: 'cycle-slide-active',
646 | slideClass: 'cycle-slide',
647 | slideCss: { position: 'absolute', top: 0, left: 0 },
648 | slides: '> img',
649 | speed: 500,
650 | startingSlide: 0,
651 | sync: true,
652 | timeout: 4000,
653 | updateView: -1
654 | };
655 |
656 | // automatically find and run slideshows
657 | $(document).ready(function() {
658 | $( $.fn.cycle.defaults.autoSelector ).cycle();
659 | });
660 |
661 | })(jQuery);
662 |
663 | /*! Cycle2 autoheight plugin; Copyright (c) M.Alsup, 2012; version: 20130304 */
664 | (function($) {
665 | "use strict";
666 |
667 | $.extend($.fn.cycle.defaults, {
668 | autoHeight: 0 // setting this option to false disables autoHeight logic
669 | });
670 |
671 | $(document).on( 'cycle-initialized', function( e, opts ) {
672 | var autoHeight = opts.autoHeight;
673 | var t = $.type( autoHeight );
674 | var resizeThrottle = null;
675 | var ratio;
676 |
677 | if ( t !== 'string' && t !== 'number' )
678 | return;
679 |
680 | // bind events
681 | opts.container.on( 'cycle-slide-added cycle-slide-removed', initAutoHeight );
682 | opts.container.on( 'cycle-destroyed', onDestroy );
683 |
684 | if ( autoHeight == 'container' ) {
685 | opts.container.on( 'cycle-before', onBefore );
686 | }
687 | else if ( t === 'string' && /\d+\:\d+/.test( autoHeight ) ) {
688 | // use ratio
689 | ratio = autoHeight.match(/(\d+)\:(\d+)/);
690 | ratio = ratio[1] / ratio[2];
691 | opts._autoHeightRatio = ratio;
692 | }
693 |
694 | // if autoHeight is a number then we don't need to recalculate the sentinel
695 | // index on resize
696 | if ( t !== 'number' ) {
697 | // bind unique resize handler per slideshow (so it can be 'off-ed' in onDestroy)
698 | opts._autoHeightOnResize = function () {
699 | clearTimeout( resizeThrottle );
700 | resizeThrottle = setTimeout( onResize, 50 );
701 | };
702 |
703 | $(window).on( 'resize orientationchange', opts._autoHeightOnResize );
704 | }
705 |
706 | setTimeout( onResize, 30 );
707 |
708 | function onResize() {
709 | initAutoHeight( e, opts );
710 | }
711 | });
712 |
713 | function initAutoHeight( e, opts ) {
714 | var clone, height, sentinelIndex;
715 | var autoHeight = opts.autoHeight;
716 |
717 | if ( autoHeight == 'container' ) {
718 | height = $( opts.slides[ opts.currSlide ] ).outerHeight();
719 | opts.container.height( height );
720 | }
721 | else if ( opts._autoHeightRatio ) {
722 | opts.container.height( opts.container.width() / opts._autoHeightRatio );
723 | }
724 | else if ( autoHeight === 'calc' || ( $.type( autoHeight ) == 'number' && autoHeight >= 0 ) ) {
725 | if ( autoHeight === 'calc' )
726 | sentinelIndex = calcSentinelIndex( e, opts );
727 | else if ( autoHeight >= opts.slides.length )
728 | sentinelIndex = 0;
729 | else
730 | sentinelIndex = autoHeight;
731 |
732 | // only recreate sentinel if index is different
733 | if ( sentinelIndex == opts._sentinelIndex )
734 | return;
735 |
736 | opts._sentinelIndex = sentinelIndex;
737 | if ( opts._sentinel )
738 | opts._sentinel.remove();
739 |
740 | // clone existing slide as sentinel
741 | clone = $( opts.slides[ sentinelIndex ].cloneNode(true) );
742 |
743 | // #50; remove special attributes from cloned content
744 | clone.removeAttr( 'id name rel' ).find( '[id],[name],[rel]' ).removeAttr( 'id name rel' );
745 |
746 | clone.css({
747 | position: 'static',
748 | visibility: 'hidden',
749 | display: 'block'
750 | }).prependTo( opts.container ).addClass('cycle-sentinel cycle-slide').removeClass('cycle-slide-active');
751 | clone.find( '*' ).css( 'visibility', 'hidden' );
752 |
753 | opts._sentinel = clone;
754 | }
755 | }
756 |
757 | function calcSentinelIndex( e, opts ) {
758 | var index = 0, max = -1;
759 |
760 | // calculate tallest slide index
761 | opts.slides.each(function(i) {
762 | var h = $(this).height();
763 | if ( h > max ) {
764 | max = h;
765 | index = i;
766 | }
767 | });
768 | return index;
769 | }
770 |
771 | function onBefore( e, opts, outgoing, incoming, forward ) {
772 | var h = $(incoming).outerHeight();
773 | var duration = opts.sync ? opts.speed / 2 : opts.speed;
774 | opts.container.animate( { height: h }, duration );
775 | }
776 |
777 | function onDestroy( e, opts ) {
778 | if ( opts._autoHeightOnResize ) {
779 | $(window).off( 'resize orientationchange', opts._autoHeightOnResize );
780 | opts._autoHeightOnResize = null;
781 | }
782 | opts.container.off( 'cycle-slide-added cycle-slide-removed', initAutoHeight );
783 | opts.container.off( 'cycle-destroyed', onDestroy );
784 | opts.container.off( 'cycle-before', onBefore );
785 |
786 | if ( opts._sentinel ) {
787 | opts._sentinel.remove();
788 | opts._sentinel = null;
789 | }
790 | }
791 |
792 | })(jQuery);
793 |
794 | /*! caption plugin for Cycle2; version: 20130306 */
795 | (function($) {
796 | "use strict";
797 |
798 | $.extend($.fn.cycle.defaults, {
799 | caption: '> .cycle-caption',
800 | captionTemplate: '{{slideNum}} / {{slideCount}}',
801 | overlay: '> .cycle-overlay',
802 | overlayTemplate: '{{title}}
{{desc}}
',
803 | captionModule: 'caption'
804 | });
805 |
806 | $(document).on( 'cycle-update-view', function( e, opts, slideOpts, currSlide ) {
807 | if ( opts.captionModule !== 'caption' )
808 | return;
809 | var el;
810 | $.each(['caption','overlay'], function() {
811 | var name = this;
812 | var template = slideOpts[name+'Template'];
813 | var el = opts.API.getComponent( name );
814 | if( el.length && template ) {
815 | el.html( opts.API.tmpl( template, slideOpts, opts, currSlide ) );
816 | el.show();
817 | }
818 | else {
819 | el.hide();
820 | }
821 | });
822 | });
823 |
824 | $(document).on( 'cycle-destroyed', function( e, opts ) {
825 | var el;
826 | $.each(['caption','overlay'], function() {
827 | var name = this, template = opts[name+'Template'];
828 | if ( opts[name] && template ) {
829 | el = opts.API.getComponent( 'caption' );
830 | el.empty();
831 | }
832 | });
833 | });
834 |
835 | })(jQuery);
836 |
837 | /*! command plugin for Cycle2; version: 20130707 */
838 | (function($) {
839 | "use strict";
840 |
841 | var c2 = $.fn.cycle;
842 |
843 | $.fn.cycle = function( options ) {
844 | var cmd, cmdFn, opts;
845 | var args = $.makeArray( arguments );
846 |
847 | if ( $.type( options ) == 'number' ) {
848 | return this.cycle( 'goto', options );
849 | }
850 |
851 | if ( $.type( options ) == 'string' ) {
852 | return this.each(function() {
853 | var cmdArgs;
854 | cmd = options;
855 | opts = $(this).data('cycle.opts');
856 |
857 | if ( opts === undefined ) {
858 | c2.log('slideshow must be initialized before sending commands; "' + cmd + '" ignored');
859 | return;
860 | }
861 | else {
862 | cmd = cmd == 'goto' ? 'jump' : cmd; // issue #3; change 'goto' to 'jump' internally
863 | cmdFn = opts.API[ cmd ];
864 | if ( $.isFunction( cmdFn )) {
865 | cmdArgs = $.makeArray( args );
866 | cmdArgs.shift();
867 | return cmdFn.apply( opts.API, cmdArgs );
868 | }
869 | else {
870 | c2.log( 'unknown command: ', cmd );
871 | }
872 | }
873 | });
874 | }
875 | else {
876 | return c2.apply( this, arguments );
877 | }
878 | };
879 |
880 | // copy props
881 | $.extend( $.fn.cycle, c2 );
882 |
883 | $.extend( c2.API, {
884 | next: function() {
885 | var opts = this.opts();
886 | if ( opts.busy && ! opts.manualTrump )
887 | return;
888 |
889 | var count = opts.reverse ? -1 : 1;
890 | if ( opts.allowWrap === false && ( opts.currSlide + count ) >= opts.slideCount )
891 | return;
892 |
893 | opts.API.advanceSlide( count );
894 | opts.API.trigger('cycle-next', [ opts ]).log('cycle-next');
895 | },
896 |
897 | prev: function() {
898 | var opts = this.opts();
899 | if ( opts.busy && ! opts.manualTrump )
900 | return;
901 | var count = opts.reverse ? 1 : -1;
902 | if ( opts.allowWrap === false && ( opts.currSlide + count ) < 0 )
903 | return;
904 |
905 | opts.API.advanceSlide( count );
906 | opts.API.trigger('cycle-prev', [ opts ]).log('cycle-prev');
907 | },
908 |
909 | destroy: function() {
910 | this.stop(); //#204
911 |
912 | var opts = this.opts();
913 | var clean = $.isFunction( $._data ) ? $._data : $.noop; // hack for #184 and #201
914 | clearTimeout(opts.timeoutId);
915 | opts.timeoutId = 0;
916 | opts.API.stop();
917 | opts.API.trigger( 'cycle-destroyed', [ opts ] ).log('cycle-destroyed');
918 | opts.container.removeData();
919 | clean( opts.container[0], 'parsedAttrs', false );
920 |
921 | // #75; remove inline styles
922 | if ( ! opts.retainStylesOnDestroy ) {
923 | opts.container.removeAttr( 'style' );
924 | opts.slides.removeAttr( 'style' );
925 | opts.slides.removeClass( opts.slideActiveClass );
926 | }
927 | opts.slides.each(function() {
928 | $(this).removeData();
929 | clean( this, 'parsedAttrs', false );
930 | });
931 | },
932 |
933 | jump: function( index ) {
934 | // go to the requested slide
935 | var fwd;
936 | var opts = this.opts();
937 | if ( opts.busy && ! opts.manualTrump )
938 | return;
939 | var num = parseInt( index, 10 );
940 | if (isNaN(num) || num < 0 || num >= opts.slides.length) {
941 | opts.API.log('goto: invalid slide index: ' + num);
942 | return;
943 | }
944 | if (num == opts.currSlide) {
945 | opts.API.log('goto: skipping, already on slide', num);
946 | return;
947 | }
948 | opts.nextSlide = num;
949 | clearTimeout(opts.timeoutId);
950 | opts.timeoutId = 0;
951 | opts.API.log('goto: ', num, ' (zero-index)');
952 | fwd = opts.currSlide < opts.nextSlide;
953 | opts.API.prepareTx( true, fwd );
954 | },
955 |
956 | stop: function() {
957 | var opts = this.opts();
958 | var pauseObj = opts.container;
959 | clearTimeout(opts.timeoutId);
960 | opts.timeoutId = 0;
961 | opts.API.stopTransition();
962 | if ( opts.pauseOnHover ) {
963 | if ( opts.pauseOnHover !== true )
964 | pauseObj = $( opts.pauseOnHover );
965 | pauseObj.off('mouseenter mouseleave');
966 | }
967 | opts.API.trigger('cycle-stopped', [ opts ]).log('cycle-stopped');
968 | },
969 |
970 | reinit: function() {
971 | var opts = this.opts();
972 | opts.API.destroy();
973 | opts.container.cycle();
974 | },
975 |
976 | remove: function( index ) {
977 | var opts = this.opts();
978 | var slide, slideToRemove, slides = [], slideNum = 1;
979 | for ( var i=0; i < opts.slides.length; i++ ) {
980 | slide = opts.slides[i];
981 | if ( i == index ) {
982 | slideToRemove = slide;
983 | }
984 | else {
985 | slides.push( slide );
986 | $( slide ).data('cycle.opts').slideNum = slideNum;
987 | slideNum++;
988 | }
989 | }
990 | if ( slideToRemove ) {
991 | opts.slides = $( slides );
992 | opts.slideCount--;
993 | $( slideToRemove ).remove();
994 | if (index == opts.currSlide)
995 | opts.API.advanceSlide( 1 );
996 | else if ( index < opts.currSlide )
997 | opts.currSlide--;
998 | else
999 | opts.currSlide++;
1000 |
1001 | opts.API.trigger('cycle-slide-removed', [ opts, index, slideToRemove ]).log('cycle-slide-removed');
1002 | opts.API.updateView();
1003 | }
1004 | }
1005 |
1006 | });
1007 |
1008 | // listen for clicks on elements with data-cycle-cmd attribute
1009 | $(document).on('click.cycle', '[data-cycle-cmd]', function(e) {
1010 | // issue cycle command
1011 | e.preventDefault();
1012 | var el = $(this);
1013 | var command = el.data('cycle-cmd');
1014 | var context = el.data('cycle-context') || '.cycle-slideshow';
1015 | $(context).cycle(command, el.data('cycle-arg'));
1016 | });
1017 |
1018 |
1019 | })(jQuery);
1020 |
1021 | /*! hash plugin for Cycle2; version: 20130905 */
1022 | (function($) {
1023 | "use strict";
1024 |
1025 | $(document).on( 'cycle-pre-initialize', function( e, opts ) {
1026 | onHashChange( opts, true );
1027 |
1028 | opts._onHashChange = function() {
1029 | onHashChange( opts, false );
1030 | };
1031 |
1032 | $( window ).on( 'hashchange', opts._onHashChange);
1033 | });
1034 |
1035 | $(document).on( 'cycle-update-view', function( e, opts, slideOpts ) {
1036 | if ( slideOpts.hash && ( '#' + slideOpts.hash ) != window.location.hash ) {
1037 | opts._hashFence = true;
1038 | window.location.hash = slideOpts.hash;
1039 | }
1040 | });
1041 |
1042 | $(document).on( 'cycle-destroyed', function( e, opts) {
1043 | if ( opts._onHashChange ) {
1044 | $( window ).off( 'hashchange', opts._onHashChange );
1045 | }
1046 | });
1047 |
1048 | function onHashChange( opts, setStartingSlide ) {
1049 | var hash;
1050 | if ( opts._hashFence ) {
1051 | opts._hashFence = false;
1052 | return;
1053 | }
1054 |
1055 | hash = window.location.hash.substring(1);
1056 |
1057 | opts.slides.each(function(i) {
1058 | if ( $(this).data( 'cycle-hash' ) == hash ) {
1059 | if ( setStartingSlide === true ) {
1060 | opts.startingSlide = i;
1061 | }
1062 | else {
1063 | var fwd = opts.currSlide < i;
1064 | opts.nextSlide = i;
1065 | opts.API.prepareTx( true, fwd );
1066 | }
1067 | return false;
1068 | }
1069 | });
1070 | }
1071 |
1072 | })(jQuery);
1073 |
1074 | /*! loader plugin for Cycle2; version: 20130307 */
1075 | (function($) {
1076 | "use strict";
1077 |
1078 | $.extend($.fn.cycle.defaults, {
1079 | loader: false
1080 | });
1081 |
1082 | $(document).on( 'cycle-bootstrap', function( e, opts ) {
1083 | var addFn;
1084 |
1085 | if ( !opts.loader )
1086 | return;
1087 |
1088 | // override API.add for this slideshow
1089 | addFn = opts.API.add;
1090 | opts.API.add = add;
1091 |
1092 | function add( slides, prepend ) {
1093 | var slideArr = [];
1094 | if ( $.type( slides ) == 'string' )
1095 | slides = $.trim( slides );
1096 | else if ( $.type( slides) === 'array' ) {
1097 | for (var i=0; i < slides.length; i++ )
1098 | slides[i] = $(slides[i])[0];
1099 | }
1100 |
1101 | slides = $( slides );
1102 | var slideCount = slides.length;
1103 |
1104 | if ( ! slideCount )
1105 | return;
1106 |
1107 | slides.hide().appendTo('body').each(function(i) { // appendTo fixes #56
1108 | var count = 0;
1109 | var slide = $(this);
1110 | var images = slide.is('img') ? slide : slide.find('img');
1111 | slide.data('index', i);
1112 | // allow some images to be marked as unimportant (and filter out images w/o src value)
1113 | images = images.filter(':not(.cycle-loader-ignore)').filter(':not([src=""])');
1114 | if ( ! images.length ) {
1115 | --slideCount;
1116 | slideArr.push( slide );
1117 | return;
1118 | }
1119 |
1120 | count = images.length;
1121 | images.each(function() {
1122 | // add images that are already loaded
1123 | if ( this.complete ) {
1124 | imageLoaded();
1125 | }
1126 | else {
1127 | $(this).load(function() {
1128 | imageLoaded();
1129 | }).error(function() {
1130 | if ( --count === 0 ) {
1131 | // ignore this slide
1132 | opts.API.log('slide skipped; img not loaded:', this.src);
1133 | if ( --slideCount === 0 && opts.loader == 'wait') {
1134 | addFn.apply( opts.API, [ slideArr, prepend ] );
1135 | }
1136 | }
1137 | });
1138 | }
1139 | });
1140 |
1141 | function imageLoaded() {
1142 | if ( --count === 0 ) {
1143 | --slideCount;
1144 | addSlide( slide );
1145 | }
1146 | }
1147 | });
1148 |
1149 | if ( slideCount )
1150 | opts.container.addClass('cycle-loading');
1151 |
1152 |
1153 | function addSlide( slide ) {
1154 | var curr;
1155 | if ( opts.loader == 'wait' ) {
1156 | slideArr.push( slide );
1157 | if ( slideCount === 0 ) {
1158 | // #59; sort slides into original markup order
1159 | slideArr.sort( sorter );
1160 | addFn.apply( opts.API, [ slideArr, prepend ] );
1161 | opts.container.removeClass('cycle-loading');
1162 | }
1163 | }
1164 | else {
1165 | curr = $(opts.slides[opts.currSlide]);
1166 | addFn.apply( opts.API, [ slide, prepend ] );
1167 | curr.show();
1168 | opts.container.removeClass('cycle-loading');
1169 | }
1170 | }
1171 |
1172 | function sorter(a, b) {
1173 | return a.data('index') - b.data('index');
1174 | }
1175 | }
1176 | });
1177 |
1178 | })(jQuery);
1179 |
1180 | /*! pager plugin for Cycle2; version: 20130525 */
1181 | (function($) {
1182 | "use strict";
1183 |
1184 | $.extend($.fn.cycle.defaults, {
1185 | pager: '> .cycle-pager',
1186 | pagerActiveClass: 'cycle-pager-active',
1187 | pagerEvent: 'click.cycle',
1188 | pagerTemplate: '• '
1189 | });
1190 |
1191 | $(document).on( 'cycle-bootstrap', function( e, opts, API ) {
1192 | // add method to API
1193 | API.buildPagerLink = buildPagerLink;
1194 | });
1195 |
1196 | $(document).on( 'cycle-slide-added', function( e, opts, slideOpts, slideAdded ) {
1197 | if ( opts.pager ) {
1198 | opts.API.buildPagerLink ( opts, slideOpts, slideAdded );
1199 | opts.API.page = page;
1200 | }
1201 | });
1202 |
1203 | $(document).on( 'cycle-slide-removed', function( e, opts, index, slideRemoved ) {
1204 | if ( opts.pager ) {
1205 | var pagers = opts.API.getComponent( 'pager' );
1206 | pagers.each(function() {
1207 | var pager = $(this);
1208 | $( pager.children()[index] ).remove();
1209 | });
1210 | }
1211 | });
1212 |
1213 | $(document).on( 'cycle-update-view', function( e, opts, slideOpts ) {
1214 | var pagers;
1215 |
1216 | if ( opts.pager ) {
1217 | pagers = opts.API.getComponent( 'pager' );
1218 | pagers.each(function() {
1219 | $(this).children().removeClass( opts.pagerActiveClass )
1220 | .eq( opts.currSlide ).addClass( opts.pagerActiveClass );
1221 | });
1222 | }
1223 | });
1224 |
1225 | $(document).on( 'cycle-destroyed', function( e, opts ) {
1226 | var pager = opts.API.getComponent( 'pager' );
1227 |
1228 | if ( pager ) {
1229 | pager.children().off( opts.pagerEvent ); // #202
1230 | if ( opts.pagerTemplate )
1231 | pager.empty();
1232 | }
1233 | });
1234 |
1235 | function buildPagerLink( opts, slideOpts, slide ) {
1236 | var pagerLink;
1237 | var pagers = opts.API.getComponent( 'pager' );
1238 | pagers.each(function() {
1239 | var pager = $(this);
1240 | if ( slideOpts.pagerTemplate ) {
1241 | var markup = opts.API.tmpl( slideOpts.pagerTemplate, slideOpts, opts, slide[0] );
1242 | pagerLink = $( markup ).appendTo( pager );
1243 | }
1244 | else {
1245 | pagerLink = pager.children().eq( opts.slideCount - 1 );
1246 | }
1247 | pagerLink.on( opts.pagerEvent, function(e) {
1248 | e.preventDefault();
1249 | opts.API.page( pager, e.currentTarget);
1250 | });
1251 | });
1252 | }
1253 |
1254 | function page( pager, target ) {
1255 | /*jshint validthis:true */
1256 | var opts = this.opts();
1257 | if ( opts.busy && ! opts.manualTrump )
1258 | return;
1259 |
1260 | var index = pager.children().index( target );
1261 | var nextSlide = index;
1262 | var fwd = opts.currSlide < nextSlide;
1263 | if (opts.currSlide == nextSlide) {
1264 | return; // no op, clicked pager for the currently displayed slide
1265 | }
1266 | opts.nextSlide = nextSlide;
1267 | opts.API.prepareTx( true, fwd );
1268 | opts.API.trigger('cycle-pager-activated', [opts, pager, target ]);
1269 | }
1270 |
1271 | })(jQuery);
1272 |
1273 |
1274 | /*! prevnext plugin for Cycle2; version: 20130709 */
1275 | (function($) {
1276 | "use strict";
1277 |
1278 | $.extend($.fn.cycle.defaults, {
1279 | next: '> .cycle-next',
1280 | nextEvent: 'click.cycle',
1281 | disabledClass: 'disabled',
1282 | prev: '> .cycle-prev',
1283 | prevEvent: 'click.cycle',
1284 | swipe: false
1285 | });
1286 |
1287 | $(document).on( 'cycle-initialized', function( e, opts ) {
1288 | opts.API.getComponent( 'next' ).on( opts.nextEvent, function(e) {
1289 | e.preventDefault();
1290 | opts.API.next();
1291 | });
1292 |
1293 | opts.API.getComponent( 'prev' ).on( opts.prevEvent, function(e) {
1294 | e.preventDefault();
1295 | opts.API.prev();
1296 | });
1297 |
1298 | if ( opts.swipe ) {
1299 | var nextEvent = opts.swipeVert ? 'swipeUp.cycle' : 'swipeLeft.cycle swipeleft.cycle';
1300 | var prevEvent = opts.swipeVert ? 'swipeDown.cycle' : 'swipeRight.cycle swiperight.cycle';
1301 | opts.container.on( nextEvent, function(e) {
1302 | opts.API.next();
1303 | });
1304 | opts.container.on( prevEvent, function() {
1305 | opts.API.prev();
1306 | });
1307 | }
1308 | });
1309 |
1310 | $(document).on( 'cycle-update-view', function( e, opts, slideOpts, currSlide ) {
1311 | if ( opts.allowWrap )
1312 | return;
1313 |
1314 | var cls = opts.disabledClass;
1315 | var next = opts.API.getComponent( 'next' );
1316 | var prev = opts.API.getComponent( 'prev' );
1317 | var prevBoundry = opts._prevBoundry || 0;
1318 | var nextBoundry = (opts._nextBoundry !== undefined)?opts._nextBoundry:opts.slideCount - 1;
1319 |
1320 | if ( opts.currSlide == nextBoundry )
1321 | next.addClass( cls ).prop( 'disabled', true );
1322 | else
1323 | next.removeClass( cls ).prop( 'disabled', false );
1324 |
1325 | if ( opts.currSlide === prevBoundry )
1326 | prev.addClass( cls ).prop( 'disabled', true );
1327 | else
1328 | prev.removeClass( cls ).prop( 'disabled', false );
1329 | });
1330 |
1331 |
1332 | $(document).on( 'cycle-destroyed', function( e, opts ) {
1333 | opts.API.getComponent( 'prev' ).off( opts.nextEvent );
1334 | opts.API.getComponent( 'next' ).off( opts.prevEvent );
1335 | opts.container.off( 'swipeleft.cycle swiperight.cycle swipeLeft.cycle swipeRight.cycle swipeUp.cycle swipeDown.cycle' );
1336 | });
1337 |
1338 | })(jQuery);
1339 |
1340 | /*! progressive loader plugin for Cycle2; version: 20130315 */
1341 | (function($) {
1342 | "use strict";
1343 |
1344 | $.extend($.fn.cycle.defaults, {
1345 | progressive: false
1346 | });
1347 |
1348 | $(document).on( 'cycle-pre-initialize', function( e, opts ) {
1349 | if ( !opts.progressive )
1350 | return;
1351 |
1352 | var API = opts.API;
1353 | var nextFn = API.next;
1354 | var prevFn = API.prev;
1355 | var prepareTxFn = API.prepareTx;
1356 | var type = $.type( opts.progressive );
1357 | var slides, scriptEl;
1358 |
1359 | if ( type == 'array' ) {
1360 | slides = opts.progressive;
1361 | }
1362 | else if ($.isFunction( opts.progressive ) ) {
1363 | slides = opts.progressive( opts );
1364 | }
1365 | else if ( type == 'string' ) {
1366 | scriptEl = $( opts.progressive );
1367 | slides = $.trim( scriptEl.html() );
1368 | if ( !slides )
1369 | return;
1370 | // is it json array?
1371 | if ( /^(\[)/.test( slides ) ) {
1372 | try {
1373 | slides = $.parseJSON( slides );
1374 | }
1375 | catch(err) {
1376 | API.log( 'error parsing progressive slides', err );
1377 | return;
1378 | }
1379 | }
1380 | else {
1381 | // plain text, split on delimeter
1382 | slides = slides.split( new RegExp( scriptEl.data('cycle-split') || '\n') );
1383 |
1384 | // #95; look for empty slide
1385 | if ( ! slides[ slides.length - 1 ] )
1386 | slides.pop();
1387 | }
1388 | }
1389 |
1390 |
1391 |
1392 | if ( prepareTxFn ) {
1393 | API.prepareTx = function( manual, fwd ) {
1394 | var index, slide;
1395 |
1396 | if ( manual || slides.length === 0 ) {
1397 | prepareTxFn.apply( opts.API, [ manual, fwd ] );
1398 | return;
1399 | }
1400 |
1401 | if ( fwd && opts.currSlide == ( opts.slideCount-1) ) {
1402 | slide = slides[ 0 ];
1403 | slides = slides.slice( 1 );
1404 | opts.container.one('cycle-slide-added', function(e, opts ) {
1405 | setTimeout(function() {
1406 | opts.API.advanceSlide( 1 );
1407 | },50);
1408 | });
1409 | opts.API.add( slide );
1410 | }
1411 | else if ( !fwd && opts.currSlide === 0 ) {
1412 | index = slides.length-1;
1413 | slide = slides[ index ];
1414 | slides = slides.slice( 0, index );
1415 | opts.container.one('cycle-slide-added', function(e, opts ) {
1416 | setTimeout(function() {
1417 | opts.currSlide = 1;
1418 | opts.API.advanceSlide( -1 );
1419 | },50);
1420 | });
1421 | opts.API.add( slide, true );
1422 | }
1423 | else {
1424 | prepareTxFn.apply( opts.API, [ manual, fwd ] );
1425 | }
1426 | };
1427 | }
1428 |
1429 | if ( nextFn ) {
1430 | API.next = function() {
1431 | var opts = this.opts();
1432 | if ( slides.length && opts.currSlide == ( opts.slideCount - 1 ) ) {
1433 | var slide = slides[ 0 ];
1434 | slides = slides.slice( 1 );
1435 | opts.container.one('cycle-slide-added', function(e, opts ) {
1436 | nextFn.apply( opts.API );
1437 | opts.container.removeClass('cycle-loading');
1438 | });
1439 | opts.container.addClass('cycle-loading');
1440 | opts.API.add( slide );
1441 | }
1442 | else {
1443 | nextFn.apply( opts.API );
1444 | }
1445 | };
1446 | }
1447 |
1448 | if ( prevFn ) {
1449 | API.prev = function() {
1450 | var opts = this.opts();
1451 | if ( slides.length && opts.currSlide === 0 ) {
1452 | var index = slides.length-1;
1453 | var slide = slides[ index ];
1454 | slides = slides.slice( 0, index );
1455 | opts.container.one('cycle-slide-added', function(e, opts ) {
1456 | opts.currSlide = 1;
1457 | opts.API.advanceSlide( -1 );
1458 | opts.container.removeClass('cycle-loading');
1459 | });
1460 | opts.container.addClass('cycle-loading');
1461 | opts.API.add( slide, true );
1462 | }
1463 | else {
1464 | prevFn.apply( opts.API );
1465 | }
1466 | };
1467 | }
1468 | });
1469 |
1470 | })(jQuery);
1471 |
1472 | /*! tmpl plugin for Cycle2; version: 20121227 */
1473 | (function($) {
1474 | "use strict";
1475 |
1476 | $.extend($.fn.cycle.defaults, {
1477 | tmplRegex: '{{((.)?.*?)}}'
1478 | });
1479 |
1480 | $.extend($.fn.cycle.API, {
1481 | tmpl: function( str, opts /*, ... */) {
1482 | var regex = new RegExp( opts.tmplRegex || $.fn.cycle.defaults.tmplRegex, 'g' );
1483 | var args = $.makeArray( arguments );
1484 | args.shift();
1485 | return str.replace(regex, function(_, str) {
1486 | var i, j, obj, prop, names = str.split('.');
1487 | for (i=0; i < args.length; i++) {
1488 | obj = args[i];
1489 | if ( ! obj )
1490 | continue;
1491 | if (names.length > 1) {
1492 | prop = obj;
1493 | for (j=0; j < names.length; j++) {
1494 | obj = prop;
1495 | prop = prop[ names[j] ] || str;
1496 | }
1497 | } else {
1498 | prop = obj[str];
1499 | }
1500 |
1501 | if ($.isFunction(prop))
1502 | return prop.apply(obj, args);
1503 | if (prop !== undefined && prop !== null && prop != str)
1504 | return prop;
1505 | }
1506 | return str;
1507 | });
1508 | }
1509 | });
1510 |
1511 | })(jQuery);
--------------------------------------------------------------------------------