{DEV} FlexSlider

- Added "video API" example
kirollosd · Jul 5, 2012 · ad4c684 · ad4c684
1 parent 8750b1e
commit ad4c684
Show file tree

Hide file tree

Showing 9 changed files with 234 additions and 8 deletions.
diff --git a/demo/basic-carousel.html b/demo/basic-carousel.html
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
           <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="carousel-min-max.html">Carousel with min and max ranges</a></li>    
+          <li><a href="video.html">Video & the api (vimeo)</a></li>     
         </ul>
       </nav>
     </header>

diff --git a/demo/carousel-min-max.html b/demo/carousel-min-max.html
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
           <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 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>     
         </ul>
       </nav>
     </header>

diff --git a/demo/index.html b/demo/index.html
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
           <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 href="carousel-min-max.html">Carousel with min and max ranges</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>
         </ul>
       </nav>
     </header>

diff --git a/demo/js/froogaloop.js b/demo/js/froogaloop.js
diff --git a/demo/js/jquery.fitvid.js b/demo/js/jquery.fitvid.js
diff --git a/demo/thumbnail-controlnav.html b/demo/thumbnail-controlnav.html
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
           <li><a class="active" 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 href="carousel-min-max.html">Carousel with min and max ranges</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>      
         </ul>
       </nav>
     </header>

diff --git a/demo/thumbnail-slider.html b/demo/thumbnail-slider.html
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
           <li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
           <li><a class="active" href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
           <li><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="carousel-min-max.html">Carousel with min and max ranges</a></li>      
+          <li><a href="video.html">Video & the api (vimeo)</a></li>   
         </ul>
       </nav>
     </header>

diff --git a/demo/video.html b/demo/video.html
@@ -0,0 +1,205 @@
+<!DOCTYPE html>
+<html class="no-js" lang="en">
+<head>
+	<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">
+      <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>
+      <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 href="carousel-min-max.html">Carousel with min and max ranges</a></li> 
+          <li><a class="active" href="video.html">Video & the api (vimeo)</a></li>         
+        </ul>
+      </nav>
+    </header>
+    <div id="main" role="main">
+      <section class="slider">
+        <div class="flexslider">
+          <ul class="slides">
+            <li>
+              <iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_lemon.jpg" />
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_donut.jpg" />
+  	    		</li>
+  	    		<li>
+  	    	    <img src="images/kitchen_adventurer_caramel.jpg" />
+  	    		</li>
+          </ul>
+        </div>
+      </section>
+      <aside>
+        <div class="cf">
+          <h3>Video</h3>
+          <ul class="toggle cf">
+            <li class="js"><a href="#view-js">JS</a></li>
+            <li class="html"><a href="#view-html">HTML</a></li>
+          </ul>
+        </div>
+        <div id="view-js" class="code">
+          <pre class="brush: js; toolbar: false; gutter: false;">
+            // Can also be used with $(document).ready()
+            $(window).load(function() {
+
+              // Vimeo API nonsense
+              var player = document.getElementById('player_1');
+              $f(player).addEvent('ready', ready);
+
+              function addEvent(element, eventName, callback) {
+                if (element.addEventListener) {
+                  element.addEventListener(eventName, callback, false)
+                } else {
+                  element.attachEvent(eventName, callback, false);
+                }
+              }
+
+              function ready(player_id) {
+                var froogaloop = $f(player_id);
+                froogaloop.addEvent('play', function(data) {
+                  $('.flexslider').flexslider("pause");
+                });
+                froogaloop.addEvent('pause', function(data) {
+                  $('.flexslider').flexslider("play");
+                });
+              }
+
+
+              // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
+              $(".flexslider")
+                .fitVids()
+                .flexslider({
+                  animation: "slide",
+                  useCSS: false,
+                  animationLoop: false,
+                  smoothHeight: true,
+                  before: function(slider){
+                    $f(player).api('pause');
+                  }
+              });
+            });
+          </pre>
+        </div>
+        <div id="view-html" class="code">
+          <pre class="brush: xml; toolbar: false; gutter: false;">
+            &lt;!-- Place somewhere in the &lt;body&gt; of your page -->
+            &lt;div class="flexslider">
+              &lt;ul class="slides">
+                &lt;li>
+                  &lt;iframe id="player_1" src="http://player.vimeo.com/video/39683393?api=1&amp;player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen>&lt;/iframe>
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide2.jpg" />
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide3.jpg" />
+                &lt;/li>
+                &lt;li>
+                  &lt;img src="slide4.jpg" />
+                &lt;/li>
+              &lt;/ul>
+            &lt;/div>
+          </pre>
+        </div>
+      </aside>
+    </div>
+
+  </div>
+
+  <!-- jQuery -->
+  <script src="//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();
+    });
+    $(window).load(function(){  
+
+      // Vimeo API nonsense
+      var player = document.getElementById('player_1');
+      $f(player).addEvent('ready', ready);
+
+      function addEvent(element, eventName, callback) {
+        (element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
+      }
+
+      function ready(player_id) {
+        var froogaloop = $f(player_id);
+
+        froogaloop.addEvent('play', function(data) {
+          $('.flexslider').flexslider("pause");
+        });
+
+        froogaloop.addEvent('pause', function(data) {
+          $('.flexslider').flexslider("play");
+        });
+      }
+
+
+      // Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
+      $(".flexslider")
+        .fitVids()
+        .flexslider({
+          animation: "slide",
+          useCSS: false,
+          animationLoop: false,
+          smoothHeight: true,
+          start: function(slider){
+            $('body').removeClass('loading');
+          },
+          before: function(slider){
+            $f(player).api('pause');
+          }
+      });
+    });
+  </script>
+
+   <!-- Syntax Highlighter -->
+	<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/froogaloop.js"></script>
+	<script src="js/jquery.fitvid.js"></script>
+	<script src="js/demo.js"></script>
+
+</body>
+</html>
diff --git a/flexslider.css b/flexslider.css
@@ -49,10 +49,11 @@ html[xmlns] .slides {display: block;}
 
 /* Direction Nav */
 .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%; 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-next {background-position: 100% 0; right: -36px; }
 .flex-direction-nav .flex-prev {left: -36px;}
-.flexslider:hover .flex-next {opacity: 1; right: 5px;}
-.flexslider:hover .flex-prev {opacity: 1; left: 5px;}
+.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 .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
 
 /* Control Nav */