Permalink
Browse files

Added play/pause functionality with demo

  • Loading branch information...
nthomson committed Apr 23, 2011
1 parent 32e7f0f commit fbd85cc8d47a494fe8c226d883cf8a39b72dae13
Showing with 26 additions and 5 deletions.
  1. +3 −1 demo/index.html
  2. +5 −1 demo/multiple.html
  3. +18 −3 simpleSlideShow.js
View
@@ -18,12 +18,14 @@
</head>
<script type="text/javascript">
$(document).ready(function() {
- simpleSlideShow('#slideshow',5000,'#slideshow_next','#slideshow_prev');
+ simpleSlideShow('#slideshow',5000,'#slideshow_next','#slideshow_prev', '#slideshow_pause', '#slideshow_play');
});
</script>
<body>
<p>
<a id='slideshow_prev' href='#'>Previous</a>
+ <a id='slideshow_play' href='#'>Play</a>
+ <a id='slideshow_pause' href='#'>Pause</a>
<a id='slideshow_next' href='#'>Next</a>
</p>
<div id="slideshow">
View
@@ -21,7 +21,7 @@
</head>
<script type="text/javascript">
$(document).ready(function() {
- simpleSlideShow('#slideshow1',1000,'#slideshow1_next','#slideshow1_prev');
+ simpleSlideShow('#slideshow1',1000,'#slideshow1_next','#slideshow1_prev', '#slideshow1_pause', '#slideshow1_play');
simpleSlideShow('#slideshow2',5000,'#slideshow2_next','#slideshow2_prev');
simpleSlideShow('#slideshow3',false,'#slideshow3_next','#slideshow3_prev');
});
@@ -43,6 +43,10 @@
<a id='slideshow1_prev' href='#'>Previous</a>
<a id='slideshow1_next' href='#'>Next</a>
</p>
+ <p>
+ <a id='slideshow1_play' href='#'>Play</a>
+ <a id='slideshow1_pause' href='#'>Pause</a>
+ </p>
</div>
<div class='wrapper'>
<div class='slideshow' id="slideshow2">
View
@@ -1,4 +1,4 @@
-function simpleSlideShow(element, interval, next_element, prev_element) {
+function simpleSlideShow(element, interval, next_element, prev_element, pause_element, play_element) {
var slideshow_next = function(el) {
var $el = $(el);
@@ -37,8 +37,17 @@ function simpleSlideShow(element, interval, next_element, prev_element) {
});
}
};
+
+ var slideshow_pause = function() {
+ clearInterval(interval_id);
+ };
+
+ var slideshow_play = function() {
+ interval_id = setInterval(function(){slideshow_next(element)}, interval);
+ };
- var $el = $(element)
+ var interval_id;
+ var $el = $(element);
var ss_width = '100%';
var ss_height = $el.height();
$el.css({
@@ -66,6 +75,12 @@ function simpleSlideShow(element, interval, next_element, prev_element) {
interval = 5000;
}
if (interval !== false) {
- setInterval(function(){slideshow_next(element)}, interval);
+ slideshow_play();
+ }
+ if (pause_element !== undefined) {
+ $(pause_element).click(function(){slideshow_pause()});
+ }
+ if (play_element !== undefined) {
+ $(play_element).click(function(){slideshow_play()});
}
}

0 comments on commit fbd85cc

Please sign in to comment.