diff options
-rw-r--r-- | css/slideshow.css | 7 | ||||
-rw-r--r-- | js/slideshowcontrols.js | 44 | ||||
-rw-r--r-- | templates/slideshow.php | 2 |
3 files changed, 17 insertions, 36 deletions
diff --git a/css/slideshow.css b/css/slideshow.css index b8fe19c7..d3d34ff3 100644 --- a/css/slideshow.css +++ b/css/slideshow.css @@ -114,13 +114,6 @@ margin-top: -21px; } -#slideshow > .play { -} - -#slideshow > .pause { - display: none; -} - #slideshow > .progress { position: fixed; bottom: 13px; diff --git a/js/slideshowcontrols.js b/js/slideshowcontrols.js index d9103ea6..b0df091c 100644 --- a/js/slideshowcontrols.js +++ b/js/slideshowcontrols.js @@ -40,6 +40,7 @@ return; } evt.stopPropagation(); + evt.preventDefault(); handler.call(this); }.bind(this); }.bind(this); @@ -58,7 +59,9 @@ update: function (images, autoPlay) { this.images = images; this.active = true; + this.showButton('.play'); this.hideButton('.pause'); + this.playing = false; // Hide prev/next and play buttons when we only have one pic this.container.find('.next, .previous, .play').toggle(this.images.length > 1); @@ -67,7 +70,7 @@ this.hideActionButtons(); if (autoPlay) { - this._play(); + this._playPauseToggle(); } }, @@ -159,8 +162,7 @@ this.container.children('.next').click(makeCallBack(this._next)); this.container.children('.previous').click(makeCallBack(this._previous)); this.container.children('.exit').click(makeCallBack(this._exit)); - this.container.children('.pause').click(makeCallBack(this._pause)); - this.container.children('.play').click(makeCallBack(this._play)); + this.container.find('.pause, .play').click(makeCallBack(this._playPauseToggle)); }, /** @@ -214,7 +216,7 @@ } else if (evt.keyCode === rightKey) { makeCallBack(this._next)(evt); } else if (evt.keyCode === spaceKey) { - makeCallBack(this._play)(evt); + makeCallBack(this._playPauseToggle)(evt); } else if (evt.keyCode === fKey) { makeCallBack(this._fullScreenToggle)(evt); } else if (this._hasKeyBeenPressed(evt, zoomOutKeys)) { @@ -272,34 +274,20 @@ }, /** - * Starts the timed slideshow + * Starts/stops autoplay and shows/hides the play/pause buttons * * @private */ - _play: function () { - this.playing = true; - this._playPauseButtonToggle(); - this._setTimeout(); - }, - - /** - * Pauses the timed slideshow - * - * @private - */ - _pause: function () { - this.playing = false; - this._playPauseButtonToggle(); - this._clearTimeout(); - }, + _playPauseToggle: function () { + if (this.playing === true) { + this.playing = false; + this._clearTimeout(); + } else { + this.playing = true; + this._setTimeout(); + } - /** - * Shows the play or pause button depending on circumstances - * - * @private - */ - _playPauseButtonToggle: function () { - this.container.find('.play, .pause').toggle(); + this.container.find('.play, .pause').toggleClass('hidden'); }, /** diff --git a/templates/slideshow.php b/templates/slideshow.php index 9c41321c..6bd92da1 100644 --- a/templates/slideshow.php +++ b/templates/slideshow.php @@ -1,7 +1,7 @@ <div id="slideshow"> <input type="button" class="svg next icon-view-next"/> <input type="button" class="svg play icon-view-play"/> - <input type="button" class="svg pause icon-view-pause"/> + <input type="button" class="svg pause icon-view-pause hidden"/> <input type="button" class="svg previous icon-view-previous"/> <input type="button" class="svg exit icon-view-close"/> |