Merge pull request #799 from woothemes/release-2-2-0

Release 2.2.0

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.
+`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.

changelog.txt

@@ -0,0 +1,4 @@
+FLEXSLIDER CHANGELOG
+
+2013.02.15 - Version 2.0
+ * Added changelog.txt

demo/basic-carousel.html

@@ -4,42 +4,36 @@
 	<meta content="charset=utf-8">
 	<title>FlexSlider 2</title>
 	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
-
-  <!-- Syntax Highlighter -->
-	<link href="css/shCore.css" rel="stylesheet" type="text/css" />
-  <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
+
   <!-- Demo CSS -->
 	<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
 	<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
-	
+
 	<!-- Modernizr -->
   <script src="js/modernizr.js"></script>
-  
+
 </head>
 <body class="loading">
 
-	<div id="top">
-
-		<a href="http://www.woothemes.com" title="WooThemes">
-			<img src="images/logo.png" alt="WooThemes" />
-		</a>
-
-	</div>
-
   <div id="container" class="cf">
     <header role="navigation">
+      <a class="logo" href="http://www.woothemes.com" title="WooThemes">
+        <img src="images/logo.png" alt="WooThemes" />
+	  </a>
       <h1>FlexSlider 2</h1>
       <h2>The best responsive slider. Period.</h2>
       <a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
+      <h3 class="header-nav">Other Examples</h3>
       <nav>
-        <h3>Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
-          <li><a class="active" href="basic-carousel.html">Basic Carousel</a></li>
-          <li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>    
-          <li><a href="video.html">Video & the api (vimeo)</a></li>     
+          <li class="active"><a href="basic-carousel.html">Basic Carousel</a></li>
+          <li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
+          <li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
+          <li><a href="video.html">Video & the api (vimeo)</a></li>
+          <li><a href="video-wistia.html">Video & the api (wistia)</a></li>
         </ul>
       </nav>
     </header>
@@ -131,16 +125,16 @@ <h3>Basic Carousel</h3>
         </div>
       </aside>
     </div>
-  
+
   </div>
-  
+
   <!-- jQuery -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
-  
+
   <!-- FlexSlider -->
   <script defer src="../jquery.flexslider.js"></script>
-  
+
   <script type="text/javascript">
     $(function(){
       SyntaxHighlighter.all();
@@ -151,6 +145,7 @@ <h3>Basic Carousel</h3>
         animationLoop: false,
         itemWidth: 210,
         itemMargin: 5,
+        pausePlay: true,
         start: function(slider){
           $('body').removeClass('loading');
         }
@@ -163,11 +158,11 @@ <h3>Basic Carousel</h3>
   <script type="text/javascript" src="js/shCore.js"></script>
   <script type="text/javascript" src="js/shBrushXml.js"></script>
   <script type="text/javascript" src="js/shBrushJScript.js"></script>
-  
+
   <!-- Optional FlexSlider Additions -->
   <script src="js/jquery.easing.js"></script>
   <script src="js/jquery.mousewheel.js"></script>
   <script defer src="js/demo.js"></script>
-  
+
 </body>
 </html>

demo/carousel-min-max.html

@@ -4,42 +4,39 @@
 	<meta content="charset=utf-8">
 	<title>FlexSlider 2</title>
 	<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
-	
+
   <!-- Syntax Highlighter -->
 	<link href="css/shCore.css" rel="stylesheet" type="text/css" />
   <link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
   <!-- Demo CSS -->
 	<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
 	<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
-	
+
 	<!-- Modernizr -->
   <script src="js/modernizr.js"></script>
-  
+
 </head>
 <body class="loading">
 
-	<div id="top">
-
-		<a href="http://www.woothemes.com" title="WooThemes">
-			<img src="images/logo.png" alt="WooThemes" />
-		</a>
-
-	</div>
-
   <div id="container" class="cf">
     <header role="navigation">
+      <a class="logo" href="http://www.woothemes.com" title="WooThemes">
+        <img src="images/logo.png" alt="WooThemes" />
+	  </a>
       <h1>FlexSlider 2</h1>
       <h2>The best responsive slider. Period.</h2>
       <a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
+	  <h3 class="nav-header">Other Examples</h3>
       <nav>
-        <h3>Other Examples</h3>
         <ul>
           <li><a href="index.html">Basic Slider</a></li>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><a href="basic-carousel.html">Basic Carousel</a></li>
-          <li><a class="active" href="carousel-min-max.html">Carousel with min and max ranges</a></li>    
-          <li><a href="video.html">Video & the api (vimeo)</a></li>     
+          <li class="active"><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
+          <li><a href="dynamic-carousel-min-max.html">Carousel with dynamic min/max ranges</a></li>
+          <li><a href="video.html">Video & the api (vimeo)</a></li>
+          <li><a href="video-wistia.html">Video & the api (wistia)</a></li>
         </ul>
       </nav>
     </header>
@@ -134,16 +131,16 @@ <h3>Carousel With Min &amp; Max Ranges</h3>
         </div>
       </aside>
     </div>
-  
+
   </div>
-  
+
   <!-- jQuery -->
   <script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
   <script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
-  
+
   <!-- FlexSlider -->
   <script defer src="../jquery.flexslider.js"></script>
-  
+
    <script type="text/javascript">
     $(function(){
       SyntaxHighlighter.all();
@@ -168,11 +165,11 @@ <h3>Carousel With Min &amp; Max Ranges</h3>
   <script type="text/javascript" src="js/shCore.js"></script>
   <script type="text/javascript" src="js/shBrushXml.js"></script>
   <script type="text/javascript" src="js/shBrushJScript.js"></script>
-  
+
   <!-- Optional FlexSlider Additions -->
   <script src="js/jquery.easing.js"></script>
   <script src="js/jquery.mousewheel.js"></script>
   <script defer src="js/demo.js"></script>
-  
+
 </body>
 </html>