diff --git a/README.mdown b/README.mdown index 8f6381bc..0b28164d 100644 --- a/README.mdown +++ b/README.mdown @@ -1,7 +1,17 @@ # FlexSlider 2 http://www.woothemes.com/flexslider/ - Copyright (c) 2012 WooThemes -Documentation guides for properties and theming are coming soon. Shortly thereafter, the download builder will be released, where you can create minified FlexSlider scripts that contain only the properties you need. It's a brave new world. +## Updates + +** Version 2.2.0** + +- Fixed event handler conflicts with devices that are both click and touch enabled. e.g., Windows 8. +- Made all slider variables public, stored in `slider.vars`. This allows manipulation of `slider.vars.minItems` and `slider.vars.maxItems` on the fly to create different fluid grids at certain breakpoints. [Check out this example demonstrating a basic technique](http://flexslider.woothemes.com/dynamic-carousel-min-max.html) +- Fixed calculations that were causing strange issues with paging and certain FlexSliders to move out of alignment. + +*Be sure to test v2.2.0 with your current slider, before pushing live, to ensure everything is playing nicely.* + +----- ## General Notes FlexSlider is no longer licensed under the MIT license. FlexSlider now shares the common licensed used for all WooThemes themes, GPLv2. @@ -10,7 +20,6 @@ In an effort to move the plugin forward, support for jQuery 1.3.2 has been dropp Your old styles and properties *might not work out of the box*. Some property names have been changed, noted below, as well as namespacing prefixes being applied to all elements. This means that `.flex-direction-nav .next` is now `.flex-direction-nav .flex-next` by default. The namespacing property is exposed, free for you to change. -## Updates No more overflow hidden woes! The plugin now generates a viewport element to handle the tedious task of working around overflow hidden. Yay! The slider element is now accessible outside of the callback API via the jQuery .data() method. Example use: `$('#slider').data('flexslider')` @@ -19,6 +28,7 @@ Helper strings have been added for performing actions quickly on FlexSlider elem - `$('#slider').flexslider("play") //Play slideshow` - `$('#slider').flexslider("pause") //Pause slideshow` +- `$('#slider').flexslider("stop") //Stop slideshow` - `$('#slider').flexslider("next") //Go to next slide` - `$('#slider').flexslider("prev") //Go to previous slide` - `$('#slider').flexslider(3) //Go fourth slide` @@ -36,6 +46,7 @@ Two new methods are available for adding/removing slides, `slider.addSlide()` an - [Basic Carousel](http://flexslider.woothemes.com/basic-carousel.html) - [Carousel with min and max ranges](http://flexslider.woothemes.com/carousel-min-max.html) - [Video with Vimeo API](http://flexslider.woothemes.com/video.html) +- [Video with Wistia API](http://flexslider.woothemes.com/video-wistia.html) ## Properties @@ -127,4 +138,7 @@ Description to be added. `added()` is a new callback event fired in the new slider.addSlide() function. ### removed: *{new}* -`removed()` is a new callback event fired in the new slider.removeSlide() function. \ No newline at end of file +`removed()` is a new callback event fired in the new slider.removeSlide() function. + +### allowOneSlide: *{new}* +Boolean. Whether or not you'd like FlexSlider to initialize as usual if only one slide is present. diff --git a/changelog.txt b/changelog.txt new file mode 100644 index 00000000..c5dd8c94 --- /dev/null +++ b/changelog.txt @@ -0,0 +1,4 @@ +FLEXSLIDER CHANGELOG + +2013.02.15 - Version 2.0 + * Added changelog.txt \ No newline at end of file diff --git a/demo/basic-carousel.html b/demo/basic-carousel.html index 66b75de7..0ec5c14c 100644 --- a/demo/basic-carousel.html +++ b/demo/basic-carousel.html @@ -4,42 +4,36 @@ FlexSlider 2 - - - - + - + - + -
- - - WooThemes - - -
-
+

FlexSlider 2

The best responsive slider. Period.

Download Flexslider +

Other Examples

@@ -131,16 +125,16 @@

Basic Carousel

- + - + - + - + - + - + \ No newline at end of file diff --git a/demo/carousel-min-max.html b/demo/carousel-min-max.html index 5d2e4ce0..e0e423e4 100644 --- a/demo/carousel-min-max.html +++ b/demo/carousel-min-max.html @@ -4,42 +4,39 @@ FlexSlider 2 - + - + - + -
- - - WooThemes - - -
-
+

FlexSlider 2

The best responsive slider. Period.

Download Flexslider +

Other Examples

@@ -134,16 +131,16 @@

Carousel With Min & Max Ranges

- + - + - + - + - + - + \ No newline at end of file diff --git a/demo/css/demo.css b/demo/css/demo.css index fb35cdb3..c5332de8 100644 --- a/demo/css/demo.css +++ b/demo/css/demo.css @@ -1,13 +1,6 @@ /* Reset Styles ***********************/ -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; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} +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; font-size: 100%; font: inherit; vertical-align: baseline; } /* HTML5 display-role reset for older browsers */ article, aside, details, figcaption, figure,footer, header, hgroup, menu, nav, section {display: block;} body {line-height: 1;} @@ -52,29 +45,40 @@ em {font-style: italic;} /* GEO - Regular */ @font-face {font-family: 'Geogrotesque-Regular';src: url('../fonts/webfonts/geo-regular/eot/11014B_0.eot');src: url('../fonts/webfonts/geo-regular/eot/11014B_0.eot?#iefix') format('embedded-opentype'),url('../fonts/webfonts/geo-regular/woff/11014B_0.woff') format('woff'),url('../fonts/webfonts/geo-regular/ttf/11014B_0.ttf') format('truetype'),url('../fonts/webfonts/geo-regular/svg/11014B_0.svg#wf') format('svg');} - - /* General ***********************/ body { - background: #fff; font-size: 14px; font-family: Helvetica, 'Arial', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; + background: #42a2ce; + font-size: 14px; + font-family: Helvetica, 'Arial', sans-serif; + -webkit-font-smoothing: antialiased; + text-rendering: optimizeLegibility; height: auto; - background: rgb(113,153,183); /* Old browsers */ - background: -moz-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%, rgba(48,100,148,1) 100%); /* FF3.6+ */ - background: -webkit-gradient(radial, top center, 0px, center center, 100%, color-stop(0%,rgba(113,153,183,1)), color-stop(100%,rgba(48,100,148,1))); /* Chrome,Safari4+ */ - background: -webkit-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Chrome10+,Safari5.1+ */ - background: -o-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* Opera 12+ */ - background: -ms-radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* IE10+ */ - background: radial-gradient(top, ellipse cover, rgba(113,153,183,1) 0%,rgba(48,100,148,1) 100%); /* W3C */ - filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#7199b7', endColorstr='#306494',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */ } -a {color: #fff; text-decoration: none;} +a { + color: #fff; + text-decoration: none; +} -h3 { margin: 0 0 8px; color: #fff; font: normal 24px Geogrotesque-semibold, Helvetica, Arial, sans-serif; text-shadow: 0 1px 0 #2F4C63; } -p {font-size: 14px; line-height: 18px;} +h3 { + margin: 0 0 8px; + color: #fff; + font: normal 24px Geogrotesque-semibold, Helvetica, Arial, sans-serif; + text-shadow: 0 1px 0 #2F4C63; +} +p { + font-size: 14px; + line-height: 18px; +} -.toggle {margin: 2px 0 0 14px; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } -.toggle li {float: left;} +/* --Clearfix */ +.cf:before, +.cf:after {content:""; display:table;} +.cf:after {clear:both;} +.cf {zoom:1;} + +.toggle { margin: 2px 0 0 14px; float: left; border-radius: 6px; -moz-border-radius: 6px; -webkit-border-radius: 6px; } +.toggle li { float: left; } .toggle li a {width: 50px; padding: 6px 0; text-align: center; display: block; text-shadow: 1px 1px 0 #fff; font-size: 12px; font-weight: 600; color: #666; -webkit-border-radius: 0 4px 4px 0; -moz-border-radius: 0 4px 4px 0; -o-border-radius: 0 4px 4px 0; border-radius: 0 4px 4px 0; background: #ffffff; /* Old browsers */ @@ -84,7 +88,6 @@ background: -webkit-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Chrome10+, background: -o-linear-gradient(top, #ffffff 0%,#ededed 100%); /* Opera 11.10+ */ background: -ms-linear-gradient(top, #ffffff 0%,#ededed 100%); /* IE10+ */ background: linear-gradient(top, #ffffff 0%,#ededed 100%); /* W3C */ -filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 ); /* IE6-9 */ box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff; -moz-box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff; @@ -95,131 +98,72 @@ box-shadow: inset 1px 1px 0 #fff, inset -1px -1px 0 #fff; .toggle li a:hover { background: #ededed; color: #222; } .toggle li a.active { background: #c8e0f3; color: #325874; cursor: default; box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.4); } -#slider {margin: 0 0 10px!important;} +.slider { margin: 50px 0 10px!important;} #carousel li {margin-right: 5px;} #carousel img {display: block; opacity: .5; cursor: pointer;} #carousel img:hover {opacity: 1;} #carousel .flex-active-slide img {opacity: 1; cursor: default;} +.button { + display: inline-block; + margin: 0; + padding: .461em 1.563em .41em; + color: #fff!important; + text-align: center; + text-decoration: none; + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.7); + text-transform: uppercase; + line-height: 1; + font-size: .9em; + cursor: pointer; + font-family: "proxima-nova", sans-serif; + border: 1px solid #1a4064; + background: #255a8c; + -webkit-border-radius: 100px; + -moz-border-radius: 100px; + border-radius: 100px; + -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15); + -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15); + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(255, 255, 255, 0.15); +} +.button:active { + -webkit-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1); + -moz-box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1); + box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1), inset 0 0 1px 1px rgba(0, 0, 0, 0.1); +} +.button.green { + text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.4); + border: 1px solid #578824; + background: #71b02f; +} +.button.green:hover { + background: #79bc32; +} /* Loading ***********************/ -.loading aside {opacity: 0;} -aside {width: 100%; float: left; opacity: 1; -webkit-transition: opacity 1s ease;} -aside h3 {float: left;} +.loading #container {opacity: 0;} +.loading:before { content: 'LOADING'; display: block; margin: 100px 0 0; text-align: center; color: #fff; font-weight: bold; font-size: 60px; opacity: 0.3; } +body {width: 100%; float: left; opacity: 1; -webkit-transition: opacity 1s ease;} /* Layout ***********************/ -#top { position: relative; z-index: 999; height:65px; padding: 5px 0; border-bottom: 1px solid #577794; - -background: rgb(226,232,239); /* Old browsers */ -background: -moz-linear-gradient(top, rgba(226,232,239,1) 0%, rgba(210,219,228,1) 100%); /* FF3.6+ */ -background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(226,232,239,1)), color-stop(100%,rgba(210,219,228,1))); /* Chrome,Safari4+ */ -background: -webkit-linear-gradient(top, rgba(226,232,239,1) 0%,rgba(210,219,228,1) 100%); /* Chrome10+,Safari5.1+ */ -background: -o-linear-gradient(top, rgba(226,232,239,1) 0%,rgba(210,219,228,1) 100%); /* Opera 11.10+ */ -background: -ms-linear-gradient(top, rgba(226,232,239,1) 0%,rgba(210,219,228,1) 100%); /* IE10+ */ -background: linear-gradient(top, rgba(226,232,239,1) 0%,rgba(210,219,228,1) 100%); /* W3C */ - - } -#top { text-align: center; } -#top .top-inner { max-width: 800px; width: auto; } -#top img { float: none; display: inline; margin-top: 12px; } -#container {padding: 60px 40px 100px; border-top: 1px solid #93b6d2;} +#container {padding: 60px 40px 100px;} header {width: 420px; float: left;} #main {margin-left: 420px; margin-top: -25px;overflow: hidden;} +aside h3 {float: left;} /* Header ***********************/ +header .logo { display: block; margin: 10px 0 30px; } header h1 { font-family: Geogrotesque-Semibold, Helvetica, Arial, sans-serif; margin: 0 0 10px; text-shadow: 0 1px 0 #2F4C63; color: #fff; font-size: 42px; } header h2 { margin: 0 0 30px; font: normal 20px Geogrotesque-regular, Helvetica, Arial, sans-serif; text-shadow: 0 1px 1px #555; color: #fff; } -header .button { margin: 0 0 50px; padding: 10px 15px 10px 15px; display: block; float: left; position: relative; -webkit-transition: all .2s ease; -moz-transition: all .2s ease; transition: all .2s ease;} -nav {clear: both;} -nav h3 {margin: 0 0 10px; padding: 0 0 3px; font-size: 18px;text-shadow: 0 1px 1px #555; color: #fff; font-family: Geogrotesque-Regular, Helvetica, Arial, sans-serif; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.5); display: inline-block; } -nav li {margin: 0 0 7px; font-size: 15px; text-transform: lowercase;} +header .button { margin: 0 0 50px; padding: 10px 15px 10px 15px; position: relative; } +h3.nav-header { width: 200px; margin: 0 0 10px; padding: 0 0 3px; font-size: 18px; text-shadow: 0 1px 1px #555; color: #fff; font-family: Geogrotesque-Regular, Helvetica, Arial, sans-serif; border-bottom: 1px solid #fff; border-bottom: 1px solid rgba(255,255,255,0.5); } +nav li {margin: 0 0 7px; font-size: 15px; } nav li a:hover, -nav li a.active {border-bottom: 1px dotted #fff; border-bottom: 1px dotted rgba(255,255,255,0.3); background: none;} -nav li a.active { cursor: default; } - -/* SyntaxHighlighter -***********************/ -.syntaxhighlighter {width: auto!important; font-size: 13px !important; line-height: 21px !important; font-family: Courier, "Courier New", monospace; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-color: #fff !important; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} -.syntaxhighlighter .string, .syntaxhighlighter .string a {color: #ff5454 !important;} -.syntaxhighlighter .line.alt1, -.syntaxhighlighter .line.alt2 {width: 100% !important; padding: 0 !important; background-color: #fff !important;} -.syntaxhighlighter .line.highlighted.alt1, -.syntaxhighlighter .line.highlighted.alt2 {background-color: #fff !important;} -.syntaxhighlighter table td.code {width: auto !important; padding: 10px 12px!important;} -.syntaxhighlighter table td.code .line {width: auto !important; padding: 0 !important;} -.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {color: #cc7ac6!important;} -.syntaxhighlighter .plain, .syntaxhighlighter .plain a {color: #888!important;} -.syntaxhighlighter .comments, .syntaxhighlighter .comments a {color: #999!important;} -.syntaxhighlighter .keyword {color: #2a93b9!important;} - -/* --Clearfix */ -.cf:before, -.cf:after {content:""; display:table;} -.cf:after {clear:both;} -.cf {zoom:1;} - -/* Media Queries -***********************/ - -.button { - display: inline-block; - margin: 2px 0; - padding: 5px 15px 3px; - border: 1px solid #336693; - border-bottom-color: #336693; - color: #fff!important; - text-align: center; - text-decoration: none !important; - text-shadow: 0 -1px 0 hsla(0,0%,0%,.3); - text-transform: uppercase; - font: bold 12px/16px sans-serif; - cursor:pointer; - - /*Border radius*/ - -webkit-border-radius: 5px; -moz-border-radius: 5px; border-radius: 5px; - - /*Background*/ - background: #274d70; /*Fallback*/ - background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #336693), color-stop(1, #274d70)); - background: -moz-linear-gradient( center top, #336693 20%, #274d70 100% ); - - /*Box shadow*/ - -webkit-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/; - -moz-box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/; - box-shadow: inset 0 1px 0 hsla(0,100%,100%,.3) /*Top*/, inset 0 0 2px hsla(0,100%,100%,.3) /*Shine*/, 0 1px 2px hsla(0, 0%, 0%, .29) /*Shadow*/; -} - -.button:hover { - color: #fff; - text-decoration: none!important; - /*Background*/ - background: #396083; /*Fallback*/ - background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #3c77ab), color-stop(1, #396083) ); - background: -moz-linear-gradient( center top, #3c77ab 20%, #396083 100% ); -} - -/* GREEN */ - -.button.green { - border: 1px solid #467d16; - border-bottom-color: #467d16; - - /*Background*/ - background: #447e12; /*Fallback*/ - background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #71b02f), color-stop(1, #447e12)); - background: -moz-linear-gradient( center top, #71b02f 20%, #447e12 100% ); -} - -.button.green:hover { - /*Background*/ - background: #508e1b; /*Fallback*/ - background: -webkit-gradient( linear, left top, left bottom, color-stop(.2, #7cbc3a), color-stop(1, #508e1b)); - background: -moz-linear-gradient( center top, #7cbc3a 20%, #508e1b 100% ); -} - +nav li.active a {border-bottom: 1px dotted #fff; border-bottom: 1px dotted rgba(255,255,255,0.3); background: none;} +nav li.active a { cursor: default; } /* Media Queries ***********************/ @@ -227,15 +171,195 @@ nav li a.active { cursor: default; } #container {padding: 35px;} header {width: 380px;} #main {margin-left: 380px;} + aside h3 { + float: none; + font-size: 20px; + } + .toggle { + margin-left: 0; + float: none; + } } @media screen and (max-width: 768px) { #container {padding: 20px 30px;} header {width: 100%; float: none; text-align: center;} - header h1 {margin: 0 auto 10px;} - header .button, - header nav {display: none;} + header img {width:120px;} + header h1 { margin: 0 auto 10px; font-size: 32px; } + header h2 { font-size: 16px; } + header .button { margin-bottom: 28px; } + #main {margin-left: 0;} + h3.nav-header { margin: 0 auto 10px; font-size: 16px; } + nav { + position: relative; + min-height: 46px; + margin-bottom: 20px; + width: 100%; + } + nav ul { + width: 260px; + padding: 0; + position: absolute; + left: 50%; + margin-left: -130px; + top: 0; + z-index: 9999; + border: 1px solid #1e5486; + background: #255a8c; + -webkit-border-radius: 3px; + -moz-border-radius: 3px; + border-radius: 3px; + -webkit-box-shadow: 0 0 5px 0 rgba(0,0,0,.2), inset 0 0 2px 0 rgba(255,255,255,0.2); + -moz-box-shadow: 0 0 5px 0 rgba(0,0,0,.2), inset 0 0 2px 0 rgba(255,255,255,0.2); + box-shadow: 0 0 5px 0 rgba(0,0,0,.2), inset 0 0 2px 0 rgba(255,255,255,0.2); + } + nav li { + display: none; /* hide all
  • items */ + margin: 0; + } + nav li a { border: none!important; text-shadow: 1px 1px 0 rgba(0,0,0,0.3); } + nav li a:hover { text-decoration: underline; } + nav .active { + display: block; /* show only current
  • item */ + } + nav a { + display: block; + padding: 10px 20px; + text-align: center; + font-size: 12px; + } + nav .active a { + background: none; + color: #fff; + position: relative; + } + nav .active a:after { + font-family: flexslider-icon; + content: '\f005'; + font-size: 13px; + position: absolute; + right: 10px; + top: 10px; + } + + /* on nav hover */ + nav ul:hover { + background: #32679a; + } + nav ul:hover li { + display: block; + margin: 0 0 5px; + } + nav ul:hover .active { + border: 1px solid #1e5486!important; + background: #255a8c; + -webkit-border-radius: 1px; + -moz-border-radius: 1px; + border-radius: 1px; + } + nav ul:hover .active a:after { + display: none; + } + } -@media screen and (max-width: 500px) { - header h1 {width: 246px; } -} \ No newline at end of file + +/* + SyntaxHighlighter - http://alexgorbatchev.com/SyntaxHighlighter + + SyntaxHighlighter is donationware. If you are using it, please donate. - http://alexgorbatchev.com/SyntaxHighlighter/donate.html + + @version - 3.0.83 (July 02 2010) + @copyright - Copyright (C) 2004-2010 Alex Gorbatchev. + @license - Dual licensed under the MIT and GPL licenses. +*/ +.syntaxhighlighter a,.syntaxhighlighter div,.syntaxhighlighter code,.syntaxhighlighter table,.syntaxhighlighter table td,.syntaxhighlighter table tr,.syntaxhighlighter table tbody,.syntaxhighlighter table thead,.syntaxhighlighter table caption,.syntaxhighlighter textarea{-moz-border-radius:0 0 0 0 !important;-webkit-border-radius:0 0 0 0 !important;background:none !important;border:0 !important;bottom:auto !important;float:none !important;height:auto !important;left:auto !important;line-height:1.1em !important;margin:0 !important;outline:0 !important;overflow:visible !important;padding:0 !important;position:static !important;right:auto !important;text-align:left !important;top:auto !important;vertical-align:baseline !important;width:auto !important;box-sizing:content-box !important;font-family:"Consolas","Bitstream Vera Sans Mono","Courier New",Courier,monospace !important;font-weight:normal !important;font-style:normal !important;font-size:1em !important;min-height:inherit !important;min-height:auto !important;} +.syntaxhighlighter{width:100% !important;margin:1em 0 1em 0 !important;position:relative !important;overflow:auto !important;font-size:1em !important;} +.syntaxhighlighter.source{overflow:hidden !important;} +.syntaxhighlighter .bold{font-weight:bold !important;} +.syntaxhighlighter .italic{font-style:italic !important;} +.syntaxhighlighter .line{white-space:pre !important;} +.syntaxhighlighter table{width:100% !important;} +.syntaxhighlighter table caption{text-align:left !important;padding:.5em 0 0.5em 1em !important;} +.syntaxhighlighter table td.code{width:100% !important;} +.syntaxhighlighter table td.code .container{position:relative !important;} +.syntaxhighlighter table td.code .container textarea{box-sizing:border-box !important;position:absolute !important;left:0 !important;top:0 !important;width:100% !important;height:100% !important;border:none !important;background:white !important;padding-left:1em !important;overflow:hidden !important;white-space:pre !important;} +.syntaxhighlighter table td.gutter .line{text-align:right !important;padding:0 0.5em 0 1em !important;} +.syntaxhighlighter table td.code .line{padding:0 1em !important;} +.syntaxhighlighter.nogutter td.code .container textarea,.syntaxhighlighter.nogutter td.code .line{padding-left:0em !important;} +.syntaxhighlighter.show{display:block !important;} +.syntaxhighlighter.collapsed table{display:none !important;} +.syntaxhighlighter.collapsed .toolbar{padding:0.1em 0.8em 0em 0.8em !important;font-size:1em !important;position:static !important;width:auto !important;height:auto !important;} +.syntaxhighlighter.collapsed .toolbar span{display:inline !important;margin-right:1em !important;} +.syntaxhighlighter.collapsed .toolbar span a{padding:0 !important;display:none !important;} +.syntaxhighlighter.collapsed .toolbar span a.expandSource{display:inline !important;} +.syntaxhighlighter .toolbar{position:absolute !important;right:1px !important;top:1px !important;width:11px !important;height:11px !important;font-size:10px !important;z-index:10 !important;} +.syntaxhighlighter .toolbar span.title{display:inline !important;} +.syntaxhighlighter .toolbar a{display:block !important;text-align:center !important;text-decoration:none !important;padding-top:1px !important;} +.syntaxhighlighter .toolbar a.expandSource{display:none !important;} +.syntaxhighlighter.ie{font-size:.9em !important;padding:1px 0 1px 0 !important;} +.syntaxhighlighter.ie .toolbar{line-height:8px !important;} +.syntaxhighlighter.ie .toolbar a{padding-top:0px !important;} +.syntaxhighlighter.printing .line.alt1 .content,.syntaxhighlighter.printing .line.alt2 .content,.syntaxhighlighter.printing .line.highlighted .number,.syntaxhighlighter.printing .line.highlighted.alt1 .content,.syntaxhighlighter.printing .line.highlighted.alt2 .content{background:none !important;} +.syntaxhighlighter.printing .line .number{color:#bbbbbb !important;} +.syntaxhighlighter.printing .line .content{color:black !important;} +.syntaxhighlighter.printing .toolbar{display:none !important;} +.syntaxhighlighter.printing a{text-decoration:none !important;} +.syntaxhighlighter.printing .plain,.syntaxhighlighter.printing .plain a{color:black !important;} +.syntaxhighlighter.printing .comments,.syntaxhighlighter.printing .comments a{color:#008200 !important;} +.syntaxhighlighter.printing .string,.syntaxhighlighter.printing .string a{color:blue !important;} +.syntaxhighlighter.printing .keyword{color:#006699 !important;font-weight:bold !important;} +.syntaxhighlighter.printing .preprocessor{color:gray !important;} +.syntaxhighlighter.printing .variable{color:#aa7700 !important;} +.syntaxhighlighter.printing .value{color:#009900 !important;} +.syntaxhighlighter.printing .functions{color:#ff1493 !important;} +.syntaxhighlighter.printing .constants{color:#0066cc !important;} +.syntaxhighlighter.printing .script{font-weight:bold !important;} +.syntaxhighlighter.printing .color1,.syntaxhighlighter.printing .color1 a{color:gray !important;} +.syntaxhighlighter.printing .color2,.syntaxhighlighter.printing .color2 a{color:#ff1493 !important;} +.syntaxhighlighter.printing .color3,.syntaxhighlighter.printing .color3 a{color:red !important;} +.syntaxhighlighter.printing .break,.syntaxhighlighter.printing .break a{color:black !important;} +/* Theming */ +.syntaxhighlighter { clear: both; width: auto!important; font-size: 13px !important; line-height: 21px !important; font-family: Courier, "Courier New", monospace; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; background-color: #fff !important; box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} +.syntaxhighlighter .string, .syntaxhighlighter .string a {color: #ff5454 !important;} +.syntaxhighlighter .line.alt1, +.syntaxhighlighter .line.alt2 {width: 100% !important; padding: 0 !important; background-color: #fff !important;} +.syntaxhighlighter .line.highlighted.alt1, +.syntaxhighlighter .line.highlighted.alt2 {background-color: #fff !important;} +.syntaxhighlighter table td.code {width: auto !important; padding: 10px 12px!important;} +.syntaxhighlighter table td.code .line {width: auto !important; padding: 0 !important;} +.syntaxhighlighter .color1, .syntaxhighlighter .color1 a {color: #cc7ac6!important;} +.syntaxhighlighter .plain, .syntaxhighlighter .plain a {color: #888!important;} +.syntaxhighlighter .comments, .syntaxhighlighter .comments a {color: #999!important;} +.syntaxhighlighter .keyword {color: #2a93b9!important;} +/**/ +.syntaxhighlighter{background-color:white !important;} +.syntaxhighlighter .line.alt1{background-color:white !important;} +.syntaxhighlighter .line.alt2{background-color:white !important;} +.syntaxhighlighter .line.highlighted.alt1,.syntaxhighlighter .line.highlighted.alt2{background-color:#e0e0e0 !important;} +.syntaxhighlighter .line.highlighted.number{color:black !important;} +.syntaxhighlighter table caption{color:black !important;} +.syntaxhighlighter .gutter{color:#afafaf !important;} +.syntaxhighlighter .gutter .line{border-right:3px solid #6ce26c !important;} +.syntaxhighlighter .gutter .line.highlighted{background-color:#6ce26c !important;color:white !important;} +.syntaxhighlighter.printing .line .content{border:none !important;} +.syntaxhighlighter.collapsed{overflow:visible !important;} +.syntaxhighlighter.collapsed .toolbar{color:blue !important;background:white !important;border:1px solid #6ce26c !important;} +.syntaxhighlighter.collapsed .toolbar a{color:blue !important;} +.syntaxhighlighter.collapsed .toolbar a:hover{color:red !important;} +.syntaxhighlighter .toolbar{color:white !important;background:#6ce26c !important;border:none !important;} +.syntaxhighlighter .toolbar a{color:white !important;} +.syntaxhighlighter .toolbar a:hover{color:black !important;} +.syntaxhighlighter .plain,.syntaxhighlighter .plain a{color:black !important;} +.syntaxhighlighter .comments,.syntaxhighlighter .comments a{color:#008200 !important;} +.syntaxhighlighter .string,.syntaxhighlighter .string a{color:blue !important;} +.syntaxhighlighter .keyword{color:#006699 !important;} +.syntaxhighlighter .preprocessor{color:gray !important;} +.syntaxhighlighter .variable{color:#aa7700 !important;} +.syntaxhighlighter .value{color:#009900 !important;} +.syntaxhighlighter .functions{color:#ff1493 !important;} +.syntaxhighlighter .constants{color:#0066cc !important;} +.syntaxhighlighter .script{font-weight:bold !important;color:#006699 !important;background-color:none !important;} +.syntaxhighlighter .color1,.syntaxhighlighter .color1 a{color:gray !important;} +.syntaxhighlighter .color2,.syntaxhighlighter .color2 a{color:#ff1493 !important;} +.syntaxhighlighter .color3,.syntaxhighlighter .color3 a{color:red !important;} +.syntaxhighlighter .keyword{font-weight:bold !important;} \ No newline at end of file diff --git a/demo/css/shCore.css b/demo/css/shCore.css deleted file mode 100644 index 34f6864a..00000000 --- a/demo/css/shCore.css +++ /dev/null @@ -1,226 +0,0 @@ -/** - * SyntaxHighlighter - * http://alexgorbatchev.com/SyntaxHighlighter - * - * SyntaxHighlighter is donationware. If you are using it, please donate. - * http://alexgorbatchev.com/SyntaxHighlighter/donate.html - * - * @version - * 3.0.83 (July 02 2010) - * - * @copyright - * Copyright (C) 2004-2010 Alex Gorbatchev. - * - * @license - * Dual licensed under the MIT and GPL licenses. - */ -.syntaxhighlighter a, -.syntaxhighlighter div, -.syntaxhighlighter code, -.syntaxhighlighter table, -.syntaxhighlighter table td, -.syntaxhighlighter table tr, -.syntaxhighlighter table tbody, -.syntaxhighlighter table thead, -.syntaxhighlighter table caption, -.syntaxhighlighter textarea { - -moz-border-radius: 0 0 0 0 !important; - -webkit-border-radius: 0 0 0 0 !important; - background: none !important; - border: 0 !important; - bottom: auto !important; - float: none !important; - height: auto !important; - left: auto !important; - line-height: 1.1em !important; - margin: 0 !important; - outline: 0 !important; - overflow: visible !important; - padding: 0 !important; - position: static !important; - right: auto !important; - text-align: left !important; - top: auto !important; - vertical-align: baseline !important; - width: auto !important; - box-sizing: content-box !important; - font-family: "Consolas", "Bitstream Vera Sans Mono", "Courier New", Courier, monospace !important; - font-weight: normal !important; - font-style: normal !important; - font-size: 1em !important; - min-height: inherit !important; - min-height: auto !important; -} - -.syntaxhighlighter { - width: 100% !important; - margin: 1em 0 1em 0 !important; - position: relative !important; - overflow: auto !important; - font-size: 1em !important; -} -.syntaxhighlighter.source { - overflow: hidden !important; -} -.syntaxhighlighter .bold { - font-weight: bold !important; -} -.syntaxhighlighter .italic { - font-style: italic !important; -} -.syntaxhighlighter .line { - white-space: pre !important; -} -.syntaxhighlighter table { - width: 100% !important; -} -.syntaxhighlighter table caption { - text-align: left !important; - padding: .5em 0 0.5em 1em !important; -} -.syntaxhighlighter table td.code { - width: 100% !important; -} -.syntaxhighlighter table td.code .container { - position: relative !important; -} -.syntaxhighlighter table td.code .container textarea { - box-sizing: border-box !important; - position: absolute !important; - left: 0 !important; - top: 0 !important; - width: 100% !important; - height: 100% !important; - border: none !important; - background: white !important; - padding-left: 1em !important; - overflow: hidden !important; - white-space: pre !important; -} -.syntaxhighlighter table td.gutter .line { - text-align: right !important; - padding: 0 0.5em 0 1em !important; -} -.syntaxhighlighter table td.code .line { - padding: 0 1em !important; -} -.syntaxhighlighter.nogutter td.code .container textarea, .syntaxhighlighter.nogutter td.code .line { - padding-left: 0em !important; -} -.syntaxhighlighter.show { - display: block !important; -} -.syntaxhighlighter.collapsed table { - display: none !important; -} -.syntaxhighlighter.collapsed .toolbar { - padding: 0.1em 0.8em 0em 0.8em !important; - font-size: 1em !important; - position: static !important; - width: auto !important; - height: auto !important; -} -.syntaxhighlighter.collapsed .toolbar span { - display: inline !important; - margin-right: 1em !important; -} -.syntaxhighlighter.collapsed .toolbar span a { - padding: 0 !important; - display: none !important; -} -.syntaxhighlighter.collapsed .toolbar span a.expandSource { - display: inline !important; -} -.syntaxhighlighter .toolbar { - position: absolute !important; - right: 1px !important; - top: 1px !important; - width: 11px !important; - height: 11px !important; - font-size: 10px !important; - z-index: 10 !important; -} -.syntaxhighlighter .toolbar span.title { - display: inline !important; -} -.syntaxhighlighter .toolbar a { - display: block !important; - text-align: center !important; - text-decoration: none !important; - padding-top: 1px !important; -} -.syntaxhighlighter .toolbar a.expandSource { - display: none !important; -} -.syntaxhighlighter.ie { - font-size: .9em !important; - padding: 1px 0 1px 0 !important; -} -.syntaxhighlighter.ie .toolbar { - line-height: 8px !important; -} -.syntaxhighlighter.ie .toolbar a { - padding-top: 0px !important; -} -.syntaxhighlighter.printing .line.alt1 .content, -.syntaxhighlighter.printing .line.alt2 .content, -.syntaxhighlighter.printing .line.highlighted .number, -.syntaxhighlighter.printing .line.highlighted.alt1 .content, -.syntaxhighlighter.printing .line.highlighted.alt2 .content { - background: none !important; -} -.syntaxhighlighter.printing .line .number { - color: #bbbbbb !important; -} -.syntaxhighlighter.printing .line .content { - color: black !important; -} -.syntaxhighlighter.printing .toolbar { - display: none !important; -} -.syntaxhighlighter.printing a { - text-decoration: none !important; -} -.syntaxhighlighter.printing .plain, .syntaxhighlighter.printing .plain a { - color: black !important; -} -.syntaxhighlighter.printing .comments, .syntaxhighlighter.printing .comments a { - color: #008200 !important; -} -.syntaxhighlighter.printing .string, .syntaxhighlighter.printing .string a { - color: blue !important; -} -.syntaxhighlighter.printing .keyword { - color: #006699 !important; - font-weight: bold !important; -} -.syntaxhighlighter.printing .preprocessor { - color: gray !important; -} -.syntaxhighlighter.printing .variable { - color: #aa7700 !important; -} -.syntaxhighlighter.printing .value { - color: #009900 !important; -} -.syntaxhighlighter.printing .functions { - color: #ff1493 !important; -} -.syntaxhighlighter.printing .constants { - color: #0066cc !important; -} -.syntaxhighlighter.printing .script { - font-weight: bold !important; -} -.syntaxhighlighter.printing .color1, .syntaxhighlighter.printing .color1 a { - color: gray !important; -} -.syntaxhighlighter.printing .color2, .syntaxhighlighter.printing .color2 a { - color: #ff1493 !important; -} -.syntaxhighlighter.printing .color3, .syntaxhighlighter.printing .color3 a { - color: red !important; -} -.syntaxhighlighter.printing .break, .syntaxhighlighter.printing .break a { - color: black !important; -} diff --git a/demo/css/shThemeDefault.css b/demo/css/shThemeDefault.css deleted file mode 100644 index 13654117..00000000 --- a/demo/css/shThemeDefault.css +++ /dev/null @@ -1,117 +0,0 @@ -/** - * SyntaxHighlighter - * http://alexgorbatchev.com/SyntaxHighlighter - * - * SyntaxHighlighter is donationware. If you are using it, please donate. - * http://alexgorbatchev.com/SyntaxHighlighter/donate.html - * - * @version - * 3.0.83 (July 02 2010) - * - * @copyright - * Copyright (C) 2004-2010 Alex Gorbatchev. - * - * @license - * Dual licensed under the MIT and GPL licenses. - */ -.syntaxhighlighter { - background-color: white !important; -} -.syntaxhighlighter .line.alt1 { - background-color: white !important; -} -.syntaxhighlighter .line.alt2 { - background-color: white !important; -} -.syntaxhighlighter .line.highlighted.alt1, .syntaxhighlighter .line.highlighted.alt2 { - background-color: #e0e0e0 !important; -} -.syntaxhighlighter .line.highlighted.number { - color: black !important; -} -.syntaxhighlighter table caption { - color: black !important; -} -.syntaxhighlighter .gutter { - color: #afafaf !important; -} -.syntaxhighlighter .gutter .line { - border-right: 3px solid #6ce26c !important; -} -.syntaxhighlighter .gutter .line.highlighted { - background-color: #6ce26c !important; - color: white !important; -} -.syntaxhighlighter.printing .line .content { - border: none !important; -} -.syntaxhighlighter.collapsed { - overflow: visible !important; -} -.syntaxhighlighter.collapsed .toolbar { - color: blue !important; - background: white !important; - border: 1px solid #6ce26c !important; -} -.syntaxhighlighter.collapsed .toolbar a { - color: blue !important; -} -.syntaxhighlighter.collapsed .toolbar a:hover { - color: red !important; -} -.syntaxhighlighter .toolbar { - color: white !important; - background: #6ce26c !important; - border: none !important; -} -.syntaxhighlighter .toolbar a { - color: white !important; -} -.syntaxhighlighter .toolbar a:hover { - color: black !important; -} -.syntaxhighlighter .plain, .syntaxhighlighter .plain a { - color: black !important; -} -.syntaxhighlighter .comments, .syntaxhighlighter .comments a { - color: #008200 !important; -} -.syntaxhighlighter .string, .syntaxhighlighter .string a { - color: blue !important; -} -.syntaxhighlighter .keyword { - color: #006699 !important; -} -.syntaxhighlighter .preprocessor { - color: gray !important; -} -.syntaxhighlighter .variable { - color: #aa7700 !important; -} -.syntaxhighlighter .value { - color: #009900 !important; -} -.syntaxhighlighter .functions { - color: #ff1493 !important; -} -.syntaxhighlighter .constants { - color: #0066cc !important; -} -.syntaxhighlighter .script { - font-weight: bold !important; - color: #006699 !important; - background-color: none !important; -} -.syntaxhighlighter .color1, .syntaxhighlighter .color1 a { - color: gray !important; -} -.syntaxhighlighter .color2, .syntaxhighlighter .color2 a { - color: #ff1493 !important; -} -.syntaxhighlighter .color3, .syntaxhighlighter .color3 a { - color: red !important; -} - -.syntaxhighlighter .keyword { - font-weight: bold !important; -} diff --git a/demo/dynamic-carousel-min-max.html b/demo/dynamic-carousel-min-max.html new file mode 100644 index 00000000..f44c4c21 --- /dev/null +++ b/demo/dynamic-carousel-min-max.html @@ -0,0 +1,222 @@ + + + + + FlexSlider 2 + + + + + + + + + + + + +
    +
    + +

    FlexSlider 2

    +

    The best responsive slider. Period.

    + Download Flexslider +

    Other Examples

    + +
    + +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    + +
    + + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/images/logo.png b/demo/images/logo.png index 5eb90ab3..6799033c 100644 Binary files a/demo/images/logo.png and b/demo/images/logo.png differ diff --git a/demo/index.html b/demo/index.html index 300ef089..34aa8d5b 100644 --- a/demo/index.html +++ b/demo/index.html @@ -4,42 +4,36 @@ FlexSlider 2 - - - - + - + - + -
    - - - WooThemes - - -
    -
    +

    FlexSlider 2

    The best responsive slider. Period.

    Download Flexslider +

    Other Examples

    @@ -104,16 +98,16 @@

    Basic Slider

    - + - + - + - + - + - + \ No newline at end of file diff --git a/demo/js/jquery.fitvid.js b/demo/js/jquery.fitvid.js index 5a26c689..49e6b85b 100644 --- a/demo/js/jquery.fitvid.js +++ b/demo/js/jquery.fitvid.js @@ -8,4 +8,4 @@ * * Date: Thu Sept 01 18:00:00 2011 -0500 */ -(function(a){a.fn.fitVids=function(b){var c={customSelector:null},d=document.createElement("div"),e=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0];return d.className="fit-vids-style",d.innerHTML="­",e.parentNode.insertBefore(d,e),b&&a.extend(c,b),this.each(function(){var b=["iframe[src^='http://player.vimeo.com']","iframe[src^='http://www.youtube.com']","iframe[src^='https://www.youtube.com']","iframe[src^='http://www.kickstarter.com']","object","embed"];c.customSelector&&b.push(c.customSelector);var d=a(this).find(b.join(","));d.each(function(){var b=a(this);if(this.tagName.toLowerCase()=="embed"&&b.parent("object").length||b.parent(".fluid-width-video-wrapper").length)return;var c=this.tagName.toLowerCase()=="object"?b.attr("height"):b.height(),d=c/b.width();if(!b.attr("id")){var e="fitvid"+Math.floor(Math.random()*999999);b.attr("id",e)}b.wrap('
    ').parent(".fluid-width-video-wrapper").css("padding-top",d*100+"%"),b.removeAttr("height").removeAttr("width")})})}})(jQuery) \ No newline at end of file +(function(a){a.fn.fitVids=function(b){var c={customSelector:null},d=document.createElement("div"),e=document.getElementsByTagName("base")[0]||document.getElementsByTagName("script")[0];return d.className="fit-vids-style",d.innerHTML="­",e.parentNode.insertBefore(d,e),b&&a.extend(c,b),this.each(function(){var b=["iframe[src^='http://player.vimeo.com']","iframe[src^='http://www.youtube.com']","iframe[src^='https://www.youtube.com']","iframe[src^='http://www.kickstarter.com']","iframe[src^='http://fast.wistia.com']","object","embed"];c.customSelector&&b.push(c.customSelector);var d=a(this).find(b.join(","));d.each(function(){var b=a(this);if(this.tagName.toLowerCase()=="embed"&&b.parent("object").length||b.parent(".fluid-width-video-wrapper").length)return;var c=this.tagName.toLowerCase()=="object"?b.attr("height"):b.height(),d=c/b.width();if(!b.attr("id")){var e="fitvid"+Math.floor(Math.random()*999999);b.attr("id",e)}b.wrap('
    ').parent(".fluid-width-video-wrapper").css("padding-top",d*100+"%"),b.removeAttr("height").removeAttr("width")})})}})(jQuery) \ No newline at end of file diff --git a/demo/thumbnail-controlnav.html b/demo/thumbnail-controlnav.html index daefb507..a4877a7e 100644 --- a/demo/thumbnail-controlnav.html +++ b/demo/thumbnail-controlnav.html @@ -4,42 +4,36 @@ FlexSlider 2 - - - - + - + - + -
    - - - WooThemes - - -
    -
    +

    FlexSlider 2

    The best responsive slider. Period.

    Download Flexslider +

    Other Examples

    @@ -105,15 +99,17 @@

    Thumbnail ControlNav Pattern

    - + - + - + - + + - + - + \ No newline at end of file diff --git a/demo/thumbnail-slider.html b/demo/thumbnail-slider.html index bb50cb72..c93ce5e4 100644 --- a/demo/thumbnail-slider.html +++ b/demo/thumbnail-slider.html @@ -4,42 +4,36 @@ FlexSlider 2 - - - - + - + - + -
    - - - WooThemes - - -
    -
    +

    FlexSlider 2

    The best responsive slider. Period.

    Download Flexslider +

    Other Examples

    @@ -148,7 +142,7 @@

    Slider with Carousel Slider as Navigation

    itemMargin: 5, asNavFor: '#slider' }); - + $('#slider').flexslider({ animation: "slide", controlNav: false, @@ -200,16 +194,16 @@

    Slider with Carousel Slider as Navigation

    - + - + - + - + - + - + \ No newline at end of file diff --git a/demo/video-wistia.html b/demo/video-wistia.html new file mode 100644 index 00000000..d0285f89 --- /dev/null +++ b/demo/video-wistia.html @@ -0,0 +1,180 @@ + + + + + FlexSlider 2 + + + + + + + + + + + + + + + + + + + +
    +
    + +

    FlexSlider 2

    +

    The best responsive slider. Period.

    + Download Flexslider +

    Other Examples

    + +
    +
    +
    +
    +
      +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    • + +
      • +
    +
    +
    + +
    + +
    + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/demo/video.html b/demo/video.html index d038ab97..5a72e67f 100644 --- a/demo/video.html +++ b/demo/video.html @@ -4,42 +4,36 @@ FlexSlider 2 - - - - + - + - + -
    - - - WooThemes - - -
    -
    +

    FlexSlider 2

    The best responsive slider. Period.

    Download Flexslider +

    Other Examples

    @@ -74,7 +68,7 @@

    Video

                 // Can also be used with $(document).ready()
             $(window).load(function() {
-            
+
               // Vimeo API nonsense
               var player = document.getElementById('player_1');
               $f(player).addEvent('ready', ready);
@@ -96,8 +90,8 @@ 
    Video
    
                   $('.flexslider').flexslider("play");
                 });
               }
-            
-              
+
+
               // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
               $(".flexslider")
                 .fitVids()
@@ -136,43 +130,43 @@ 
    Video
    - + - + - + - + - + - + - + - + \ No newline at end of file diff --git a/flexslider.css b/flexslider.css index a6f2e93b..9d941bc0 100644 --- a/flexslider.css +++ b/flexslider.css @@ -1,5 +1,5 @@ /* - * jQuery FlexSlider v2.0 + * jQuery FlexSlider v2.2.0 * http://www.woothemes.com/flexslider/ * * Copyright 2012 WooThemes @@ -9,26 +9,41 @@ * Contributing author: Tyler Smith (@mbmufffin) */ - -/* Browser Resets */ + +/* Browser Resets +*********************************/ .flex-container a:active, .flexslider a:active, .flex-container a:focus, .flexslider a:focus {outline: none;} .slides, .flex-control-nav, -.flex-direction-nav {margin: 0; padding: 0; list-style: none;} +.flex-direction-nav {margin: 0; padding: 0; list-style: none;} + +/* Icon Fonts +*********************************/ +/* Font-face Icons */ +@font-face { + font-family: 'flexslider-icon'; + src:url('fonts/flexslider-icon.eot'); + src:url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), + url('fonts/flexslider-icon.woff') format('woff'), + url('fonts/flexslider-icon.ttf') format('truetype'), + url('fonts/flexslider-icon.svg#flexslider-icon') format('svg'); + font-weight: normal; + font-style: normal; +} /* FlexSlider Necessary Styles -*********************************/ +*********************************/ .flexslider {margin: 0; padding: 0;} .flexslider .slides > li {display: none; -webkit-backface-visibility: hidden;} /* Hide the slides before the JS is loaded. Avoids image jumping */ .flexslider .slides img {width: 100%; display: block;} .flex-pauseplay span {text-transform: capitalize;} /* Clearfix for the .slides element */ -.slides:after {content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} -html[xmlns] .slides {display: block;} +.slides:after {content: "\0020"; display: block; clear: both; visibility: hidden; line-height: 0; height: 0;} +html[xmlns] .slides {display: block;} * html .slides {height: 1%;} /* No JavaScript Fallback */ @@ -36,31 +51,36 @@ html[xmlns] .slides {display: block;} * include js that eliminates this class on page load */ .no-js .slides > li:first-child {display: block;} - /* FlexSlider Default Theme *********************************/ -.flexslider {margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; box-shadow: 0 1px 4px rgba(0,0,0,.2); -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1;} -.flex-viewport {max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; transition: all 1s ease;} -.loading .flex-viewport {max-height: 300px;} -.flexslider .slides {zoom: 1;} - -.carousel li {margin-right: 5px} - +.flexslider { margin: 0 0 60px; background: #fff; border: 4px solid #fff; position: relative; -webkit-border-radius: 4px; -moz-border-radius: 4px; -o-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: 0 1px 4px rgba(0,0,0,.2); -moz-box-shadow: 0 1px 4px rgba(0,0,0,.2); -o-box-shadow: 0 1px 4px rgba(0,0,0,.2); box-shadow: 0 1px 4px rgba(0,0,0,.2); zoom: 1; } +.flex-viewport { max-height: 2000px; -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -o-transition: all 1s ease; transition: all 1s ease; } +.loading .flex-viewport { max-height: 300px; } +.flexslider .slides { zoom: 1; } +.carousel li { margin-right: 5px; } /* Direction Nav */ .flex-direction-nav {*height: 0;} -.flex-direction-nav a {width: 30px; height: 30px; margin: -20px 0 0; display: block; background: url(images/bg_direction_nav.png) no-repeat 0 0; position: absolute; top: 50%; z-index: 10; cursor: pointer; text-indent: -9999px; opacity: 0; -webkit-transition: all .3s ease;} -.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; } -.flex-direction-nav .flex-prev {left: -36px;} -.flexslider:hover .flex-next {opacity: 0.8; right: 5px;} -.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;} -.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;} -.flex-direction-nav .flex-disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;} +.flex-direction-nav a { display: block; width: 40px; height: 40px; margin: -20px 0 0; position: absolute; top: 50%; z-index: 10; overflow: hidden; opacity: 0; cursor: pointer; color: rgba(0,0,0,0.8); text-shadow: 1px 1px 0 rgba(255,255,255,0.3); -webkit-transition: all .3s ease; -moz-transition: all .3s ease; transition: all .3s ease; } +.flex-direction-nav .flex-prev { left: -50px; } +.flex-direction-nav .flex-next { right: -50px; text-align: right; } +.flexslider:hover .flex-prev { opacity: 0.7; left: 10px; } +.flexslider:hover .flex-next { opacity: 0.7; right: 10px; } +.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover { opacity: 1; } +.flex-direction-nav .flex-disabled { opacity: 0!important; filter:alpha(opacity=0); cursor: default; } +.flex-direction-nav a:before { font-family: "flexslider-icon"; font-size: 40px; display: inline-block; content: '\f001'; } +.flex-direction-nav a.flex-next:before { content: '\f002'; } + +/* Pause/Play */ +.flex-pauseplay a { display: block; width: 20px; height: 20px; position: absolute; bottom: 5px; left: 10px; opacity: 0.8; z-index: 10; overflow: hidden; cursor: pointer; color: #000; } +.flex-pauseplay a:before { font-family: "flexslider-icon"; font-size: 20px; display: inline-block; content: '\f004'; } +.flex-pauseplay a:hover { opacity: 1; } +.flex-pauseplay a.flex-play:before { content: '\f003'; } /* Control Nav */ .flex-control-nav {width: 100%; position: absolute; bottom: -40px; text-align: center;} .flex-control-nav li {margin: 0 6px; display: inline-block; zoom: 1; *display: inline;} -.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; box-shadow: inset 0 0 3px rgba(0,0,0,0.3);} +.flex-control-paging li a {width: 11px; height: 11px; display: block; background: #666; background: rgba(0,0,0,0.5); cursor: pointer; text-indent: -9999px; -webkit-border-radius: 20px; -moz-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -moz-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); -o-box-shadow: inset 0 0 3px rgba(0,0,0,0.3); box-shadow: inset 0 0 3px rgba(0,0,0,0.3); } .flex-control-paging li a:hover { background: #333; background: rgba(0,0,0,0.7); } .flex-control-paging li a.flex-active { background: #000; background: rgba(0,0,0,0.9); cursor: default; } @@ -71,6 +91,6 @@ html[xmlns] .slides {display: block;} .flex-control-thumbs .flex-active {opacity: 1; cursor: default;} @media screen and (max-width: 860px) { - .flex-direction-nav .flex-prev {opacity: 1; left: 0;} - .flex-direction-nav .flex-next {opacity: 1; right: 0;} + .flex-direction-nav .flex-prev { opacity: 1; left: 10px;} + .flex-direction-nav .flex-next { opacity: 1; right: 10px;} } \ No newline at end of file diff --git a/fonts/flexslider-icon.eot b/fonts/flexslider-icon.eot new file mode 100644 index 00000000..97c4196f Binary files /dev/null and b/fonts/flexslider-icon.eot differ diff --git a/fonts/flexslider-icon.svg b/fonts/flexslider-icon.svg new file mode 100644 index 00000000..89fd1ab8 --- /dev/null +++ b/fonts/flexslider-icon.svg @@ -0,0 +1,19 @@ + + + + +This is a custom SVG font generated by IcoMoon. + + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/flexslider-icon.ttf b/fonts/flexslider-icon.ttf new file mode 100644 index 00000000..05432986 Binary files /dev/null and b/fonts/flexslider-icon.ttf differ diff --git a/fonts/flexslider-icon.woff b/fonts/flexslider-icon.woff new file mode 100644 index 00000000..10c4eeb8 Binary files /dev/null and b/fonts/flexslider-icon.woff differ diff --git a/images/bg_direction_nav.png b/images/bg_direction_nav.png deleted file mode 100644 index de3fe04a..00000000 Binary files a/images/bg_direction_nav.png and /dev/null differ diff --git a/images/bg_play_pause.png b/images/bg_play_pause.png new file mode 100644 index 00000000..aa3eb564 Binary files /dev/null and b/images/bg_play_pause.png differ diff --git a/jquery.flexslider-min.js b/jquery.flexslider-min.js index 5749d3fe..27ebe715 100644 --- a/jquery.flexslider-min.js +++ b/jquery.flexslider-min.js @@ -1,43 +1,6 @@ /* - * jQuery FlexSlider v2.1 - * http://www.woothemes.com/flexslider/ - * + * jQuery FlexSlider v2.2.0 * Copyright 2012 WooThemes - * Free to use under the GPLv2 license. - * http://www.gnu.org/licenses/gpl-2.0.html - * - * Contributing author: Tyler Smith (@mbmufffin) + * Contributing Author: Tyler Smith */ -(function(d){d.flexslider=function(j,l){var a=d(j),c=d.extend({},d.flexslider.defaults,l),e=c.namespace,q="ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch,u=q?"touchend":"click",m="vertical"===c.direction,n=c.reverse,h=0g?a.getTarget("next"):a.getTarget("prev");a.flexAnimate(d,c.pauseOnAction)});c.pausePlay&&f.pausePlay.setup();c.slideshow&&(c.pauseOnHover&&a.hover(function(){!a.manualPlay&&!a.manualPause&&a.pause()}, -function(){!a.manualPause&&!a.manualPlay&&a.play()}),0');if(1':""+b+"",a.controlNavScaffold.append("
  • "+g+"
    • "),b++;a.controlsContainer?d(a.controlsContainer).append(a.controlNavScaffold):a.append(a.controlNavScaffold);f.controlNav.set();f.controlNav.active();a.controlNavScaffold.delegate("a, img",u,function(b){b.preventDefault();b=d(this);var g=a.controlNav.index(b);b.hasClass(e+"active")||(a.direction=g>a.currentSlide?"next":"prev",a.flexAnimate(g,c.pauseOnAction))});q&&a.controlNavScaffold.delegate("a", -"click touchstart",function(a){a.preventDefault()})},setupManual:function(){a.controlNav=a.manualControls;f.controlNav.active();a.controlNav.live(u,function(b){b.preventDefault();b=d(this);var g=a.controlNav.index(b);b.hasClass(e+"active")||(g>a.currentSlide?a.direction="next":a.direction="prev",a.flexAnimate(g,c.pauseOnAction))});q&&a.controlNav.live("click touchstart",function(a){a.preventDefault()})},set:function(){a.controlNav=d("."+e+"control-nav li "+("thumbnails"===c.controlNav?"img":"a"), -a.controlsContainer?a.controlsContainer:a)},active:function(){a.controlNav.removeClass(e+"active").eq(a.animatingTo).addClass(e+"active")},update:function(b,c){1"+a.count+"")):1===a.pagingCount?a.controlNavScaffold.find("li").remove():a.controlNav.eq(c).closest("li").remove();f.controlNav.set();1
  • '+c.prevText+'
  • '+c.nextText+"
    • ");a.controlsContainer?(d(a.controlsContainer).append(b),a.directionNav=d("."+e+"direction-nav li a",a.controlsContainer)):(a.append(b),a.directionNav=d("."+e+"direction-nav li a",a));f.directionNav.update();a.directionNav.bind(u,function(b){b.preventDefault();b=d(this).hasClass(e+"next")?a.getTarget("next"):a.getTarget("prev");a.flexAnimate(b,c.pauseOnAction)}); -q&&a.directionNav.bind("click touchstart",function(a){a.preventDefault()})},update:function(){var b=e+"disabled";1===a.pagingCount?a.directionNav.addClass(b):c.animationLoop?a.directionNav.removeClass(b):0===a.animatingTo?a.directionNav.removeClass(b).filter("."+e+"prev").addClass(b):a.animatingTo===a.last?a.directionNav.removeClass(b).filter("."+e+"next").addClass(b):a.directionNav.removeClass(b)}},pausePlay:{setup:function(){var b=d('
    ');a.controlsContainer? -(a.controlsContainer.append(b),a.pausePlay=d("."+e+"pauseplay a",a.controlsContainer)):(a.append(b),a.pausePlay=d("."+e+"pauseplay a",a));f.pausePlay.update(c.slideshow?e+"pause":e+"play");a.pausePlay.bind(u,function(b){b.preventDefault();d(this).hasClass(e+"pause")?(a.manualPause=!0,a.manualPlay=!1,a.pause()):(a.manualPause=!1,a.manualPlay=!0,a.play())});q&&a.pausePlay.bind("click touchstart",function(a){a.preventDefault()})},update:function(b){"play"===b?a.pausePlay.removeClass(e+"pause").addClass(e+ -"play").text(c.playText):a.pausePlay.removeClass(e+"play").addClass(e+"pause").text(c.pauseText)}},touch:function(){function b(b){k=m?d-b.touches[0].pageY:d-b.touches[0].pageX;q=m?Math.abs(k)k||a.currentSlide===a.last&&0Number(new Date)-l&&50r/2)?a.flexAnimate(m,c.pauseOnAction):s||a.flexAnimate(a.currentSlide,c.pauseOnAction,!0)}j.removeEventListener("touchend",g,!1);f=k=e=d=null}var d,e,f,r,k,l,q=!1;j.addEventListener("touchstart",function(k){a.animating?k.preventDefault():1===k.touches.length&&(a.pause(),r=m?a.h:a.w,l=Number(new Date),f=h&&n&&a.animatingTo=== -a.last?0:h&&n?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:h&&a.currentSlide===a.last?a.limit:h?(a.itemW+c.itemMargin)*a.move*a.currentSlide:n?(a.last-a.currentSlide+a.cloneOffset)*r:(a.currentSlide+a.cloneOffset)*r,d=m?k.touches[0].pageY:k.touches[0].pageX,e=m?k.touches[0].pageX:k.touches[0].pageY,j.addEventListener("touchmove",b,!1),j.addEventListener("touchend",g,!1))},!1)},resize:function(){!a.animating&&a.is(":visible")&&(h||a.doMath(),s?f.smoothHeight():h?(a.slides.width(a.computedW), -a.update(a.pagingCount),a.setProps()):m?(a.viewport.height(a.h),a.setProps(a.h,"setTotal")):(c.smoothHeight&&f.smoothHeight(),a.newSlides.width(a.computedW),a.setProps(a.computedW,"setTotal")))},smoothHeight:function(b){if(!m||s){var c=s?a:a.viewport;b?c.animate({height:a.slides.eq(a.animatingTo).height()},b):c.height(a.slides.eq(a.animatingTo).height())}},sync:function(b){var g=d(c.sync).data("flexslider"),e=a.animatingTo;switch(b){case "animate":g.flexAnimate(e,c.pauseOnAction,!1,!0);break;case "play":!g.playing&& -!g.asNav&&g.play();break;case "pause":g.pause()}}};a.flexAnimate=function(b,g,p,j,l){t&&1===a.pagingCount&&(a.direction=a.currentItema.w?2*c.itemMargin:c.itemMargin,b=(a.itemW+b)*a.move*a.animatingTo, -b=b>a.limit&&1!==a.visible?a.limit:b):b=0===a.currentSlide&&b===a.count-1&&c.animationLoop&&"next"!==a.direction?n?(a.count+a.cloneOffset)*r:0:a.currentSlide===a.last&&0===b&&c.animationLoop&&"prev"!==a.direction?n?0:(a.count+1)*r:n?(a.count-1-b+a.cloneOffset)*r:(b+a.cloneOffset)*r;a.setProps(b,"",c.animationSpeed);if(a.transitions){if(!c.animationLoop||!a.atEnd)a.animating=!1,a.currentSlide=a.animatingTo;a.container.unbind("webkitTransitionEnd transitionend");a.container.bind("webkitTransitionEnd transitionend", -function(){a.wrapup(r)})}else a.container.animate(a.args,c.animationSpeed,c.easing,function(){a.wrapup(r)})}c.smoothHeight&&f.smoothHeight(c.animationSpeed)}};a.wrapup=function(b){!s&&!h&&(0===a.currentSlide&&a.animatingTo===a.last&&c.animationLoop?a.setProps(b,"jumpEnd"):a.currentSlide===a.last&&(0===a.animatingTo&&c.animationLoop)&&a.setProps(b,"jumpStart"));a.animating=!1;a.currentSlide=a.animatingTo;c.after(a)};a.animateSlides=function(){a.animating||a.flexAnimate(a.getTarget("next"))};a.pause= -function(){clearInterval(a.animatedSlides);a.playing=!1;c.pausePlay&&f.pausePlay.update("play");a.syncExists&&f.sync("pause")};a.play=function(){a.animatedSlides=setInterval(a.animateSlides,c.slideshowSpeed);a.playing=!0;c.pausePlay&&f.pausePlay.update("pause");a.syncExists&&f.sync("play")};a.canAdvance=function(b,g){var d=t?a.pagingCount-1:a.last;return g?!0:t&&a.currentItem===a.count-1&&0===b&&"prev"===a.direction?!0:t&&0===a.currentItem&&b===a.pagingCount-1&&"next"!==a.direction?!1:b===a.currentSlide&& -!t?!1:c.animationLoop?!0:a.atEnd&&0===a.currentSlide&&b===d&&"next"!==a.direction?!1:a.atEnd&&a.currentSlide===d&&0===b&&"next"===a.direction?!1:!0};a.getTarget=function(b){a.direction=b;return"next"===b?a.currentSlide===a.last?0:a.currentSlide+1:0===a.currentSlide?a.last:a.currentSlide-1};a.setProps=function(b,g,d){var e,f=b?b:(a.itemW+c.itemMargin)*a.move*a.animatingTo;e=-1*function(){if(h)return"setTouch"===g?b:n&&a.animatingTo===a.last?0:n?a.limit-(a.itemW+c.itemMargin)*a.move*a.animatingTo:a.animatingTo=== -a.last?a.limit:f;switch(g){case "setTotal":return n?(a.count-1-a.currentSlide+a.cloneOffset)*b:(a.currentSlide+a.cloneOffset)*b;case "setTouch":return b;case "jumpEnd":return n?b:a.count*b;case "jumpStart":return n?a.count*b:b;default:return b}}()+"px";a.transitions&&(e=m?"translate3d(0,"+e+",0)":"translate3d("+e+",0,0)",d=void 0!==d?d/1E3+"s":"0s",a.container.css("-"+a.pfx+"-transition-duration",d));a.args[a.prop]=e;(a.transitions||void 0===d)&&a.container.css(a.args)};a.setup=function(b){if(s)a.slides.css({width:"100%", -"float":"left",marginRight:"-100%",position:"relative"}),"init"===b&&(q?a.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+c.animationSpeed/1E3+"s ease",zIndex:1}).eq(a.currentSlide).css({opacity:1,zIndex:2}):a.slides.eq(a.currentSlide).fadeIn(c.animationSpeed,c.easing)),c.smoothHeight&&f.smoothHeight();else{var g,p;"init"===b&&(a.viewport=d('
    ').css({overflow:"hidden",position:"relative"}).appendTo(a).append(a.container),a.cloneCount=0,a.cloneOffset= -0,n&&(p=d.makeArray(a.slides).reverse(),a.slides=d(p),a.container.empty().append(a.slides)));c.animationLoop&&!h&&(a.cloneCount=2,a.cloneOffset=1,"init"!==b&&a.container.find(".clone").remove(),a.container.append(a.slides.first().clone().addClass("clone")).prepend(a.slides.last().clone().addClass("clone")));a.newSlides=d(c.selector,a);g=n?a.count-1-a.currentSlide+a.cloneOffset:a.currentSlide+a.cloneOffset;m&&!h?(a.container.height(200*(a.count+a.cloneCount)+"%").css("position","absolute").width("100%"), -setTimeout(function(){a.newSlides.css({display:"block"});a.doMath();a.viewport.height(a.h);a.setProps(g*a.h,"init")},"init"===b?100:0)):(a.container.width(200*(a.count+a.cloneCount)+"%"),a.setProps(g*a.computedW,"init"),setTimeout(function(){a.doMath();a.newSlides.css({width:a.computedW,"float":"left",display:"block"});c.smoothHeight&&f.smoothHeight()},"init"===b?100:0))}h||a.slides.removeClass(e+"active-slide").eq(a.currentSlide).addClass(e+"active-slide")};a.doMath=function(){var b=a.slides.first(), -d=c.itemMargin,e=c.minItems,f=c.maxItems;a.w=a.width();a.h=b.height();a.boxPadding=b.outerWidth()-b.width();h?(a.itemT=c.itemWidth+d,a.minW=e?e*a.itemT:a.w,a.maxW=f?f*a.itemT:a.w,a.itemW=a.minW>a.w?(a.w-d*e)/e:a.maxWa.w?a.w:c.itemWidth,a.visible=Math.floor(a.w/(a.itemW+d)),a.move=0a.w?(a.itemW+2*d)*a.count-a.w- -d:(a.itemW+d)*a.count-a.w-d):(a.itemW=a.w,a.pagingCount=a.count,a.last=a.count-1);a.computedW=a.itemW-a.boxPadding};a.update=function(b,d){a.doMath();h||(ba.controlNav.length)f.controlNav.update("add");else if("remove"===d&&!h||a.pagingCounta.last&&(a.currentSlide-=1,a.animatingTo-=1), -f.controlNav.update("remove",a.last);c.directionNav&&f.directionNav.update()};a.addSlide=function(b,e){var f=d(b);a.count+=1;a.last=a.count-1;m&&n?void 0!==e?a.slides.eq(a.count-e).after(f):a.container.prepend(f):void 0!==e?a.slides.eq(e).before(f):a.container.append(f);a.update(e,"add");a.slides=d(c.selector+":not(.clone)",a);a.setup();c.added(a)};a.removeSlide=function(b){var e=isNaN(b)?a.slides.index(d(b)):b;a.count-=1;a.last=a.count-1;isNaN(b)?d(b,a.slides).remove():m&&n?a.slides.eq(a.last).remove(): -a.slides.eq(b).remove();a.doMath();a.update(e,"remove");a.slides=d(c.selector+":not(.clone)",a);a.setup();c.removed(a)};f.init()};d.flexslider.defaults={namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:!1,animationLoop:!0,smoothHeight:!1,startAt:0,slideshow:!0,slideshowSpeed:7E3,animationSpeed:600,initDelay:0,randomize:!1,pauseOnAction:!0,pauseOnHover:!1,useCSS:!0,touch:!0,video:!1,controlNav:!0,directionNav:!0,prevText:"Previous",nextText:"Next", -keyboard:!0,multipleKeyboard:!1,mousewheel:!1,pausePlay:!1,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:0,maxItems:0,move:0,start:function(){},before:function(){},after:function(){},end:function(){},added:function(){},removed:function(){}};d.fn.flexslider=function(j){void 0===j&&(j={});if("object"===typeof j)return this.each(function(){var a=d(this),c=a.find(j.selector?j.selector:".slides > li");1===c.length?(c.fadeIn(400), -j.start&&j.start(a)):void 0==a.data("flexslider")&&new d.flexslider(this,j)});var l=d(this).data("flexslider");switch(j){case "play":l.play();break;case "pause":l.pause();break;case "next":l.flexAnimate(l.getTarget("next"),!0);break;case "prev":case "previous":l.flexAnimate(l.getTarget("prev"),!0);break;default:"number"===typeof j&&l.flexAnimate(j,!0)}}})(jQuery); \ No newline at end of file + (function(e){if(typeof define==="function"&&define.amd){define(["jquery"],e)}else{e(jQuery)}})(function(e){e.flexslider=function(t,n){var r=e(t);r.vars=e.extend({},e.flexslider.defaults,n);var i=r.vars.namespace,s=("ontouchstart"in window||window.DocumentTouch&&document instanceof DocumentTouch)&&r.vars.touch,o="click touchend",u="",a,f=r.vars.direction==="vertical",l=r.vars.reverse,c=r.vars.itemWidth>0,h=r.vars.animation==="fade",p=r.vars.asNavFor!=="",d={};focused=true;e.data(t,"flexslider",r);d={init:function(){r.animating=false;r.currentSlide=r.vars.startAt;r.animatingTo=r.currentSlide;r.atEnd=r.currentSlide===0||r.currentSlide===r.last;r.containerSelector=r.vars.selector.substr(0,r.vars.selector.search(" "));r.slides=e(r.vars.selector,r);r.container=e(r.containerSelector,r);r.count=r.slides.length;r.syncExists=e(r.vars.sync).length>0;if(r.vars.animation==="slide")r.vars.animation="swing";r.prop=f?"top":"marginLeft";r.args={};r.manualPause=false;r.stopped=false;r.transitions=!r.vars.video&&!h&&r.vars.useCSS&&function(){var e=document.createElement("div"),t=["perspectiveProperty","WebkitPerspective","MozPerspective","OPerspective","msPerspective"];for(var n in t){if(e.style[t[n]]!==undefined){r.pfx=t[n].replace("Perspective","").toLowerCase();r.prop="-"+r.pfx+"-transform";return true}}return false}();if(r.vars.controlsContainer!=="")r.controlsContainer=e(r.vars.controlsContainer).length>0&&e(r.vars.controlsContainer);if(r.vars.manualControls!=="")r.manualControls=e(r.vars.manualControls).length>0&&e(r.vars.manualControls);if(r.vars.randomize){r.slides.sort(function(){return Math.round(Math.random())-.5});r.container.empty().append(r.slides)}r.doMath();if(p)d.asNav.setup();r.setup("init");if(r.vars.controlNav)d.controlNav.setup();if(r.vars.directionNav)d.directionNav.setup();if(r.vars.keyboard&&(e(r.containerSelector).length===1||r.vars.multipleKeyboard)){e(document).bind("keyup",function(e){var t=e.keyCode;if(!r.animating&&(t===39||t===37)){var n=t===39?r.getTarget("next"):t===37?r.getTarget("prev"):false;r.flexAnimate(n,r.vars.pauseOnAction)}})}if(r.vars.mousewheel){r.bind("mousewheel",function(e,t,n,i){e.preventDefault();var s=t<0?r.getTarget("next"):r.getTarget("prev");r.flexAnimate(s,r.vars.pauseOnAction)})}if(r.vars.pausePlay)d.pausePlay.setup();if(r.vars.slideshow){if(r.vars.pauseOnHover){r.hover(function(){if(!r.manualPlay&&!r.manualPause)r.pause()},function(){if(!r.manualPause&&!r.manualPlay&&!r.stopped)r.play()})}r.vars.initDelay>0?setTimeout(r.play,r.vars.initDelay):r.play()}if(s&&r.vars.touch)d.touch();if(!h||h&&r.vars.smoothHeight)e(window).bind("resize focus",d.resize);setTimeout(function(){r.vars.start(r)},200)},asNav:{setup:function(){r.asNav=true;r.animatingTo=Math.floor(r.currentSlide/r.move);r.currentItem=r.currentSlide;r.slides.removeClass(i+"active-slide").eq(r.currentItem).addClass(i+"active-slide");r.slides.click(function(t){t.preventDefault();var n=e(this),s=n.index();var o=n.offset().left-e(r).scrollLeft();if(o<=0&&n.hasClass(i+"active-slide")){r.flexAnimate(r.getTarget("prev"),true)}else if(!e(r.vars.asNavFor).data("flexslider").animating&&!n.hasClass(i+"active-slide")){r.direction=r.currentItem');if(r.pagingCount>1){for(var a=0;a':""+n+"";r.controlNavScaffold.append("
  • "+s+"
    • ");n++}}r.controlsContainer?e(r.controlsContainer).append(r.controlNavScaffold):r.append(r.controlNavScaffold);d.controlNav.set();d.controlNav.active();r.controlNavScaffold.delegate("a, img",o,function(t){t.preventDefault();if(u===""||u===t.type){var n=e(this),s=r.controlNav.index(n);if(!n.hasClass(i+"active")){r.direction=s>r.currentSlide?"next":"prev";r.flexAnimate(s,r.vars.pauseOnAction)}}if(u===""){u=t.type}d.setToClearWatchedEvent()})},setupManual:function(){r.controlNav=r.manualControls;d.controlNav.active();r.controlNav.bind(o,function(t){t.preventDefault();if(u===""||u===t.type){var n=e(this),s=r.controlNav.index(n);if(!n.hasClass(i+"active")){s>r.currentSlide?r.direction="next":r.direction="prev";r.flexAnimate(s,r.vars.pauseOnAction)}}if(u===""){u=t.type}d.setToClearWatchedEvent()})},set:function(){var t=r.vars.controlNav==="thumbnails"?"img":"a";r.controlNav=e("."+i+"control-nav li "+t,r.controlsContainer?r.controlsContainer:r)},active:function(){r.controlNav.removeClass(i+"active").eq(r.animatingTo).addClass(i+"active")},update:function(t,n){if(r.pagingCount>1&&t==="add"){r.controlNavScaffold.append(e("
  • "+r.count+"
    • "))}else if(r.pagingCount===1){r.controlNavScaffold.find("li").remove()}else{r.controlNav.eq(n).closest("li").remove()}d.controlNav.set();r.pagingCount>1&&r.pagingCount!==r.controlNav.length?r.update(n,t):d.controlNav.active()}},directionNav:{setup:function(){var t=e('");if(r.controlsContainer){e(r.controlsContainer).append(t);r.directionNav=e("."+i+"direction-nav li a",r.controlsContainer)}else{r.append(t);r.directionNav=e("."+i+"direction-nav li a",r)}d.directionNav.update();r.directionNav.bind(o,function(t){t.preventDefault();var n;if(u===""||u===t.type){n=e(this).hasClass(i+"next")?r.getTarget("next"):r.getTarget("prev");r.flexAnimate(n,r.vars.pauseOnAction)}if(u===""){u=t.type}d.setToClearWatchedEvent()})},update:function(){var e=i+"disabled";if(r.pagingCount===1){r.directionNav.addClass(e).attr("tabindex","-1")}else if(!r.vars.animationLoop){if(r.animatingTo===0){r.directionNav.removeClass(e).filter("."+i+"prev").addClass(e).attr("tabindex","-1")}else if(r.animatingTo===r.last){r.directionNav.removeClass(e).filter("."+i+"next").addClass(e).attr("tabindex","-1")}else{r.directionNav.removeClass(e).removeAttr("tabindex")}}else{r.directionNav.removeClass(e).removeAttr("tabindex")}}},pausePlay:{setup:function(){var t=e('
    ');if(r.controlsContainer){r.controlsContainer.append(t);r.pausePlay=e("."+i+"pauseplay a",r.controlsContainer)}else{r.append(t);r.pausePlay=e("."+i+"pauseplay a",r)}d.pausePlay.update(r.vars.slideshow?i+"pause":i+"play");r.pausePlay.bind(o,function(t){t.preventDefault();if(u===""||u===t.type){if(e(this).hasClass(i+"pause")){r.manualPause=true;r.manualPlay=false;r.pause()}else{r.manualPause=false;r.manualPlay=true;r.play()}}if(u===""){u=t.type}d.setToClearWatchedEvent()})},update:function(e){e==="play"?r.pausePlay.removeClass(i+"pause").addClass(i+"play").text(r.vars.playText):r.pausePlay.removeClass(i+"play").addClass(i+"pause").text(r.vars.pauseText)}},touch:function(){function p(o){if(r.animating){o.preventDefault()}else if(o.touches.length===1){r.pause();s=f?r.h:r.w;u=Number(new Date);i=c&&l&&r.animatingTo===r.last?0:c&&l?r.limit-(r.itemW+r.vars.itemMargin)*r.move*r.animatingTo:c&&r.currentSlide===r.last?r.limit:c?(r.itemW+r.vars.itemMargin)*r.move*r.currentSlide:l?(r.last-r.currentSlide+r.cloneOffset)*s:(r.currentSlide+r.cloneOffset)*s;e=f?o.touches[0].pageY:o.touches[0].pageX;n=f?o.touches[0].pageX:o.touches[0].pageY;t.addEventListener("touchmove",d,false);t.addEventListener("touchend",v,false)}}function d(t){o=f?e-t.touches[0].pageY:e-t.touches[0].pageX;a=f?Math.abs(o)500){t.preventDefault();if(!h&&r.transitions){if(!r.vars.animationLoop){o=o/(r.currentSlide===0&&o<0||r.currentSlide===r.last&&o>0?Math.abs(o)/s+2:1)}r.setProps(i+o,"setTouch")}}}function v(f){t.removeEventListener("touchmove",d,false);if(r.animatingTo===r.currentSlide&&!a&&!(o===null)){var c=l?-o:o,p=c>0?r.getTarget("next"):r.getTarget("prev");if(r.canAdvance(p)&&(Number(new Date)-u<550&&Math.abs(c)>50||Math.abs(c)>s/2)){r.flexAnimate(p,r.vars.pauseOnAction)}else{if(!h)r.flexAnimate(r.currentSlide,r.vars.pauseOnAction,true)}}t.removeEventListener("touchend",v,false);e=null;n=null;o=null;i=null}var e,n,i,s,o,u,a=false;t.addEventListener("touchstart",p,false)},resize:function(){if(!r.animating&&r.is(":visible")){if(!c)r.doMath();if(h){d.smoothHeight()}else if(c){r.slides.width(r.computedW);r.update(r.pagingCount);r.setProps()}else if(f){r.viewport.height(r.h);r.setProps(r.h,"setTotal")}else{if(r.vars.smoothHeight)d.smoothHeight();r.newSlides.width(r.computedW);r.setProps(r.computedW,"setTotal")}}},smoothHeight:function(e){if(!f||h){var t=h?r:r.viewport;e?t.animate({height:r.slides.eq(r.animatingTo).height()},e):t.height(r.slides.eq(r.animatingTo).height())}},sync:function(t){var n=e(r.vars.sync).data("flexslider"),i=r.animatingTo;switch(t){case"animate":n.flexAnimate(i,r.vars.pauseOnAction,false,true);break;case"play":if(!n.playing&&!n.asNav){n.play()}break;case"pause":n.pause();break}},setToClearWatchedEvent:function(){clearTimeout(a);a=setTimeout(function(){u=""},3e3)}};r.flexAnimate=function(t,n,o,u,a){if(p&&r.pagingCount===1)r.direction=r.currentItemr.limit&&r.visible!==1?r.limit:b}else if(r.currentSlide===0&&t===r.count-1&&r.vars.animationLoop&&r.direction!=="next"){y=l?(r.count+r.cloneOffset)*m:0}else if(r.currentSlide===r.last&&t===0&&r.vars.animationLoop&&r.direction!=="prev"){y=l?0:(r.count+1)*m}else{y=l?(r.count-1-t+r.cloneOffset)*m:(t+r.cloneOffset)*m}r.setProps(y,"",r.vars.animationSpeed);if(r.transitions){if(!r.vars.animationLoop||!r.atEnd){r.animating=false;r.currentSlide=r.animatingTo}r.container.unbind("webkitTransitionEnd transitionend");r.container.bind("webkitTransitionEnd transitionend",function(){r.wrapup(m)})}else{r.container.animate(r.args,r.vars.animationSpeed,r.vars.easing,function(){r.wrapup(m)})}}else{if(!s){r.slides.eq(r.currentSlide).css({zIndex:1}).animate({opacity:0},r.vars.animationSpeed,r.vars.easing);r.slides.eq(t).css({zIndex:2}).animate({opacity:1},r.vars.animationSpeed,r.vars.easing,r.wrapup)}else{r.slides.eq(r.currentSlide).css({opacity:0,zIndex:1});r.slides.eq(t).css({opacity:1,zIndex:2});r.animating=false;r.currentSlide=r.animatingTo}}if(r.vars.smoothHeight)d.smoothHeight(r.vars.animationSpeed)}};r.wrapup=function(e){if(!h&&!c){if(r.currentSlide===0&&r.animatingTo===r.last&&r.vars.animationLoop){r.setProps(e,"jumpEnd")}else if(r.currentSlide===r.last&&r.animatingTo===0&&r.vars.animationLoop){r.setProps(e,"jumpStart")}}r.animating=false;r.currentSlide=r.animatingTo;r.vars.after(r)};r.animateSlides=function(){if(!r.animating&&focused)r.flexAnimate(r.getTarget("next"))};r.pause=function(){clearInterval(r.animatedSlides);r.animatedSlides=null;r.playing=false;if(r.vars.pausePlay)d.pausePlay.update("play");if(r.syncExists)d.sync("pause")};r.play=function(){r.animatedSlides=r.animatedSlides||setInterval(r.animateSlides,r.vars.slideshowSpeed);r.playing=true;if(r.vars.pausePlay)d.pausePlay.update("pause");if(r.syncExists)d.sync("play")};r.stop=function(){r.pause();r.stopped=true};r.canAdvance=function(e,t){var n=p?r.pagingCount-1:r.last;return t?true:p&&r.currentItem===r.count-1&&e===0&&r.direction==="prev"?true:p&&r.currentItem===0&&e===r.pagingCount-1&&r.direction!=="next"?false:e===r.currentSlide&&!p?false:r.vars.animationLoop?true:r.atEnd&&r.currentSlide===0&&e===n&&r.direction!=="next"?false:r.atEnd&&r.currentSlide===n&&e===0&&r.direction==="next"?false:true};r.getTarget=function(e){r.direction=e;if(e==="next"){return r.currentSlide===r.last?0:r.currentSlide+1}else{return r.currentSlide===0?r.last:r.currentSlide-1}};r.setProps=function(e,t,n){var i=function(){var n=e?e:(r.itemW+r.vars.itemMargin)*r.move*r.animatingTo,i=function(){if(c){return t==="setTouch"?e:l&&r.animatingTo===r.last?0:l?r.limit-(r.itemW+r.vars.itemMargin)*r.move*r.animatingTo:r.animatingTo===r.last?r.limit:n}else{switch(t){case"setTotal":return l?(r.count-1-r.currentSlide+r.cloneOffset)*e:(r.currentSlide+r.cloneOffset)*e;case"setTouch":return l?e:e;case"jumpEnd":return l?e:r.count*e;case"jumpStart":return l?r.count*e:e;default:return e}}}();return i*-1+"px"}();if(r.transitions){i=f?"translate3d(0,"+i+",0)":"translate3d("+i+",0,0)";n=n!==undefined?n/1e3+"s":"0s";r.container.css("-"+r.pfx+"-transition-duration",n)}r.args[r.prop]=i;if(r.transitions||n===undefined)r.container.css(r.args)};r.setup=function(t){if(!h){var n,o;if(t==="init"){r.viewport=e('
    ').css({overflow:"hidden",position:"relative"}).appendTo(r).append(r.container);r.cloneCount=0;r.cloneOffset=0;if(l){o=e.makeArray(r.slides).reverse();r.slides=e(o);r.container.empty().append(r.slides)}}if(r.vars.animationLoop&&!c){r.cloneCount=2;r.cloneOffset=1;if(t!=="init")r.container.find(".clone").remove();r.container.append(r.slides.first().clone().addClass("clone").attr("aria-hidden","true")).prepend(r.slides.last().clone().addClass("clone").attr("aria-hidden","true"))}r.newSlides=e(r.vars.selector,r);n=l?r.count-1-r.currentSlide+r.cloneOffset:r.currentSlide+r.cloneOffset;if(f&&!c){r.container.height((r.count+r.cloneCount)*200+"%").css("position","absolute").width("100%");setTimeout(function(){r.newSlides.css({display:"block"});r.doMath();r.viewport.height(r.h);r.setProps(n*r.h,"init")},t==="init"?100:0)}else{r.container.width((r.count+r.cloneCount)*200+"%");r.setProps(n*r.computedW,"init");setTimeout(function(){r.doMath();r.newSlides.css({width:r.computedW,"float":"left",display:"block"});if(r.vars.smoothHeight)d.smoothHeight()},t==="init"?100:0)}}else{r.slides.css({width:"100%","float":"left",marginRight:"-100%",position:"relative"});if(t==="init"){if(!s){r.slides.css({opacity:0,display:"block",zIndex:1}).eq(r.currentSlide).css({zIndex:2}).animate({opacity:1},r.vars.animationSpeed,r.vars.easing)}else{r.slides.css({opacity:0,display:"block",webkitTransition:"opacity "+r.vars.animationSpeed/1e3+"s ease",zIndex:1}).eq(r.currentSlide).css({opacity:1,zIndex:2})}}if(r.vars.smoothHeight)d.smoothHeight()}if(!c)r.slides.removeClass(i+"active-slide").eq(r.currentSlide).addClass(i+"active-slide")};r.doMath=function(){var e=r.slides.first(),t=r.vars.itemMargin,n=r.vars.minItems,i=r.vars.maxItems;r.w=r.width();r.h=e.height();r.boxPadding=e.outerWidth()-e.width();if(c){r.itemT=r.vars.itemWidth+t;r.minW=n?n*r.itemT:r.w;r.maxW=i?i*r.itemT-t:r.w;r.itemW=r.minW>r.w?(r.w-t*(n-1))/n:r.maxWr.w?r.w:r.vars.itemWidth;r.visible=Math.floor(r.w/r.itemW);r.move=r.vars.move>0&&r.vars.mover.w?r.itemW*(r.count-1)+t*(r.count-1):(r.itemW+t)*r.count-r.w-t}else{r.itemW=r.w;r.pagingCount=r.count;r.last=r.count-1}r.computedW=r.itemW-r.boxPadding};r.update=function(e,t){r.doMath();if(!c){if(er.controlNav.length){d.controlNav.update("add")}else if(t==="remove"&&!c||r.pagingCountr.last){r.currentSlide-=1;r.animatingTo-=1}d.controlNav.update("remove",r.last)}}if(r.vars.directionNav)d.directionNav.update()};r.addSlide=function(t,n){var i=e(t);r.count+=1;r.last=r.count-1;if(f&&l){n!==undefined?r.slides.eq(r.count-n).after(i):r.container.prepend(i)}else{n!==undefined?r.slides.eq(n).before(i):r.container.append(i)}r.update(n,"add");r.slides=e(r.vars.selector+":not(.clone)",r);r.setup();r.vars.added(r)};r.removeSlide=function(t){var n=isNaN(t)?r.slides.index(e(t)):t;r.count-=1;r.last=r.count-1;if(isNaN(t)){e(t,r.slides).remove()}else{f&&l?r.slides.eq(r.last).remove():r.slides.eq(t).remove()}r.doMath();r.update(n,"remove");r.slides=e(r.vars.selector+":not(.clone)",r);r.setup();r.vars.removed(r)};d.init()};e(window).blur(function(e){focused=false}).focus(function(e){focused=true});e.flexslider.defaults={namespace:"flex-",selector:".slides > li",animation:"fade",easing:"swing",direction:"horizontal",reverse:false,animationLoop:true,smoothHeight:false,startAt:0,slideshow:true,slideshowSpeed:7e3,animationSpeed:600,initDelay:0,randomize:false,pauseOnAction:true,pauseOnHover:false,useCSS:true,touch:true,video:false,controlNav:true,directionNav:true,prevText:"Previous",nextText:"Next",keyboard:true,multipleKeyboard:false,mousewheel:false,pausePlay:false,pauseText:"Pause",playText:"Play",controlsContainer:"",manualControls:"",sync:"",asNavFor:"",itemWidth:0,itemMargin:0,minItems:0,maxItems:0,move:0,start:function(){},before:function(){},after:function(){},end:function(){},added:function(){},removed:function(){}};e.fn.flexslider=function(t){if(t===undefined)t={};if(typeof t==="object"){return this.each(function(){var n=e(this),r=t.selector?t.selector:".slides > li",i=n.find(r);if(i.length===1){i.fadeIn(400);if(t.start)t.start(n)}else if(n.data("flexslider")===undefined){new e.flexslider(this,t)}})}else{var n=e(this).data("flexslider");switch(t){case"play":n.play();break;case"pause":n.pause();break;case"stop":n.stop();break;case"next":n.flexAnimate(n.getTarget("next"),true);break;case"prev":case"previous":n.flexAnimate(n.getTarget("prev"),true);break;default:if(typeof t==="number")n.flexAnimate(t,true)}}}})(jQuery) \ No newline at end of file diff --git a/jquery.flexslider.js b/jquery.flexslider.js index 13178d99..d5563d43 100644 --- a/jquery.flexslider.js +++ b/jquery.flexslider.js @@ -1,54 +1,64 @@ /* - * jQuery FlexSlider v2.1 - * http://www.woothemes.com/flexslider/ - * + * jQuery FlexSlider v2.2.0 * Copyright 2012 WooThemes - * Free to use under the GPLv2 license. - * http://www.gnu.org/licenses/gpl-2.0.html - * - * Contributing author: Tyler Smith (@mbmufffin) + * Contributing Author: Tyler Smith */ - -;(function ($) { +; +(function ($) { //FlexSlider: Object Instance $.flexslider = function(el, options) { - var slider = $(el), - vars = $.extend({}, $.flexslider.defaults, options), - namespace = vars.namespace, - touch = ("ontouchstart" in window) || window.DocumentTouch && document instanceof DocumentTouch, - eventType = (touch) ? "touchend" : "click", - vertical = vars.direction === "vertical", - reverse = vars.reverse, - carousel = (vars.itemWidth > 0), - fade = vars.animation === "fade", - asNav = vars.asNavFor !== "", - methods = {}; + var slider = $(el); + + // making variables public + slider.vars = $.extend({}, $.flexslider.defaults, options); + + var namespace = slider.vars.namespace, + msGesture = window.navigator && window.navigator.msPointerEnabled && window.MSGesture, + touch = (( "ontouchstart" in window ) || msGesture || window.DocumentTouch && document instanceof DocumentTouch) && slider.vars.touch, + // depricating this idea, as devices are being released with both of these events + //eventType = (touch) ? "touchend" : "click", + eventType = "click touchend MSPointerUp", + watchedEvent = "", + watchedEventClearTimer, + vertical = slider.vars.direction === "vertical", + reverse = slider.vars.reverse, + carousel = (slider.vars.itemWidth > 0), + fade = slider.vars.animation === "fade", + asNav = slider.vars.asNavFor !== "", + methods = {}, + focused = true; // Store a reference to the slider object $.data(el, "flexslider", slider); - // Privat slider methods + // Private slider methods methods = { init: function() { slider.animating = false; - slider.currentSlide = vars.startAt; + // Get current slide and make sure it is a number + slider.currentSlide = parseInt( ( slider.vars.startAt ? slider.vars.startAt : 0) ); + if ( isNaN( slider.currentSlide ) ) slider.currentSlide = 0; slider.animatingTo = slider.currentSlide; slider.atEnd = (slider.currentSlide === 0 || slider.currentSlide === slider.last); - slider.containerSelector = vars.selector.substr(0,vars.selector.search(' ')); - slider.slides = $(vars.selector, slider); + slider.containerSelector = slider.vars.selector.substr(0,slider.vars.selector.search(' ')); + slider.slides = $(slider.vars.selector, slider); slider.container = $(slider.containerSelector, slider); slider.count = slider.slides.length; // SYNC: - slider.syncExists = $(vars.sync).length > 0; + slider.syncExists = $(slider.vars.sync).length > 0; // SLIDE: - if (vars.animation === "slide") vars.animation = "swing"; + if (slider.vars.animation === "slide") slider.vars.animation = "swing"; slider.prop = (vertical) ? "top" : "marginLeft"; slider.args = {}; // SLIDESHOW: slider.manualPause = false; + slider.stopped = false; + //PAUSE WHEN INVISIBLE + slider.started = false; + slider.startTimeout = null; // TOUCH/USECSS: - slider.transitions = !vars.video && !fade && vars.useCSS && (function() { + slider.transitions = !slider.vars.video && !fade && slider.vars.useCSS && (function() { var obj = document.createElement('div'), props = ['perspectiveProperty', 'WebkitPerspective', 'MozPerspective', 'OPerspective', 'msPerspective']; for (var i in props) { @@ -61,76 +71,83 @@ return false; }()); // CONTROLSCONTAINER: - if (vars.controlsContainer !== "") slider.controlsContainer = $(vars.controlsContainer).length > 0 && $(vars.controlsContainer); + if (slider.vars.controlsContainer !== "") slider.controlsContainer = $(slider.vars.controlsContainer).length > 0 && $(slider.vars.controlsContainer); // MANUAL: - if (vars.manualControls !== "") slider.manualControls = $(vars.manualControls).length > 0 && $(vars.manualControls); + if (slider.vars.manualControls !== "") slider.manualControls = $(slider.vars.manualControls).length > 0 && $(slider.vars.manualControls); // RANDOMIZE: - if (vars.randomize) { + if (slider.vars.randomize) { slider.slides.sort(function() { return (Math.round(Math.random())-0.5); }); slider.container.empty().append(slider.slides); } slider.doMath(); - // ASNAV: - if (asNav) methods.asNav.setup(); - // INIT slider.setup("init"); // CONTROLNAV: - if (vars.controlNav) methods.controlNav.setup(); + if (slider.vars.controlNav) methods.controlNav.setup(); // DIRECTIONNAV: - if (vars.directionNav) methods.directionNav.setup(); + if (slider.vars.directionNav) methods.directionNav.setup(); // KEYBOARD: - if (vars.keyboard && ($(slider.containerSelector).length === 1 || vars.multipleKeyboard)) { + if (slider.vars.keyboard && ($(slider.containerSelector).length === 1 || slider.vars.multipleKeyboard)) { $(document).bind('keyup', function(event) { var keycode = event.keyCode; if (!slider.animating && (keycode === 39 || keycode === 37)) { var target = (keycode === 39) ? slider.getTarget('next') : (keycode === 37) ? slider.getTarget('prev') : false; - slider.flexAnimate(target, vars.pauseOnAction); + slider.flexAnimate(target, slider.vars.pauseOnAction); } }); } // MOUSEWHEEL: - if (vars.mousewheel) { + if (slider.vars.mousewheel) { slider.bind('mousewheel', function(event, delta, deltaX, deltaY) { event.preventDefault(); var target = (delta < 0) ? slider.getTarget('next') : slider.getTarget('prev'); - slider.flexAnimate(target, vars.pauseOnAction); + slider.flexAnimate(target, slider.vars.pauseOnAction); }); } // PAUSEPLAY - if (vars.pausePlay) methods.pausePlay.setup(); + if (slider.vars.pausePlay) methods.pausePlay.setup(); + + //PAUSE WHEN INVISIBLE + if (slider.vars.slideshow && slider.vars.pauseInvisible) methods.pauseInvisible.init(); // SLIDSESHOW - if (vars.slideshow) { - if (vars.pauseOnHover) { + if (slider.vars.slideshow) { + if (slider.vars.pauseOnHover) { slider.hover(function() { if (!slider.manualPlay && !slider.manualPause) slider.pause(); }, function() { - if (!slider.manualPause && !slider.manualPlay) slider.play(); + if (!slider.manualPause && !slider.manualPlay && !slider.stopped) slider.play(); }); } // initialize animation - (vars.initDelay > 0) ? setTimeout(slider.play, vars.initDelay) : slider.play(); + //If we're visible, or we don't use PageVisibility API + if(!slider.vars.pauseInvisible || !methods.pauseInvisible.isHidden()) { + (slider.vars.initDelay > 0) ? slider.startTimeout = setTimeout(slider.play, slider.vars.initDelay) : slider.play(); + } } + // ASNAV: + if (asNav) methods.asNav.setup(); + // TOUCH - if (touch && vars.touch) methods.touch(); + if (touch && slider.vars.touch) methods.touch(); // FADE&&SMOOTHHEIGHT || SLIDE: - if (!fade || (fade && vars.smoothHeight)) $(window).bind("resize focus", methods.resize); + if (!fade || (fade && slider.vars.smoothHeight)) $(window).bind("resize orientationchange focus", methods.resize); + slider.find("img").attr("draggable", "false"); // API: start() Callback setTimeout(function(){ - vars.start(slider); + slider.vars.start(slider); }, 200); }, asNav: { @@ -139,15 +156,41 @@ slider.animatingTo = Math.floor(slider.currentSlide/slider.move); slider.currentItem = slider.currentSlide; slider.slides.removeClass(namespace + "active-slide").eq(slider.currentItem).addClass(namespace + "active-slide"); - slider.slides.click(function(e){ - e.preventDefault(); - var $slide = $(this), - target = $slide.index(); - if (!$(vars.asNavFor).data('flexslider').animating && !$slide.hasClass('active')) { - slider.direction = (slider.currentItem < target) ? "next" : "prev"; - slider.flexAnimate(target, vars.pauseOnAction, false, true, true); - } - }); + if(!msGesture){ + slider.slides.click(function(e){ + e.preventDefault(); + var $slide = $(this), + target = $slide.index(); + var posFromLeft = $slide.offset().left - $(slider).scrollLeft(); // Find position of slide relative to left of slider container + if( posFromLeft <= 0 && $slide.hasClass( namespace + 'active-slide' ) ) { + slider.flexAnimate(slider.getTarget("prev"), true); + } else if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass(namespace + "active-slide")) { + slider.direction = (slider.currentItem < target) ? "next" : "prev"; + slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true); + } + }); + }else{ + el._slider = slider; + slider.slides.each(function (){ + var that = this; + that._gesture = new MSGesture(); + that._gesture.target = that; + that.addEventListener("MSPointerDown", function (e){ + e.preventDefault(); + if(e.currentTarget._gesture) + e.currentTarget._gesture.addPointer(e.pointerId); + }, false); + that.addEventListener("MSGestureTap", function (e){ + e.preventDefault(); + var $slide = $(this), + target = $slide.index(); + if (!$(slider.vars.asNavFor).data('flexslider').animating && !$slide.hasClass('active')) { + slider.direction = (slider.currentItem < target) ? "next" : "prev"; + slider.flexAnimate(target, slider.vars.pauseOnAction, false, true, true); + } + }); + }); + } } }, controlNav: { @@ -159,15 +202,21 @@ } }, setupPaging: function() { - var type = (vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging', + var type = (slider.vars.controlNav === "thumbnails") ? 'control-thumbs' : 'control-paging', j = 1, - item; + item, + slide; slider.controlNavScaffold = $('
      '); if (slider.pagingCount > 1) { for (var i = 0; i < slider.pagingCount; i++) { - item = (vars.controlNav === "thumbnails") ? '' : '' + j + ''; + slide = slider.slides.eq(i); + item = (slider.vars.controlNav === "thumbnails") ? '' : '' + j + ''; + if ( 'thumbnails' === slider.vars.controlNav && true === slider.vars.thumbCaptions ) { + var captn = slide.attr( 'data-thumbcaption' ); + if ( '' != captn && undefined != captn ) item += '' + captn + ''; + } slider.controlNavScaffold.append('
    1. ' + item + '
      2. '); j++; } @@ -181,44 +230,51 @@ slider.controlNavScaffold.delegate('a, img', eventType, function(event) { event.preventDefault(); - var $this = $(this), - target = slider.controlNav.index($this); - if (!$this.hasClass(namespace + 'active')) { - slider.direction = (target > slider.currentSlide) ? "next" : "prev"; - slider.flexAnimate(target, vars.pauseOnAction); + if (watchedEvent === "" || watchedEvent === event.type) { + var $this = $(this), + target = slider.controlNav.index($this); + + if (!$this.hasClass(namespace + 'active')) { + slider.direction = (target > slider.currentSlide) ? "next" : "prev"; + slider.flexAnimate(target, slider.vars.pauseOnAction); + } + } + + // setup flags to prevent event duplication + if (watchedEvent === "") { + watchedEvent = event.type; } + methods.setToClearWatchedEvent(); + }); - // Prevent iOS click event bug - if (touch) { - slider.controlNavScaffold.delegate('a', "click touchstart", function(event) { - event.preventDefault(); - }); - } }, setupManual: function() { slider.controlNav = slider.manualControls; methods.controlNav.active(); - slider.controlNav.live(eventType, function(event) { + slider.controlNav.bind(eventType, function(event) { event.preventDefault(); - var $this = $(this), - target = slider.controlNav.index($this); - if (!$this.hasClass(namespace + 'active')) { - (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev"; - slider.flexAnimate(target, vars.pauseOnAction); + if (watchedEvent === "" || watchedEvent === event.type) { + var $this = $(this), + target = slider.controlNav.index($this); + + if (!$this.hasClass(namespace + 'active')) { + (target > slider.currentSlide) ? slider.direction = "next" : slider.direction = "prev"; + slider.flexAnimate(target, slider.vars.pauseOnAction); + } + } + + // setup flags to prevent event duplication + if (watchedEvent === "") { + watchedEvent = event.type; } + methods.setToClearWatchedEvent(); }); - // Prevent iOS click event bug - if (touch) { - slider.controlNav.live("click touchstart", function(event) { - event.preventDefault(); - }); - } }, set: function() { - var selector = (vars.controlNav === "thumbnails") ? 'img' : 'a'; + var selector = (slider.vars.controlNav === "thumbnails") ? 'img' : 'a'; slider.controlNav = $('.' + namespace + 'control-nav li ' + selector, (slider.controlsContainer) ? slider.controlsContainer : slider); }, active: function() { @@ -238,7 +294,7 @@ }, directionNav: { setup: function() { - var directionNavScaffold = $(''); + var directionNavScaffold = $(''); // CONTROLSCONTAINER: if (slider.controlsContainer) { @@ -253,30 +309,34 @@ slider.directionNav.bind(eventType, function(event) { event.preventDefault(); - var target = ($(this).hasClass(namespace + 'next')) ? slider.getTarget('next') : slider.getTarget('prev'); - slider.flexAnimate(target, vars.pauseOnAction); + var target; + + if (watchedEvent === "" || watchedEvent === event.type) { + target = ($(this).hasClass(namespace + 'next')) ? slider.getTarget('next') : slider.getTarget('prev'); + slider.flexAnimate(target, slider.vars.pauseOnAction); + } + + // setup flags to prevent event duplication + if (watchedEvent === "") { + watchedEvent = event.type; + } + methods.setToClearWatchedEvent(); }); - // Prevent iOS click event bug - if (touch) { - slider.directionNav.bind("click touchstart", function(event) { - event.preventDefault(); - }); - } }, update: function() { var disabledClass = namespace + 'disabled'; if (slider.pagingCount === 1) { - slider.directionNav.addClass(disabledClass); - } else if (!vars.animationLoop) { + slider.directionNav.addClass(disabledClass).attr('tabindex', '-1'); + } else if (!slider.vars.animationLoop) { if (slider.animatingTo === 0) { - slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "prev").addClass(disabledClass); + slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "prev").addClass(disabledClass).attr('tabindex', '-1'); } else if (slider.animatingTo === slider.last) { - slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "next").addClass(disabledClass); + slider.directionNav.removeClass(disabledClass).filter('.' + namespace + "next").addClass(disabledClass).attr('tabindex', '-1'); } else { - slider.directionNav.removeClass(disabledClass); + slider.directionNav.removeClass(disabledClass).removeAttr('tabindex'); } } else { - slider.directionNav.removeClass(disabledClass); + slider.directionNav.removeClass(disabledClass).removeAttr('tabindex'); } } }, @@ -293,29 +353,32 @@ slider.pausePlay = $('.' + namespace + 'pauseplay a', slider); } - methods.pausePlay.update((vars.slideshow) ? namespace + 'pause' : namespace + 'play'); + methods.pausePlay.update((slider.vars.slideshow) ? namespace + 'pause' : namespace + 'play'); slider.pausePlay.bind(eventType, function(event) { event.preventDefault(); - if ($(this).hasClass(namespace + 'pause')) { - slider.manualPause = true; - slider.manualPlay = false; - slider.pause(); - } else { - slider.manualPause = false; - slider.manualPlay = true; - slider.play(); + + if (watchedEvent === "" || watchedEvent === event.type) { + if ($(this).hasClass(namespace + 'pause')) { + slider.manualPause = true; + slider.manualPlay = false; + slider.pause(); + } else { + slider.manualPause = false; + slider.manualPlay = true; + slider.play(); + } + } + + // setup flags to prevent event duplication + if (watchedEvent === "") { + watchedEvent = event.type; } + methods.setToClearWatchedEvent(); }); - // Prevent iOS click event bug - if (touch) { - slider.pausePlay.bind("click touchstart", function(event) { - event.preventDefault(); - }); - } }, update: function(state) { - (state === "play") ? slider.pausePlay.removeClass(namespace + 'pause').addClass(namespace + 'play').text(vars.playText) : slider.pausePlay.removeClass(namespace + 'play').addClass(namespace + 'pause').text(vars.pauseText); + (state === "play") ? slider.pausePlay.removeClass(namespace + 'pause').addClass(namespace + 'play').html(slider.vars.playText) : slider.pausePlay.removeClass(namespace + 'play').addClass(namespace + 'pause').html(slider.vars.pauseText); } }, touch: function() { @@ -325,65 +388,169 @@ cwidth, dx, startT, - scrolling = false; - - el.addEventListener('touchstart', onTouchStart, false); - function onTouchStart(e) { - if (slider.animating) { - e.preventDefault(); - } else if (e.touches.length === 1) { - slider.pause(); - // CAROUSEL: - cwidth = (vertical) ? slider.h : slider. w; - startT = Number(new Date()); - // CAROUSEL: - offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 : - (carousel && reverse) ? slider.limit - (((slider.itemW + vars.itemMargin) * slider.move) * slider.animatingTo) : - (carousel && slider.currentSlide === slider.last) ? slider.limit : - (carousel) ? ((slider.itemW + vars.itemMargin) * slider.move) * slider.currentSlide : - (reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth; - startX = (vertical) ? e.touches[0].pageY : e.touches[0].pageX; - startY = (vertical) ? e.touches[0].pageX : e.touches[0].pageY; - - el.addEventListener('touchmove', onTouchMove, false); - el.addEventListener('touchend', onTouchEnd, false); - } - } + scrolling = false, + localX = 0, + localY = 0, + accDx = 0; + + if(!msGesture){ + el.addEventListener('touchstart', onTouchStart, false); + + function onTouchStart(e) { + if (slider.animating) { + e.preventDefault(); + } else if ( ( window.navigator.msPointerEnabled ) || e.touches.length === 1 ) { + slider.pause(); + // CAROUSEL: + cwidth = (vertical) ? slider.h : slider. w; + startT = Number(new Date()); + // CAROUSEL: + + // Local vars for X and Y points. + localX = e.touches[0].pageX; + localY = e.touches[0].pageY; + + offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 : + (carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) : + (carousel && slider.currentSlide === slider.last) ? slider.limit : + (carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide : + (reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth; + startX = (vertical) ? localY : localX; + startY = (vertical) ? localX : localY; + + el.addEventListener('touchmove', onTouchMove, false); + el.addEventListener('touchend', onTouchEnd, false); + } + } + + function onTouchMove(e) { + // Local vars for X and Y points. + + localX = e.touches[0].pageX; + localY = e.touches[0].pageY; + + dx = (vertical) ? startX - localY : startX - localX; + scrolling = (vertical) ? (Math.abs(dx) < Math.abs(localX - startY)) : (Math.abs(dx) < Math.abs(localY - startY)); - function onTouchMove(e) { - dx = (vertical) ? startX - e.touches[0].pageY : startX - e.touches[0].pageX; - scrolling = (vertical) ? (Math.abs(dx) < Math.abs(e.touches[0].pageX - startY)) : (Math.abs(dx) < Math.abs(e.touches[0].pageY - startY)); + var fxms = 500; - if (!scrolling || Number(new Date()) - startT > 500) { - e.preventDefault(); - if (!fade && slider.transitions) { - if (!vars.animationLoop) { - dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1); + if ( ! scrolling || Number( new Date() ) - startT > fxms ) { + e.preventDefault(); + if (!fade && slider.transitions) { + if (!slider.vars.animationLoop) { + dx = dx/((slider.currentSlide === 0 && dx < 0 || slider.currentSlide === slider.last && dx > 0) ? (Math.abs(dx)/cwidth+2) : 1); + } + slider.setProps(offset + dx, "setTouch"); + } } - slider.setProps(offset + dx, "setTouch"); } - } - } - function onTouchEnd(e) { - // finish the touch by undoing the touch session - el.removeEventListener('touchmove', onTouchMove, false); + function onTouchEnd(e) { + // finish the touch by undoing the touch session + el.removeEventListener('touchmove', onTouchMove, false); - if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) { - var updateDx = (reverse) ? -dx : dx, - target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev'); + if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) { + var updateDx = (reverse) ? -dx : dx, + target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev'); - if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) { - slider.flexAnimate(target, vars.pauseOnAction); - } else { - if (!fade) slider.flexAnimate(slider.currentSlide, vars.pauseOnAction, true); + if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) { + slider.flexAnimate(target, slider.vars.pauseOnAction); + } else { + if (!fade) slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true); + } + } + el.removeEventListener('touchend', onTouchEnd, false); + + startX = null; + startY = null; + dx = null; + offset = null; + } + }else{ + el.style.msTouchAction = "none"; + el._gesture = new MSGesture(); + el._gesture.target = el; + el.addEventListener("MSPointerDown", onMSPointerDown, false); + el._slider = slider; + el.addEventListener("MSGestureChange", onMSGestureChange, false); + el.addEventListener("MSGestureEnd", onMSGestureEnd, false); + + function onMSPointerDown(e){ + e.stopPropagation(); + if (slider.animating) { + e.preventDefault(); + }else{ + slider.pause(); + el._gesture.addPointer(e.pointerId); + accDx = 0; + cwidth = (vertical) ? slider.h : slider. w; + startT = Number(new Date()); + // CAROUSEL: + + offset = (carousel && reverse && slider.animatingTo === slider.last) ? 0 : + (carousel && reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) : + (carousel && slider.currentSlide === slider.last) ? slider.limit : + (carousel) ? ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.currentSlide : + (reverse) ? (slider.last - slider.currentSlide + slider.cloneOffset) * cwidth : (slider.currentSlide + slider.cloneOffset) * cwidth; + } + } + + function onMSGestureChange(e) { + e.stopPropagation(); + var slider = e.target._slider; + if(!slider){ + return; + } + var transX = -e.translationX, + transY = -e.translationY; + + //Accumulate translations. + accDx = accDx + ((vertical) ? transY : transX); + dx = accDx; + scrolling = (vertical) ? (Math.abs(accDx) < Math.abs(-transX)) : (Math.abs(accDx) < Math.abs(-transY)); + + if(e.detail === e.MSGESTURE_FLAG_INERTIA){ + setImmediate(function (){ + el._gesture.stop(); + }); + + return; + } + + if (!scrolling || Number(new Date()) - startT > 500) { + e.preventDefault(); + if (!fade && slider.transitions) { + if (!slider.vars.animationLoop) { + dx = accDx / ((slider.currentSlide === 0 && accDx < 0 || slider.currentSlide === slider.last && accDx > 0) ? (Math.abs(accDx) / cwidth + 2) : 1); + } + slider.setProps(offset + dx, "setTouch"); + } + } + } + + function onMSGestureEnd(e) { + e.stopPropagation(); + var slider = e.target._slider; + if(!slider){ + return; + } + if (slider.animatingTo === slider.currentSlide && !scrolling && !(dx === null)) { + var updateDx = (reverse) ? -dx : dx, + target = (updateDx > 0) ? slider.getTarget('next') : slider.getTarget('prev'); + + if (slider.canAdvance(target) && (Number(new Date()) - startT < 550 && Math.abs(updateDx) > 50 || Math.abs(updateDx) > cwidth/2)) { + slider.flexAnimate(target, slider.vars.pauseOnAction); + } else { + if (!fade) slider.flexAnimate(slider.currentSlide, slider.vars.pauseOnAction, true); + } + } + + startX = null; + startY = null; + dx = null; + offset = null; + accDx = 0; } - } - el.removeEventListener('touchend', onTouchEnd, false); - startX = null; - startY = null; - dx = null; - offset = null; } }, resize: function() { @@ -403,7 +570,7 @@ slider.setProps(slider.h, "setTotal"); } else { // SMOOTH HEIGHT: - if (vars.smoothHeight) methods.smoothHeight(); + if (slider.vars.smoothHeight) methods.smoothHeight(); slider.newSlides.width(slider.computedW); slider.setProps(slider.computedW, "setTotal"); } @@ -416,25 +583,62 @@ } }, sync: function(action) { - var $obj = $(vars.sync).data("flexslider"), + var $obj = $(slider.vars.sync).data("flexslider"), target = slider.animatingTo; switch (action) { - case "animate": $obj.flexAnimate(target, vars.pauseOnAction, false, true); break; + case "animate": $obj.flexAnimate(target, slider.vars.pauseOnAction, false, true); break; case "play": if (!$obj.playing && !$obj.asNav) { $obj.play(); } break; case "pause": $obj.pause(); break; } + }, + pauseInvisible: { + visProp: null, + init: function() { + var prefixes = ['webkit','moz','ms','o']; + + if ('hidden' in document) return 'hidden'; + for (var i = 0; i < prefixes.length; i++) { + if ((prefixes[i] + 'Hidden') in document) + methods.pauseInvisible.visProp = prefixes[i] + 'Hidden'; + } + if (methods.pauseInvisible.visProp) { + var evtname = methods.pauseInvisible.visProp.replace(/[H|h]idden/,'') + 'visibilitychange'; + document.addEventListener(evtname, function() { + if (methods.pauseInvisible.isHidden()) { + if(slider.startTimeout) clearTimeout(slider.startTimeout); //If clock is ticking, stop timer and prevent from starting while invisible + else slider.pause(); //Or just pause + } + else { + if(slider.started) slider.play(); //Initiated before, just play + else (slider.vars.initDelay > 0) ? setTimeout(slider.play, slider.vars.initDelay) : slider.play(); //Didn't init before: simply init or wait for it + } + }); + } + }, + isHidden: function() { + return document[methods.pauseInvisible.visProp] || false; + } + }, + setToClearWatchedEvent: function() { + clearTimeout(watchedEventClearTimer); + watchedEventClearTimer = setTimeout(function() { + watchedEvent = ""; + }, 3000); } } // public methods slider.flexAnimate = function(target, pause, override, withSync, fromNav) { + if (!slider.vars.animationLoop && target !== slider.currentSlide) { + slider.direction = (target > slider.currentSlide) ? "next" : "prev"; + } if (asNav && slider.pagingCount === 1) slider.direction = (slider.currentItem < target) ? "next" : "prev"; if (!slider.animating && (slider.canAdvance(target, fromNav) || override) && slider.is(":visible")) { if (asNav && withSync) { - var master = $(vars.asNavFor).data('flexslider'); + var master = $(slider.vars.asNavFor).data('flexslider'); slider.atEnd = target === 0 || target === slider.count - 1; master.flexAnimate(target, true, false, true, fromNav); slider.direction = (slider.currentItem < target) ? "next" : "prev"; @@ -453,17 +657,18 @@ slider.animating = true; slider.animatingTo = target; - // API: before() animation Callback - vars.before(slider); // SLIDESHOW: if (pause) slider.pause(); + // API: before() animation Callback + slider.vars.before(slider); + // SYNC: if (slider.syncExists && !fromNav) methods.sync("animate"); // CONTROLNAV - if (vars.controlNav) methods.controlNav.active(); + if (slider.vars.controlNav) methods.controlNav.active(); // !CAROUSEL: // CANDIDATE: slide active class (for add/remove slide) @@ -474,13 +679,13 @@ slider.atEnd = target === 0 || target === slider.last; // DIRECTIONNAV: - if (vars.directionNav) methods.directionNav.update(); + if (slider.vars.directionNav) methods.directionNav.update(); if (target === slider.last) { // API: end() of cycle Callback - vars.end(slider); + slider.vars.end(slider); // SLIDESHOW && !INFINITE LOOP: - if (!vars.animationLoop) slider.pause(); + if (!slider.vars.animationLoop) slider.pause(); } // SLIDE: @@ -490,19 +695,20 @@ // INFINITE LOOP / REVERSE: if (carousel) { - margin = (vars.itemWidth > slider.w) ? vars.itemMargin * 2 : vars.itemMargin; + //margin = (slider.vars.itemWidth > slider.w) ? slider.vars.itemMargin * 2 : slider.vars.itemMargin; + margin = slider.vars.itemMargin; calcNext = ((slider.itemW + margin) * slider.move) * slider.animatingTo; slideString = (calcNext > slider.limit && slider.visible !== 1) ? slider.limit : calcNext; - } else if (slider.currentSlide === 0 && target === slider.count - 1 && vars.animationLoop && slider.direction !== "next") { + } else if (slider.currentSlide === 0 && target === slider.count - 1 && slider.vars.animationLoop && slider.direction !== "next") { slideString = (reverse) ? (slider.count + slider.cloneOffset) * dimension : 0; - } else if (slider.currentSlide === slider.last && target === 0 && vars.animationLoop && slider.direction !== "prev") { + } else if (slider.currentSlide === slider.last && target === 0 && slider.vars.animationLoop && slider.direction !== "prev") { slideString = (reverse) ? 0 : (slider.count + 1) * dimension; } else { slideString = (reverse) ? ((slider.count - 1) - target + slider.cloneOffset) * dimension : (target + slider.cloneOffset) * dimension; } - slider.setProps(slideString, "", vars.animationSpeed); + slider.setProps(slideString, "", slider.vars.animationSpeed); if (slider.transitions) { - if (!vars.animationLoop || !slider.atEnd) { + if (!slider.vars.animationLoop || !slider.atEnd) { slider.animating = false; slider.currentSlide = slider.animatingTo; } @@ -511,69 +717,72 @@ slider.wrapup(dimension); }); } else { - slider.container.animate(slider.args, vars.animationSpeed, vars.easing, function(){ + slider.container.animate(slider.args, slider.vars.animationSpeed, slider.vars.easing, function(){ slider.wrapup(dimension); }); } } else { // FADE: if (!touch) { - slider.slides.eq(slider.currentSlide).fadeOut(vars.animationSpeed, vars.easing); - slider.slides.eq(target).fadeIn(vars.animationSpeed, vars.easing, slider.wrapup); + //slider.slides.eq(slider.currentSlide).fadeOut(slider.vars.animationSpeed, slider.vars.easing); + //slider.slides.eq(target).fadeIn(slider.vars.animationSpeed, slider.vars.easing, slider.wrapup); + + slider.slides.eq(slider.currentSlide).css({"zIndex": 1}).animate({"opacity": 0}, slider.vars.animationSpeed, slider.vars.easing); + slider.slides.eq(target).css({"zIndex": 2}).animate({"opacity": 1}, slider.vars.animationSpeed, slider.vars.easing, slider.wrapup); + } else { slider.slides.eq(slider.currentSlide).css({ "opacity": 0, "zIndex": 1 }); slider.slides.eq(target).css({ "opacity": 1, "zIndex": 2 }); - - slider.slides.unbind("webkitTransitionEnd transitionend"); - slider.slides.eq(slider.currentSlide).bind("webkitTransitionEnd transitionend", function() { - // API: after() animation Callback - vars.after(slider); - }); - - slider.animating = false; - slider.currentSlide = slider.animatingTo; + slider.wrapup(dimension); } } // SMOOTH HEIGHT: - if (vars.smoothHeight) methods.smoothHeight(vars.animationSpeed); + if (slider.vars.smoothHeight) methods.smoothHeight(slider.vars.animationSpeed); } } slider.wrapup = function(dimension) { // SLIDE: if (!fade && !carousel) { - if (slider.currentSlide === 0 && slider.animatingTo === slider.last && vars.animationLoop) { + if (slider.currentSlide === 0 && slider.animatingTo === slider.last && slider.vars.animationLoop) { slider.setProps(dimension, "jumpEnd"); - } else if (slider.currentSlide === slider.last && slider.animatingTo === 0 && vars.animationLoop) { + } else if (slider.currentSlide === slider.last && slider.animatingTo === 0 && slider.vars.animationLoop) { slider.setProps(dimension, "jumpStart"); } } slider.animating = false; slider.currentSlide = slider.animatingTo; // API: after() animation Callback - vars.after(slider); + slider.vars.after(slider); } // SLIDESHOW: slider.animateSlides = function() { - if (!slider.animating) slider.flexAnimate(slider.getTarget("next")); + if (!slider.animating && focused ) slider.flexAnimate(slider.getTarget("next")); } // SLIDESHOW: slider.pause = function() { clearInterval(slider.animatedSlides); + slider.animatedSlides = null; slider.playing = false; // PAUSEPLAY: - if (vars.pausePlay) methods.pausePlay.update("play"); + if (slider.vars.pausePlay) methods.pausePlay.update("play"); // SYNC: if (slider.syncExists) methods.sync("pause"); } // SLIDESHOW: slider.play = function() { - slider.animatedSlides = setInterval(slider.animateSlides, vars.slideshowSpeed); - slider.playing = true; + if (slider.playing) clearInterval(slider.animatedSlides); + slider.animatedSlides = slider.animatedSlides || setInterval(slider.animateSlides, slider.vars.slideshowSpeed); + slider.started = slider.playing = true; // PAUSEPLAY: - if (vars.pausePlay) methods.pausePlay.update("pause"); + if (slider.vars.pausePlay) methods.pausePlay.update("pause"); // SYNC: if (slider.syncExists) methods.sync("play"); } + // STOP: + slider.stop = function () { + slider.pause(); + slider.stopped = true; + } slider.canAdvance = function(target, fromNav) { // ASNAV: var last = (asNav) ? slider.pagingCount - 1 : slider.last; @@ -581,7 +790,7 @@ (asNav && slider.currentItem === slider.count - 1 && target === 0 && slider.direction === "prev") ? true : (asNav && slider.currentItem === 0 && target === slider.pagingCount - 1 && slider.direction !== "next") ? false : (target === slider.currentSlide && !asNav) ? false : - (vars.animationLoop) ? true : + (slider.vars.animationLoop) ? true : (slider.atEnd && slider.currentSlide === 0 && target === last && slider.direction !== "next") ? false : (slider.atEnd && slider.currentSlide === last && target === 0 && slider.direction === "next") ? false : true; @@ -598,12 +807,12 @@ // SLIDE: slider.setProps = function(pos, special, dur) { var target = (function() { - var posCheck = (pos) ? pos : ((slider.itemW + vars.itemMargin) * slider.move) * slider.animatingTo, + var posCheck = (pos) ? pos : ((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo, posCalc = (function() { if (carousel) { return (special === "setTouch") ? pos : (reverse && slider.animatingTo === slider.last) ? 0 : - (reverse) ? slider.limit - (((slider.itemW + vars.itemMargin) * slider.move) * slider.animatingTo) : + (reverse) ? slider.limit - (((slider.itemW + slider.vars.itemMargin) * slider.move) * slider.animatingTo) : (slider.animatingTo === slider.last) ? slider.limit : posCheck; } else { switch (special) { @@ -615,6 +824,7 @@ } } }()); + return (posCalc * -1) + "px"; }()); @@ -646,14 +856,14 @@ } } // INFINITE LOOP && !CAROUSEL: - if (vars.animationLoop && !carousel) { + if (slider.vars.animationLoop && !carousel) { slider.cloneCount = 2; slider.cloneOffset = 1; // clear out old clones if (type !== "init") slider.container.find('.clone').remove(); - slider.container.append(slider.slides.first().clone().addClass('clone')).prepend(slider.slides.last().clone().addClass('clone')); + slider.container.append(slider.slides.first().clone().addClass('clone').attr('aria-hidden', 'true')).prepend(slider.slides.last().clone().addClass('clone').attr('aria-hidden', 'true')); } - slider.newSlides = $(vars.selector, slider); + slider.newSlides = $(slider.vars.selector, slider); sliderOffset = (reverse) ? slider.count - 1 - slider.currentSlide + slider.cloneOffset : slider.currentSlide + slider.cloneOffset; // VERTICAL: @@ -672,50 +882,53 @@ slider.doMath(); slider.newSlides.css({"width": slider.computedW, "float": "left", "display": "block"}); // SMOOTH HEIGHT: - if (vars.smoothHeight) methods.smoothHeight(); + if (slider.vars.smoothHeight) methods.smoothHeight(); }, (type === "init") ? 100 : 0); } } else { // FADE: slider.slides.css({"width": "100%", "float": "left", "marginRight": "-100%", "position": "relative"}); if (type === "init") { if (!touch) { - slider.slides.eq(slider.currentSlide).fadeIn(vars.animationSpeed, vars.easing); + //slider.slides.eq(slider.currentSlide).fadeIn(slider.vars.animationSpeed, slider.vars.easing); + slider.slides.css({ "opacity": 0, "display": "block", "zIndex": 1 }).eq(slider.currentSlide).css({"zIndex": 2}).animate({"opacity": 1},slider.vars.animationSpeed,slider.vars.easing); } else { - slider.slides.css({ "opacity": 0, "display": "block", "webkitTransition": "opacity " + vars.animationSpeed / 1000 + "s ease", "zIndex": 1 }).eq(slider.currentSlide).css({ "opacity": 1, "zIndex": 2}); + slider.slides.css({ "opacity": 0, "display": "block", "webkitTransition": "opacity " + slider.vars.animationSpeed / 1000 + "s ease", "zIndex": 1 }).eq(slider.currentSlide).css({ "opacity": 1, "zIndex": 2}); } } // SMOOTH HEIGHT: - if (vars.smoothHeight) methods.smoothHeight(); + if (slider.vars.smoothHeight) methods.smoothHeight(); } // !CAROUSEL: // CANDIDATE: active slide if (!carousel) slider.slides.removeClass(namespace + "active-slide").eq(slider.currentSlide).addClass(namespace + "active-slide"); } + slider.doMath = function() { var slide = slider.slides.first(), - slideMargin = vars.itemMargin, - minItems = vars.minItems, - maxItems = vars.maxItems; + slideMargin = slider.vars.itemMargin, + minItems = slider.vars.minItems, + maxItems = slider.vars.maxItems; - slider.w = slider.width(); + slider.w = (slider.viewport===undefined) ? slider.width() : slider.viewport.width(); slider.h = slide.height(); slider.boxPadding = slide.outerWidth() - slide.width(); // CAROUSEL: if (carousel) { - slider.itemT = vars.itemWidth + slideMargin; + slider.itemT = slider.vars.itemWidth + slideMargin; slider.minW = (minItems) ? minItems * slider.itemT : slider.w; - slider.maxW = (maxItems) ? maxItems * slider.itemT : slider.w; - slider.itemW = (slider.minW > slider.w) ? (slider.w - (slideMargin * minItems))/minItems : - (slider.maxW < slider.w) ? (slider.w - (slideMargin * maxItems))/maxItems : - (vars.itemWidth > slider.w) ? slider.w : vars.itemWidth; - slider.visible = Math.floor(slider.w/(slider.itemW + slideMargin)); - slider.move = (vars.move > 0 && vars.move < slider.visible ) ? vars.move : slider.visible; + slider.maxW = (maxItems) ? (maxItems * slider.itemT) - slideMargin : slider.w; + slider.itemW = (slider.minW > slider.w) ? (slider.w - (slideMargin * (minItems - 1)))/minItems : + (slider.maxW < slider.w) ? (slider.w - (slideMargin * (maxItems - 1)))/maxItems : + (slider.vars.itemWidth > slider.w) ? slider.w : slider.vars.itemWidth; + + slider.visible = Math.floor(slider.w/(slider.itemW)); + slider.move = (slider.vars.move > 0 && slider.vars.move < slider.visible ) ? slider.vars.move : slider.visible; slider.pagingCount = Math.ceil(((slider.count - slider.visible)/slider.move) + 1); slider.last = slider.pagingCount - 1; slider.limit = (slider.pagingCount === 1) ? 0 : - (vars.itemWidth > slider.w) ? ((slider.itemW + (slideMargin * 2)) * slider.count) - slider.w - slideMargin : ((slider.itemW + slideMargin) * slider.count) - slider.w - slideMargin; + (slider.vars.itemWidth > slider.w) ? (slider.itemW * (slider.count - 1)) + (slideMargin * (slider.count - 1)) : ((slider.itemW + slideMargin) * slider.count) - slider.w - slideMargin; } else { slider.itemW = slider.w; slider.pagingCount = slider.count; @@ -724,6 +937,7 @@ slider.computedW = slider.itemW - slider.boxPadding; } + slider.update = function(pos, action) { slider.doMath(); @@ -738,7 +952,7 @@ } // update controlNav - if (vars.controlNav && !slider.manualControls) { + if (slider.vars.controlNav && !slider.manualControls) { if ((action === "add" && !carousel) || slider.pagingCount > slider.controlNav.length) { methods.controlNav.update("add"); } else if ((action === "remove" && !carousel) || slider.pagingCount < slider.controlNav.length) { @@ -750,7 +964,7 @@ } } // update directionNav - if (vars.directionNav) methods.directionNav.update(); + if (slider.vars.directionNav) methods.directionNav.update(); } @@ -771,12 +985,12 @@ slider.update(pos, "add"); // update slider.slides - slider.slides = $(vars.selector + ':not(.clone)', slider); + slider.slides = $(slider.vars.selector + ':not(.clone)', slider); // re-setup the slider to accomdate new slide slider.setup(); //FlexSlider: added() Callback - vars.added(slider); + slider.vars.added(slider); } slider.removeSlide = function(obj) { var pos = (isNaN(obj)) ? slider.slides.index($(obj)) : obj; @@ -797,27 +1011,34 @@ slider.update(pos, "remove"); // update slider.slides - slider.slides = $(vars.selector + ':not(.clone)', slider); + slider.slides = $(slider.vars.selector + ':not(.clone)', slider); // re-setup the slider to accomdate new slide slider.setup(); // FlexSlider: removed() Callback - vars.removed(slider); + slider.vars.removed(slider); } //FlexSlider: Initialize methods.init(); } + // Ensure the slider isn't focussed if the window loses focus. + $( window ).blur( function ( e ) { + focused = false; + }).focus( function ( e ) { + focused = true; + }); + //FlexSlider: Default Settings $.flexslider.defaults = { namespace: "flex-", //{NEW} String: Prefix string attached to the class of every element generated by the plugin selector: ".slides > li", //{NEW} Selector: Must match a simple pattern. '{container} > {slide}' -- Ignore pattern at your own peril animation: "fade", //String: Select your animation type, "fade" or "slide" - easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! + easing: "swing", //{NEW} String: Determines the easing method used in jQuery transitions. jQuery easing plugin is supported! direction: "horizontal", //String: Select the sliding direction, "horizontal" or "vertical" reverse: false, //{NEW} Boolean: Reverse the animation direction - animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end + animationLoop: true, //Boolean: Should the animation loop? If false, directionNav will received "disable" classes at either end smoothHeight: false, //{NEW} Boolean: Allow height of the slider to animate smoothly in horizontal mode startAt: 0, //Integer: The slide that the slider should start on. Array notation (0 = first slide) slideshow: true, //Boolean: Animate slider automatically @@ -825,10 +1046,12 @@ animationSpeed: 600, //Integer: Set the speed of animations, in milliseconds initDelay: 0, //{NEW} Integer: Set an initialization delay, in milliseconds randomize: false, //Boolean: Randomize slide order + thumbCaptions: false, //Boolean: Whether or not to put captions on thumbnails when using the "thumbnails" controlNav. // Usability features pauseOnAction: true, //Boolean: Pause the slideshow when interacting with control elements, highly recommended. pauseOnHover: false, //Boolean: Pause the slideshow when hovering over slider, then resume when no longer hovering + pauseInvisible: true, //{NEW} Boolean: Pause the slideshow when tab is invisible, resume when visible. Provides better UX, lower CPU usage. useCSS: true, //{NEW} Boolean: Slider will use CSS3 transitions if available touch: true, //{NEW} Boolean: Allow touch swipe navigation of the slider on touch-enabled devices video: false, //{NEW} Boolean: If using video in the slider, will prevent CSS3 3D Transforms to avoid graphical glitches @@ -856,9 +1079,10 @@ // Carousel Options itemWidth: 0, //{NEW} Integer: Box-model width of individual carousel items, including horizontal borders and padding. itemMargin: 0, //{NEW} Integer: Margin between carousel items. - minItems: 0, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this. + minItems: 1, //{NEW} Integer: Minimum number of carousel items that should be visible. Items will resize fluidly when below this. maxItems: 0, //{NEW} Integer: Maxmimum number of carousel items that should be visible. Items will resize fluidly when above this limit. move: 0, //{NEW} Integer: Number of carousel items that should move on animation. If 0, slider will move all visible items. + allowOneSlide: true, //{NEW} Boolean: Whether or not to allow a slider comprised of a single slide // Callback API start: function(){}, //Callback: function(slider) - Fires when the slider loads the first slide @@ -880,10 +1104,10 @@ selector = (options.selector) ? options.selector : ".slides > li", $slides = $this.find(selector); - if ($slides.length === 1) { + if ( ( $slides.length === 1 && options.allowOneSlide === true ) || $slides.length === 0 ) { $slides.fadeIn(400); if (options.start) options.start($this); - } else if ($this.data('flexslider') == undefined) { + } else if ($this.data('flexslider') === undefined) { new $.flexslider(this, options); } }); @@ -893,6 +1117,7 @@ switch (options) { case "play": $slider.play(); break; case "pause": $slider.pause(); break; + case "stop": $slider.stop(); break; case "next": $slider.flexAnimate($slider.getTarget("next"), true); break; case "prev": case "previous": $slider.flexAnimate($slider.getTarget("prev"), true); break; @@ -900,5 +1125,4 @@ } } } - })(jQuery);