Refactored last merge.

Renamed interval and speed options to more semantic names.
Added visual control to toggle the slideshow.
Added SVG icons.

Author: blueimp

README.md

@@ -26,6 +26,7 @@ Add the following HTML snippet with the Gallery widget to the body of your webpa
     <a class="prev">‹</a>
     <a class="next">›</a>
     <a class="close">×</a>
+    <a class="play-pause"></a>
     <ol class="indicator"></ol>
 </div>
 ```
@@ -61,8 +62,6 @@ Initialize the Gallery the following way:
 ```js
 var links = document.getElementById('links').getElementsByTagName('a'),
     options = {
-        // Start an automatic slideshow with a delay of 5 seconds between slides:
-        interval: 5000,
         // Set to true to initialize the Gallery with carousel specific options:
         carousel: false
     },
@@ -95,6 +94,8 @@ var options = {
     leftEdgeClass: 'blueimp-gallery-left',
     // The class to add when the right edge has been reached:
     rightEdgeClass: 'blueimp-gallery-right',
+    // The class to add when the automatic slideshow is active:
+    playingClass: 'blueimp-gallery-playing',
     // The class for all slides:
     slideClass: 'slide',
     // The slide class for loading elements:
@@ -117,6 +118,8 @@ var options = {
     nextClass: 'next',
     // The class for the "close" control:
     closeClass: 'close',
+    // The class for the "play-pause" toggle control:
+    playPauseClass: 'play-pause',
     // The class for the active indicator:
     activeClass: 'active',
     // The list object property (or data attribute) with the object type:
@@ -145,6 +148,8 @@ var options = {
     stretchImages: false,
     // Toggle the controls on pressing the Return key:
     toggleControlsOnReturn: true,
+    // Toggle the automatic slideshow interval on pressing the Space key:
+    toggleSlideshowOnSpace: true,
     // Navigate the gallery by pressing left and right on the keyboard:
     enableKeyboardNavigation: true,
     // Close the gallery on pressing the ESC key:
@@ -164,22 +169,21 @@ var options = {
     // Allow continuous navigation, moving from last to first
     // and from first to last slide:
     continuous: true,
-    // The number of elements to load around the current index:
-    preloadRange: 2,
+    // Start with the automatic slideshow:
+    startSlideshow: false,
+    // Delay in milliseconds between slides for the automatic slideshow:
+    slideshowInterval: 5000,
     // The starting index as integer.
     // Can also be an object of the given list,
     // or an equal object with the same url property:
     index: 0,
-    // Delay in milliseconds between slides for slideshow
-    interval: 4000,
-    // Auto-start gallery slideshow
-    autoSlideshow: false,
+    // The number of elements to load around the current index:
+    preloadRange: 2,
     // The transition speed between slide changes in milliseconds:
-    speed: 400,
-    // The transition speed between slideshow slide changes in milliseconds:
-    slideshowSpeed: 1000,
-    // Toggle slideshow on pressing the Space key:
-    toggleSlideshowOnSpace: true,
+    transitionSpeed: 400,
+    // The transition speed for automatic slide changes, set to an integer
+    // greater 0 to override the default transition speed:
+    slideshowTransitionSpeed: undefined,
     // Callback function executed on slide change.
     // Is called with the list object as "this" object and the
     // current index and slide as arguments:
@@ -201,12 +205,13 @@ If the **carousel** option is **true**, the following options are set to differe
 var carouselOptions = {
     hidePageScrollbars: false,
     toggleControlsOnReturn: false,
+    toggleSlideshowOnSpace: false,
     enableKeyboardNavigation: false,
     closeOnEscape: false,
     closeOnSlideClick: false,
     closeOnSwipeUpOrDown: false,
     disableScroll: false,
-    interval: 5000 // 5 seconds
+    startSlideshow: true
 };
 ```
 
@@ -240,7 +245,7 @@ gallery.next();
 // Move to the given slide index with the (optional) given duraction speed in milliseconds:
 gallery.slide(index, duration);
 
-// Start an automatic slideshow with the given delay:
+// Start an automatic slideshow with the given delay (optional):
 gallery.play(delay);
 
 // Stop the automatic slideshow:

bower.json

@@ -1,6 +1,6 @@
 {
     "name": "blueimp-gallery",
-    "version": "2.2.0",
+    "version": "2.3.0",
     "title": "blueimp Gallery",
     "description": "blueimp Gallery is a touch-enabled, responsive and customizable image and video gallery, carousel and lightbox, optimized for both mobile and desktop web browsers. It features swipe, mouse and keyboard navigation, transition effects, slideshow functionality, fullscreen support and on-demand content loading and can be extended to display additional content types.",
     "keywords": [

css/blueimp-gallery.css

@@ -1,6 +1,6 @@
 @charset 'UTF-8';
 /*
- * blueimp Gallery CSS 2.0.1
+ * blueimp Gallery CSS 2.3.0
  * https://github.com/blueimp/Gallery
  *
  * Copyright 2013, Sebastian Tschan
@@ -85,8 +85,7 @@
   margin: -64px auto 0;
   width: 128px;
   height: 128px;
-  background: url(../img/play.png) center no-repeat;
-  background-size: 64px 64px;
+  background: url(../img/video-play.png) center no-repeat;
   cursor: pointer;
 }
 .blueimp-gallery > .slides > .slide > .video-playing > a,
@@ -109,7 +108,6 @@
 }
 .blueimp-gallery > .slides > .slide-error {
   background: url(../img/error.png) center no-repeat;
-  background-size: 64px 64px;
 }
 .blueimp-gallery > .slides > .slide-error > .slide-content {
   display: none;
@@ -151,33 +149,47 @@
 }
 .blueimp-gallery > .close,
 .blueimp-gallery > .title {
-  margin: 0 60px 0 0;
   position: absolute;
   top: 15px;
   left: 15px;
+  margin: 0 40px 0 0;
   font-size: 20px;
   line-height: 30px;
   color: #fff;
   text-shadow: 0 0 2px #000;
   display: none;
 }
 .blueimp-gallery > .close {
-  margin: -15px;
   padding: 15px;
   right: 15px;
   left: auto;
+  margin: -15px;
   font-size: 30px;
   text-decoration: none;
   opacity: 0.8;
   cursor: pointer;
 }
+.blueimp-gallery > .play-pause {
+  position: absolute;
+  right: 15px;
+  bottom: 15px;
+  width: 15px;
+  height: 15px;
+  background: url(../img/play-pause.png) 0 0 no-repeat;
+  cursor: pointer;
+  opacity: 0.8;
+  display: none;
+}
+.blueimp-gallery-playing > .play-pause {
+  background-position: -15px 0;
+}
 .blueimp-gallery > .indicator {
   position: absolute;
   top: auto;
   right: 15px;
   bottom: 15px;
   left: 15px;
-  margin: 0;
+  margin: 0 40px;
   padding: 0;
   list-style: none;
   text-align: center;
@@ -214,6 +226,7 @@
 .blueimp-gallery-controls > .next,
 .blueimp-gallery-controls > .close,
 .blueimp-gallery-controls > .title,
+.blueimp-gallery-controls > .play-pause,
 .blueimp-gallery-controls > .indicator {
   display: block;
   /* Fix z-index issues (controls behind slide element) on Android: */
@@ -227,10 +240,22 @@
 .blueimp-gallery-left > .prev,
 .blueimp-gallery-single > .next,
 .blueimp-gallery-right > .next,
+.blueimp-gallery-single > .play-pause,
 .blueimp-gallery-single > .indicator {
   display: none;
 }
 
+/* Replace PNGs with SVGs for capable browsers (excluding IE<9) */
+body:last-child .blueimp-gallery > .slides > .slide > .video-content > a {
+  background-image: url(../img/video-play.svg);
+}
+body:last-child .blueimp-gallery > .slides > .slide-error {
+  background-image: url(../img/error.svg);
+}
+body:last-child .blueimp-gallery > .play-pause {
+  background-image: url(../img/play-pause.svg);
+}
+
 @media (max-width: 767px) {
   .blueimp-gallery-carousel {
     height: 270px;

css/blueimp-gallery.min.css

@@ -1,7 +1,7 @@
 <!DOCTYPE HTML>
 <!--
 /*
- * blueimp Gallery Demo 2.0.0
+ * blueimp Gallery Demo 2.3.0
  * https://github.com/blueimp/Gallery
  *
  * Copyright 2013, Sebastian Tschan
@@ -42,6 +42,7 @@ <h2>Carousel image gallery</h2>
     <h3 class="title"></h3>
     <a class="prev">‹</a>
     <a class="next">›</a>
+    <a class="play-pause"></a>
 </div>
 <br>
 <h2>Carousel video gallery</h2>
@@ -51,6 +52,7 @@ <h2>Carousel video gallery</h2>
     <h3 class="title"></h3>
     <a class="prev">‹</a>
     <a class="next">›</a>
+    <a class="play-pause"></a>
 </div>
 <br>
 <h2>Lightbox image gallery</h2>
@@ -63,6 +65,7 @@ <h3 class="title"></h3>
     <a class="prev">‹</a>
     <a class="next">›</a>
     <a class="close">×</a>
+    <a class="play-pause"></a>
     <ol class="indicator"></ol>
 </div>
 <script src="js/blueimp-gallery.js"></script>