Build

dist/vegas.css

@@ -17,7 +17,6 @@
 
 .vegas-overlay {
     background: transparent url(overlays/02.png) center center repeat;
-    opacity: 0.5;
 }
 
 .vegas-timer {
@@ -39,6 +38,7 @@
         }
 
 .vegas-slide {
+    margin: 0;
     padding: 0;
     background: transparent center center no-repeat;
     -webkit-transform: translateZ(0);
@@ -48,11 +48,13 @@
 body.vegas-container {
     overflow: auto;
     position: static;
+    z-index: -2;
 }
     body.vegas-container > .vegas-timer,
     body.vegas-container > .vegas-overlay,
     body.vegas-container > .vegas-slide {
         position: fixed;
+        z-index: -1;
     }
 
 .vegas-video {
@@ -63,116 +65,122 @@ body.vegas-container {
 }
 
 /* fade */
-
-.vegas-transition-fade {
+.vegas-transition-fade,
+.vegas-transition-fade2 {
     opacity: 0;
 }
 
-.vegas-transition-fade-in {
+.vegas-transition-fade-in,
+.vegas-transition-fade2-in {
     opacity: 1;
 }
 
-.vegas-transition-fade-out {
+.vegas-transition-fade2-out {
     opacity: 0;
 }
 
 /* slideLeft */
-
-.vegas-transition-slideLeft {
+.vegas-transition-slideLeft,
+.vegas-transition-slideLeft2 {
     -webkit-transform: translateX(100%);
         -ms-transform: translateX(100%);
             transform: translateX(100%);
 }
 
-.vegas-transition-slideLeft-in {
+.vegas-transition-slideLeft-in,
+.vegas-transition-slideLeft2-in {
     -webkit-transform: translateX(0%);
         -ms-transform: translateX(0%);
             transform: translateX(0%); 
 }
 
-.vegas-transition-slideLeft-out {
+.vegas-transition-slideLeft2-out {
     -webkit-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
             transform: translateX(-100%);
 }
 
 /* slideRight */
-
-.vegas-transition-slideRight {
+.vegas-transition-slideRight,
+.vegas-transition-slideRight2 {
     -webkit-transform: translateX(-100%);
         -ms-transform: translateX(-100%);
             transform: translateX(-100%);
 }
 
-.vegas-transition-slideRight-in {
+.vegas-transition-slideRight-in,
+.vegas-transition-slideRight2-in {
     -webkit-transform: translateX(0%);
         -ms-transform: translateX(0%);
             transform: translateX(0%); 
 }
 
-.vegas-transition-slideRight-out {
+.vegas-transition-slideRight2-out {
     -webkit-transform: translateX(100%);
         -ms-transform: translateX(100%);
             transform: translateX(100%);
 }
 
 /* slideUp */
-
-.vegas-transition-slideUp {
+.vegas-transition-slideUp,
+.vegas-transition-slideUp2 {
     -webkit-transform: translateY(100%);
         -ms-transform: translateY(100%);
             transform: translateY(100%);
 }
 
-.vegas-transition-slideUp-in {
+.vegas-transition-slideUp-in,
+.vegas-transition-slideUp2-in {
     -webkit-transform: translateY(0%);
         -ms-transform: translateY(0%);
             transform: translateY(0%); 
 }
 
-.vegas-transition-slideUp-out {
+.vegas-transition-slideUp2-out {
     -webkit-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
 /* slideDown */
-
-.vegas-transition-slideDown {
+.vegas-transition-slideDown,
+.vegas-transition-slideDown2 {
     -webkit-transform: translateY(-100%);
         -ms-transform: translateY(-100%);
             transform: translateY(-100%);
 }
 
-.vegas-transition-slideDown-in {
+.vegas-transition-slideDown-in,
+.vegas-transition-slideDown2-in {
     -webkit-transform: translateY(0%);
         -ms-transform: translateY(0%);
             transform: translateY(0%); 
 }
 
-.vegas-transition-slideDown-out {
+.vegas-transition-slideDown2-out {
     -webkit-transform: translateY(100%);
         -ms-transform: translateY(100%);
             transform: translateY(100%);
 }
 
 /* zoomIn */
-
-.vegas-transition-zoomIn {
+.vegas-transition-zoomIn,
+.vegas-transition-zoomIn2 {
     -webkit-transform: scale(0);
         -ms-transform: scale(0);
             transform: scale(0);
     opacity: 0;
 }
 
-.vegas-transition-zoomIn-in {
+.vegas-transition-zoomIn-in,
+.vegas-transition-zoomIn2-in {
     -webkit-transform: scale(1);
         -ms-transform: scale(1);
             transform: scale(1);
     opacity: 1;
 }
 
-.vegas-transition-zoomIn-out {
+.vegas-transition-zoomIn2-out {
     -webkit-transform: scale(2);
         -ms-transform: scale(2);
             transform: scale(2);
@@ -180,22 +188,23 @@ body.vegas-container {
 }
 
 /* zoomOut */
-
-.vegas-transition-zoomOut {
+.vegas-transition-zoomOut,
+.vegas-transition-zoomOut2 {
     -webkit-transform: scale(2);
         -ms-transform: scale(2);
             transform: scale(2);
     opacity: 0;
 }
 
-.vegas-transition-zoomOut-in {
+.vegas-transition-zoomOut-in,
+.vegas-transition-zoomOut2-in {
     -webkit-transform: scale(1);
         -ms-transform: scale(1);
             transform: scale(1);
     opacity: 1;
 }
 
-.vegas-transition-zoomOut-out {
+.vegas-transition-zoomOut2-out {
     -webkit-transform: scale(0);
         -ms-transform: scale(0);
             transform: scale(0);
@@ -203,22 +212,23 @@ body.vegas-container {
 }
 
 /* swirlLeft */
-
-.vegas-transition-swirlLeft {
+.vegas-transition-swirlLeft,
+.vegas-transition-swirlLeft2 {
     -webkit-transform: scale(2) rotate(35deg);
         -ms-transform: scale(2) rotate(35deg);
             transform: scale(2) rotate(35deg);
     opacity: 0;
 }
 
-.vegas-transition-swirlLeft-in {
+.vegas-transition-swirlLeft-in,
+.vegas-transition-swirlLeft2-in {
     -webkit-transform: scale(1) rotate(0deg);
         -ms-transform: scale(1) rotate(0deg);
             transform: scale(1) rotate(0deg); 
     opacity: 1;
 }
 
-.vegas-transition-swirlLeft-out {
+.vegas-transition-swirlLeft2-out {
     -webkit-transform: scale(2) rotate(-35deg);
         -ms-transform: scale(2) rotate(-35deg);
             transform: scale(2) rotate(-35deg);
@@ -226,22 +236,23 @@ body.vegas-container {
 }
 
 /* swirlRight */
-
-.vegas-transition-swirlRight {
+.vegas-transition-swirlRight,
+.vegas-transition-swirlRight2 {
     -webkit-transform: scale(2) rotate(-35deg);
         -ms-transform: scale(2) rotate(-35deg);
             transform: scale(2) rotate(-35deg);
     opacity: 0;
 }
 
-.vegas-transition-swirlRight-in {
+.vegas-transition-swirlRight-in,
+.vegas-transition-swirlRight2-in {
     -webkit-transform: scale(1) rotate(0deg);
         -ms-transform: scale(1) rotate(0deg);
             transform: scale(1) rotate(0deg);
     opacity: 1;
 }
 
-.vegas-transition-swirlRight-out {
+.vegas-transition-swirlRight2-out {
     -webkit-transform: scale(2) rotate(35deg);
         -ms-transform: scale(2) rotate(35deg);
             transform: scale(2) rotate(35deg);

dist/vegas.js

@@ -1,6 +1,6 @@
 /*!-----------------------------------------------------------------------------
  * Vegas - Fullscreen Backgrounds and Slideshows.
- * v2.0.0-wip - built 2015-01-20
+ * v2.0.0-wip - built 2015-01-23
  * Licensed under the MIT License.
  * http://vegas.jaysalvat.com/
  * ----------------------------------------------------------------------------
@@ -16,7 +16,9 @@
     var defaults = {
         slide:           0,
         delay:           5000,
-        preload:         true,
+        preload:         false,
+        preloadImage:    false,
+        preloadVideo:    false,
         timer:           true,
         overlay:         false,
         autoplay:        true,
@@ -47,6 +49,8 @@
         ]
     };
 
+    var videoCache = {};
+
     var Vegas = function (elmt, options) {
         this.elmt         = elmt;
         this.settings     = $.extend({}, defaults, $.vegas.defaults, options);
@@ -74,7 +78,7 @@
             if (/vegas(\..*?)?(\.min)?\.css$/.test(sheet.href)) {
                 for (var j = 0; j < rules.length; j++) {
                     var rule  = rules[j],
-                        match = /vegas\-transition\-(.*)-|\b/gi.exec(rule.selectorText);
+                        match = /vegas\-transition\-([a-z0-9]*)/gi.exec(rule.selectorText);
                 
                     if (match && match[1]) {
                         if (this.transitions.indexOf(match[1]) === -1) {
@@ -99,23 +103,10 @@
                 $timer,
                 isBody    = this.elmt.tagName === 'BODY',
                 timer     = this.settings.timer,
-                overlay   = this.settings.overlay,
-                preload   = this.settings.preload,
-                img,
-                i;
+                overlay   = this.settings.overlay;
 
             // Preloading
-            if (preload) {
-                for (i = 0; i < this.settings.slides.length; i++) {
-                    if (this.settings.slides[i].src) {
-                        img = new Image();
-                        img.src = this.settings.slides[i].src;
-                    }
-                }
-
-                // TODO: 
-                // Preload videos
-            }
+            this._preload();
 
             // Wrapper with content
             if (!isBody) {
@@ -163,6 +154,28 @@
             this._goto(this.slide);
         },
 
+        _preload: function () {
+            var video, img, i;
+
+            for (i = 0; i < this.settings.slides.length; i++) {
+                if (this.settings.preload || this.settings.preloadImages) {
+                    if (this.settings.slides[i].src) {
+                        img = new Image();
+                        img.src = this.settings.slides[i].src;
+                    }
+                }
+
+                if (this.settings.preload || this.settings.preloadVideos) {
+                    if (this.support.video && this.settings.slides[i].video) {
+                        video = this._video(this.settings.slides[i].video);
+                        video.preload = true;
+
+                        videoCache[this.settings.slides[i].video.toString()] = video;
+                    }
+                }
+            }
+        },
+
         _slideShow: function () {
             var self = this;
 
@@ -201,6 +214,29 @@
             }
         },
 
+        _video: function (srcs) {
+            var video, 
+                source;
+
+            if (videoCache[srcs.toString()]) {
+                return videoCache[srcs.toString()];
+            }
+
+            if (srcs instanceof Array === false) {
+                srcs = [ srcs ];
+            }
+
+            video = document.createElement('video');
+
+            srcs.forEach(function (src) {
+                source = document.createElement('source');
+                source.src = src;
+                video.appendChild(source);
+            });
+
+            return video;
+        },
+
         _options: function (key, i) {
             if (i === undefined) {
                 i = this.slide;
@@ -235,7 +271,6 @@
                 transition = this._options('transition'),
                 isRandom   = transition === 'random',
                 video,
-                source,
                 img;
 
             if (isRandom) {
@@ -251,21 +286,11 @@
             }
 
             if (this.support.video && videos) {
-                if (videos instanceof Array === false) {
-                    videos = [ videos ];
-                }
-
-                video = document.createElement('video');
+                video = this._video(videos);
                 video.muted = true;
                 video.loop = true;
                 video.autoplay = true;
 
-                videos.forEach(function (src) {
-                    source = document.createElement('source');
-                    source.src = src;
-                    video.appendChild(source);
-                });
-
                 $slide = $(video)
                     .addClass('vegas-video')
                     .addClass('vegas-slide')
@@ -460,20 +485,25 @@
         },
 
         options: function (key, value) {
-            if (typeof key === 'string') {
+            var oldSlides = this.settings.slides;
+
+            if (typeof key === 'object') {
+                this.settings = $.extend({}, defaults, $.vegas.defaults, key);
+            } else if (typeof key === 'string') {
                 if (value === undefined) {
                     return this.settings[key];
                 }
-                this.settings[key] = value;
-            } else if (typeof key === 'object') {
-                this.settings = key;
+                this.settings[key] = value; 
             } else {
                 return this.settings;
             }
 
             // In case slides have changed
-            this.total  = this.settings.slides.length;
-            this.noshow = this.total < 2;
+            if (this.settings.slides !== oldSlides) {
+                this.total  = this.settings.slides.length;
+                this.noshow = this.total < 2;
+                this._preload();   
+            }
         }
     };