Skip to content

Commit f866ae0

Browse files
author
bradrobertson
committed
fix animation queue problem on tab slideshow
1 parent d597c7e commit f866ae0

File tree

3 files changed

+148
-73
lines changed

3 files changed

+148
-73
lines changed

‎src/dateinput/dateinput.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -287,7 +287,7 @@
287287
e = e || $.Event("api");
288288
e.type = "beforeChange";
289289

290-
fire.trigger(e, [date]);
290+
fire.trigger(e, [date]);
291291
if (e.isDefaultPrevented()) { return; }
292292

293293
// formatting

‎src/tabs/tabs.slideshow.js

+25-8
Original file line numberDiff line numberDiff line change
@@ -35,6 +35,9 @@
3535
timer,
3636
stopped = true;
3737

38+
fire.bind('onClick', function(){
39+
console.log(">> slideshow onClick");
40+
});
3841

3942
// next / prev buttons
4043
function find(query) {
@@ -50,6 +53,15 @@
5053
tabs.prev();
5154
});
5255

56+
/**
57+
*
58+
* Similar fix for autoscroll animation queue problem
59+
*/
60+
function next(){
61+
timer = setTimeout(function(){
62+
tabs.next();
63+
}, conf.interval);
64+
}
5365

5466
// extend the Tabs API with slideshow methods
5567
$.extend(self, {
@@ -73,14 +85,14 @@
7385
fire.trigger(e);
7486
if (e.isDefaultPrevented()) { return self; }
7587

76-
77-
// construct new timer
78-
timer = setInterval(tabs.next, conf.interval);
7988
stopped = false;
8089

8190
// onPlay
8291
fire.trigger("onPlay");
8392

93+
fire.bind('onClick', next);
94+
next();
95+
8496
return self;
8597
},
8698

@@ -93,14 +105,21 @@
93105
fire.trigger(e);
94106
if (e.isDefaultPrevented()) { return self; }
95107

96-
timer = clearInterval(timer);
108+
timer = clearTimeout(timer);
97109

98110
// onPause
99111
fire.trigger("onPause");
100112

113+
fire.unbind('onClick', next);
114+
101115
return self;
102116
},
103117

118+
// resume playing if not stopped
119+
resume: function() {
120+
stopped || self.play();
121+
},
122+
104123
// when stopped - mouseover won't restart
105124
stop: function() {
106125
self.pause();
@@ -126,9 +145,7 @@
126145

127146
/* when mouse enters, slideshow stops */
128147
if (conf.autopause) {
129-
tabs.getTabs().add(nextButton).add(prevButton).add(tabs.getPanes()).hover(self.pause, function() {
130-
if (!stopped) { self.play(); }
131-
});
148+
tabs.getTabs().add(nextButton).add(prevButton).add(tabs.getPanes()).hover(self.pause, self.resume);
132149
}
133150

134151
if (conf.autoplay) {
@@ -164,7 +181,7 @@
164181
var el = this.data("slideshow");
165182
if (el) { return el; }
166183

167-
conf = $.extend({}, tool.conf, conf);
184+
conf = $.extend({}, tool.conf, conf);
168185

169186
this.each(function() {
170187
el = new Slideshow($(this), conf);

‎test/tabs/slideshow.htm

+122-64
Original file line numberDiff line numberDiff line change
@@ -1,82 +1,140 @@
11

2-
<script src="../js/jquery-1.4.2.js"></script>
3-
<script src="../../src/tabs/tabs.js"></script>
4-
<script src="../../src/tabs/tabs.slideshow.js"></script>
5-
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
6-
7-
<style>
8-
.disabled {
9-
visibility:hidden;
10-
}
11-
</style>
12-
13-
<!-- tabs -->
14-
<ul class="tabs">
15-
<li><a href="#1">Tab 1</a></li>
16-
<li><a href="#2">Second tab</a></li>
17-
<li><a href="#3">A ultra long third tab</a></li>
18-
</ul>
19-
20-
<!-- panes -->
21-
<div class="panes">
22-
23-
<div class="pane" style="display:block">
24-
<p>
25-
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis viverra, leo sit amet auctor fermentum, risus lorem posuere tortor, in accumsan purus magna imperdiet sem.
2+
3+
4+
<!DOCTYPE html>
5+
6+
<html>
7+
8+
<!--
9+
This is a jQuery Tools standalone demo. Feel free to copy/paste.
10+
11+
http://flowplayer.org/tools/demos/
12+
13+
Do *not* reference CSS files and images from flowplayer.org when in production
14+
15+
Enjoy!
16+
-->
17+
18+
<head>
19+
<title>jQuery Tools standalone demo</title>
20+
21+
<!-- include the Tools -->
22+
<script src="../js/jquery-1.6.2.js"></script>
23+
<script src="../../src/tabs/tabs.js"></script>
24+
<script src="../../src/tabs/tabs.slideshow.js"></script>
25+
26+
<!-- standalone page styling (can be removed) -->
27+
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/standalone.css"/>
28+
29+
30+
<link rel="stylesheet" type="text/css" href="http://static.flowplayer.org/tools/css/tabs-slideshow.css"/>
31+
32+
<!-- fix IE "black box" problems with PNG images when opacity is being animated -->
33+
34+
<!--[if IE]>
35+
<style type="text/css">
36+
.images img {
37+
background:#efefef url(/img/global/gradient/h300.png) repeat-x 0 -22px;
38+
}
39+
</style>
40+
<![endif]-->
41+
</head>
42+
43+
<body>
44+
45+
46+
47+
<!-- "previous slide" button -->
48+
<a class="backward">prev</a>
49+
50+
<!-- container for the slides -->
51+
<div class="images">
52+
53+
<!-- first slide -->
54+
<div>
55+
<h3>First pane</h3>
56+
57+
<img src="http://static.flowplayer.org/img/title/screens.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
58+
59+
<p style="font-weight:bold">
60+
61+
Aenean nec imperdiet ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
2662
</p>
27-
63+
2864
<p>
29-
Suspendisse enim. Pellentesque facilisis aliquam enim. Maecenas facilisis molestie lectus. Sed ornare ultricies tortor. Vivamus nibh metus, faucibus quis, semper ut, dignissim id, diam.
30-
</p>
65+
Suspendisse potenti. Sed elementum risus eleifend massa vestibulum consectetur. Duis massa augue, aliquam eget fringilla vel, aliquam vitae arcu. Nam sed magna mi. Praesent odio neque, dapibus sit amet suscipit at, tempus sed nibh. Aliquam sagittis ligula in ligula faucibus cursus. Quisque vulputate pellentesque facilisis.
66+
</p>
67+
3168
</div>
32-
33-
<div class="pane">
34-
<p>
35-
Mauris ultricies. Nam feugiat egestas nulla. Donec augue dui, molestie sed, tristique sit amet, blandit eu, turpis. Mauris hendrerit, nisi et sodales tempor, orci tellus laoreet elit, sed molestie dui quam vitae dui.
36-
</p>
69+
70+
<!-- second slide -->
71+
<div>
72+
73+
<h3>Second pane</h3>
74+
75+
76+
<img src="http://static.flowplayer.org/img/title/eye192.png" alt="Flying screens" style="float:left;margin:0 30px 20px 0" />
77+
78+
<p style="font-weight:bold">
79+
Consectetur adipiscing elit. Praesent bibendum eros ac nulla. Integer vel lacus ac neque viverra.
80+
</p>
81+
3782
<p>
38-
Pellentesque nisl. Ut adipiscing vehicula risus. Nam eget tortor. Maecenas id augue. Vivamus interdum nulla ac dolor. Fusce metus. Suspendisse eu purus. Maecenas quis lacus eget dui volutpat molestie.
83+
Vivamus euismod euismod sagittis. Etiam cursus neque non lectus mattis cursus et a libero. Vivamus condimentum hendrerit metus, a sollicitudin magna vulputate eu. Donec sed tincidunt lectus. Donec tellus lectus, fermentum sit amet porta non, rhoncus ac mi. Quisque placerat auctor justo, a egestas urna tincidunt eleifend.
3984
</p>
85+
4086
</div>
41-
42-
<div class="pane">
43-
<p>
44-
Maecenas at odio. Nunc laoreet lectus vel ante. Nullam imperdiet. Sed justo dolor, mattis eu, euismod sed, tempus a, nisl. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
87+
88+
<!-- third slide -->
89+
<div>
90+
<h3>Third pane</h3>
91+
92+
<p style="font-weight:bold">
93+
Non lectus lacinia egestas. Nulla hendrerit, felis quis elementum viverra, purus felis egestas magna.
4594
</p>
46-
95+
4796
<p>
48-
In sed dolor. Etiam eget quam ac nibh pharetra adipiscing. Nullam vitae ligula. Sed sit amet leo sit amet arcu mollis ultrices. Vivamus rhoncus sapien nec lorem. In mattis nisi. Vivamus at enim. Integer semper imperdiet massa. Vestibulum nulla massa, pretium quis, porta id, vestibulum vitae, velit.
97+
Aenean elit lorem, pretium vitae dictum in, fermentum consequat dolor. Proin consectetur sollicitudin tellus, non elementum turpis pharetra non. Sed quis tellus quam.
4998
</p>
5099
</div>
100+
51101
</div>
52102

53-
<button class="backward">Prev</button>
54-
<button class="forward">Next</button>
103+
<!-- "next slide" button -->
104+
<a class="forward">next</a><p>
55105

56-
<script>
57-
var api = $(".tabs").tabs(".pane", { rotate: true }).slideshow({
58-
effect: 'fade',
59-
fadeOutSpeed: "slow",
60-
interval: 1000,
61-
62-
onBeforePlay: function() {
63-
console.info("onBeforePlay");
64-
},
65-
onPlay: function() {
66-
console.info("onPlay");
67-
},
68-
onBeforePause: function() {
69-
console.info("onBeforePause");
70-
},
71-
onPause: function() {
72-
console.info("onPause");
73-
}
74-
75-
}).data("slideshow");
76-
</script>
106+
<!-- the tabs -->
107+
<div class="slidetabs">
108+
<a href="#"></a>
77109

78-
<button onClick='api.play();'>Play</button>
79-
<button onClick='api.stop();'>Stop</button>
110+
<a href="#"></a>
111+
<a href="#"></a>
112+
</div>
113+
114+
<div style="clear:both;margin:30px 0;text-align:center;padding-right:40px">
115+
116+
<button onClick='$(".slidetabs").data("slideshow").play();'>Play</button>
117+
<button onClick='$(".slidetabs").data("slideshow").stop();'>Stop</button>
118+
</div>
80119

81120

121+
<script language="JavaScript">
122+
$(function() {
123+
124+
$(".slidetabs").tabs(".images > div", {
125+
126+
// enable "cross-fading" effect
127+
effect: 'fade',
128+
fadeOutSpeed: "slow",
129+
130+
// start from the beginning after the last tab
131+
rotate: true
132+
133+
// use the slideshow plugin. It accepts its own configuration
134+
}).slideshow();
135+
});
136+
</script>
137+
138+
</body>
82139

140+
</html>

0 commit comments

Comments
 (0)