Skip to content

Commit ad4c684

Browse files
CobusCobus
committed
{DEV} FlexSlider
- Added "video API" example
1 parent 8750b1e commit ad4c684

9 files changed

+234
-8
lines changed

‎demo/basic-carousel.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
3838
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3939
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
4040
<li><a class="active" href="basic-carousel.html">Basic Carousel</a></li>
41-
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
41+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a href="video.html">Video & the api (vimeo)</a></li>
4243
</ul>
4344
</nav>
4445
</header>

‎demo/carousel-min-max.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
3838
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3939
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
4040
<li><a href="basic-carousel.html">Basic Carousel</a></li>
41-
<li><a class="active" href="carousel-min-max.html">Carousel with min and max ranges</a></li>
41+
<li><a class="active" href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a href="video.html">Video & the api (vimeo)</a></li>
4243
</ul>
4344
</nav>
4445
</header>

‎demo/index.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
3838
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3939
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
4040
<li><a href="basic-carousel.html">Basic Carousel</a></li>
41-
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
41+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a href="video.html">Video & the api (vimeo)</a></li>
4243
</ul>
4344
</nav>
4445
</header>

‎demo/js/froogaloop.js

+4
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/js/jquery.fitvid.js

+11
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎demo/thumbnail-controlnav.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
3838
<li><a class="active" href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3939
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
4040
<li><a href="basic-carousel.html">Basic Carousel</a></li>
41-
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
41+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a href="video.html">Video & the api (vimeo)</a></li>
4243
</ul>
4344
</nav>
4445
</header>

‎demo/thumbnail-slider.html

+2-1
Original file line numberDiff line numberDiff line change
@@ -38,7 +38,8 @@ <h3>Other Examples</h3>
3838
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
3939
<li><a class="active" href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
4040
<li><a href="basic-carousel.html">Basic Carousel</a></li>
41-
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
41+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a href="video.html">Video & the api (vimeo)</a></li>
4243
</ul>
4344
</nav>
4445
</header>

‎demo/video.html

+205
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,205 @@
1+
<!DOCTYPE html>
2+
<html class="no-js" lang="en">
3+
<head>
4+
<meta content="charset=utf-8">
5+
<title>FlexSlider 2</title>
6+
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
7+
8+
<!-- Syntax Highlighter -->
9+
<link href="css/shCore.css" rel="stylesheet" type="text/css" />
10+
<link href="css/shThemeDefault.css" rel="stylesheet" type="text/css" />
11+
<!-- Demo CSS -->
12+
<link rel="stylesheet" href="css/demo.css" type="text/css" media="screen" />
13+
<link rel="stylesheet" href="../flexslider.css" type="text/css" media="screen" />
14+
15+
<!-- Modernizr -->
16+
<script src="js/modernizr.js"></script>
17+
18+
</head>
19+
<body class="loading">
20+
21+
<div id="top">
22+
23+
<a href="http://www.woothemes.com" title="WooThemes">
24+
<img src="images/logo.png" alt="WooThemes" />
25+
</a>
26+
27+
</div>
28+
29+
<div id="container" class="cf">
30+
<header role="navigation">
31+
<h1>FlexSlider 2</h1>
32+
<h2>The best responsive slider. Period.</h2>
33+
<a class="button green" href="https://github.com/woothemes/FlexSlider/zipball/master">Download Flexslider</a>
34+
<nav>
35+
<h3>Other Examples</h3>
36+
<ul>
37+
<li><a href="index.html">Basic Slider</a></li>
38+
<li><a href="thumbnail-controlnav.html">Slider w/thumbnail controlNav pattern</a></li>
39+
<li><a href="thumbnail-slider.html">Slider w/thumbnail slider</a></li>
40+
<li><a href="basic-carousel.html">Basic Carousel</a></li>
41+
<li><a href="carousel-min-max.html">Carousel with min and max ranges</a></li>
42+
<li><a class="active" href="video.html">Video & the api (vimeo)</a></li>
43+
</ul>
44+
</nav>
45+
</header>
46+
<div id="main" role="main">
47+
<section class="slider">
48+
<div class="flexslider">
49+
<ul class="slides">
50+
<li>
51+
<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>
52+
</li>
53+
<li>
54+
<img src="images/kitchen_adventurer_lemon.jpg" />
55+
</li>
56+
<li>
57+
<img src="images/kitchen_adventurer_donut.jpg" />
58+
</li>
59+
<li>
60+
<img src="images/kitchen_adventurer_caramel.jpg" />
61+
</li>
62+
</ul>
63+
</div>
64+
</section>
65+
<aside>
66+
<div class="cf">
67+
<h3>Video</h3>
68+
<ul class="toggle cf">
69+
<li class="js"><a href="#view-js">JS</a></li>
70+
<li class="html"><a href="#view-html">HTML</a></li>
71+
</ul>
72+
</div>
73+
<div id="view-js" class="code">
74+
<pre class="brush: js; toolbar: false; gutter: false;">
75+
// Can also be used with $(document).ready()
76+
$(window).load(function() {
77+
78+
// Vimeo API nonsense
79+
var player = document.getElementById('player_1');
80+
$f(player).addEvent('ready', ready);
81+
82+
function addEvent(element, eventName, callback) {
83+
if (element.addEventListener) {
84+
element.addEventListener(eventName, callback, false)
85+
} else {
86+
element.attachEvent(eventName, callback, false);
87+
}
88+
}
89+
90+
function ready(player_id) {
91+
var froogaloop = $f(player_id);
92+
froogaloop.addEvent('play', function(data) {
93+
$('.flexslider').flexslider("pause");
94+
});
95+
froogaloop.addEvent('pause', function(data) {
96+
$('.flexslider').flexslider("play");
97+
});
98+
}
99+
100+
101+
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
102+
$(".flexslider")
103+
.fitVids()
104+
.flexslider({
105+
animation: "slide",
106+
useCSS: false,
107+
animationLoop: false,
108+
smoothHeight: true,
109+
before: function(slider){
110+
$f(player).api('pause');
111+
}
112+
});
113+
});
114+
</pre>
115+
</div>
116+
<div id="view-html" class="code">
117+
<pre class="brush: xml; toolbar: false; gutter: false;">
118+
&lt;!-- Place somewhere in the &lt;body&gt; of your page -->
119+
&lt;div class="flexslider">
120+
&lt;ul class="slides">
121+
&lt;li>
122+
&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>
123+
&lt;/li>
124+
&lt;li>
125+
&lt;img src="slide2.jpg" />
126+
&lt;/li>
127+
&lt;li>
128+
&lt;img src="slide3.jpg" />
129+
&lt;/li>
130+
&lt;li>
131+
&lt;img src="slide4.jpg" />
132+
&lt;/li>
133+
&lt;/ul>
134+
&lt;/div>
135+
</pre>
136+
</div>
137+
</aside>
138+
</div>
139+
140+
</div>
141+
142+
<!-- jQuery -->
143+
<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
144+
<script>window.jQuery || document.write('<script src="js/libs/jquery-1.7.min.js">\x3C/script>')</script>
145+
146+
<!-- FlexSlider -->
147+
<script defer src="../jquery.flexslider.js"></script>
148+
149+
<script type="text/javascript">
150+
$(function(){
151+
SyntaxHighlighter.all();
152+
});
153+
$(window).load(function(){
154+
155+
// Vimeo API nonsense
156+
var player = document.getElementById('player_1');
157+
$f(player).addEvent('ready', ready);
158+
159+
function addEvent(element, eventName, callback) {
160+
(element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
161+
}
162+
163+
function ready(player_id) {
164+
var froogaloop = $f(player_id);
165+
166+
froogaloop.addEvent('play', function(data) {
167+
$('.flexslider').flexslider("pause");
168+
});
169+
170+
froogaloop.addEvent('pause', function(data) {
171+
$('.flexslider').flexslider("play");
172+
});
173+
}
174+
175+
176+
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
177+
$(".flexslider")
178+
.fitVids()
179+
.flexslider({
180+
animation: "slide",
181+
useCSS: false,
182+
animationLoop: false,
183+
smoothHeight: true,
184+
start: function(slider){
185+
$('body').removeClass('loading');
186+
},
187+
before: function(slider){
188+
$f(player).api('pause');
189+
}
190+
});
191+
});
192+
</script>
193+
194+
<!-- Syntax Highlighter -->
195+
<script type="text/javascript" src="js/shCore.js"></script>
196+
<script type="text/javascript" src="js/shBrushXml.js"></script>
197+
<script type="text/javascript" src="js/shBrushJScript.js"></script>
198+
199+
<!-- Optional FlexSlider Additions -->
200+
<script src="js/froogaloop.js"></script>
201+
<script src="js/jquery.fitvid.js"></script>
202+
<script src="js/demo.js"></script>
203+
204+
</body>
205+
</html>

‎flexslider.css

+4-3
Original file line numberDiff line numberDiff line change
@@ -49,10 +49,11 @@ html[xmlns] .slides {display: block;}
4949

5050
/* Direction Nav */
5151
.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;}
52-
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px;}
52+
.flex-direction-nav .flex-next {background-position: 100% 0; right: -36px; }
5353
.flex-direction-nav .flex-prev {left: -36px;}
54-
.flexslider:hover .flex-next {opacity: 1; right: 5px;}
55-
.flexslider:hover .flex-prev {opacity: 1; left: 5px;}
54+
.flexslider:hover .flex-next {opacity: 0.8; right: 5px;}
55+
.flexslider:hover .flex-prev {opacity: 0.8; left: 5px;}
56+
.flexslider:hover .flex-next:hover, .flexslider:hover .flex-prev:hover {opacity: 1;}
5657
.flex-direction-nav .disabled {opacity: .3!important; filter:alpha(opacity=30); cursor: default;}
5758

5859
/* Control Nav */

0 commit comments

Comments
 (0)