V2 work in progrss

CHANGELOG.md

@@ -1,61 +0,0 @@
-# Vegas jQuery Plugin
-
-## CHANGE LOG
-
-### Vegas 1.3.4 2013-12-16
-
-* Allow overlay(false) to disable overlay when vegas is already running
-* Fix loading option which didn't work on slideshows
-
-### Vegas 1.3.3 2013-09-03
-
-* Fix some size bug. Get the real Viewport size
-* Fix Destroy method
-
-### Vegas 1.3.2 2013-08-15
-* Remove forgotten debug
-* Add user-select:none to CSS
-
-### Vegas 1.3.1 2012-09-05
-* New attempt to fix the webkit image size bug (Thanks orourkedd)
-* Get rid of imagesLoadedForVegas function
-* Fixed Css Twitter Bootstrap incompatibility
-
-### Vegas 1.3.0 2012-05-04
-
-* Fixed the destroy() error
-* Fixed the width and height webkit error
-* Added globale fade settings
-* Enhanced better image preloading
-* Enhanced minimized the total overlay image
-
-### Vegas 1.2.0 2011-09-09
-
-* Fixed the bug when fading effect is longer than then slideshow delay
-* Added imagesLoaded plugin by Paul Irish et al, thanks simshaun
-
-### Vegas 1.1.0 2011-06-17
-
-* Added default settings
-* Added 'previous' method
-* Added 'next' method
-* Added 'jump' method
-* Added 'preload' method
-* Added 'get' method
-* Added 'preload' option to slideshow method
-* Added 'step' option to slideshow method
-* Added 'loading' option to background method
-* Added 'walk' callback to slideshow method
-* Renamed 'background*' events to 'vegas*'
-* Added 'vegasstart' event
-* Added 'vegasstop event
-* Added 'vegaspause event
-* Added 'vegasnext' event
-* Added 'vegasprevious' event
-* Added 'vegasjump' event
-* Added 'vegaswalk' event
-* Enhanced 'valign' and 'align' with % values
-
-### Vegas 1.0.0 2011-05-13
-
-* First public release

MIT-LICENSE → LICENSE.md

@@ -1,6 +1,6 @@
 The MIT License (MIT)
 
-Copyright (c) 2013 Jay Salvat
+Copyright 2015 Jay Salvat
 
 Permission is hereby granted, free of charge, to any person
 obtaining a copy of this software and associated documentation

README.md

@@ -1,33 +1,52 @@
-Vegas – Fullscreen Backgrounds and Slideshows with jQuery
-=========================================================
+Vegas – Fullscreen Backgrounds and Slideshows
+=============================================
 
-Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.
+Vegas is a [jQuery](http://jquery.com)/[Zepto](http://zeptojs.com)/[Pin](http://pin.jaysalvat.com) plugin 
+to add beautiful fullscreen backgrounds and Slideshows to DOM elements.
+
+#### Install
+
+    bower install vegas
+
+#### Get started
+
+First, include either [jQuery](http://jquery.com), [Zepto](http://zeptojs.com) or [Pin](http://pin.jaysalvat.com).
+
+Then...
 
     $(function() {
-	    $.vegas('/img/background.jpg')('overlay');
+	    $('body').vegas({
+            slides: [
+                { src: 'img1.jpg' },
+                { src: 'img2.jpg' },
+                { src: 'img3.jpg' }
+            ]
+        });
 	}
 
-### Official website
+### V1 Official website
 http://vegas.jaysalvat.com/
 
-### Real life demo
+### V1 Real life demo
 http://vegas.jaysalvat.com/demo/
 
-### Documentation
+### V1 Documentation
 http://vegas.jaysalvat.com/documentation/
 
 Contributing
 ------------
 
-Please don't edit files in the `dist` subdirectory as they are generated via Grunt. You'll find source code in the `src` subdirectory!
+Please don't edit files in the `dist` directory as they are generated via [Gulp](http://gulpjs.com). 
+You'll find source code in the `src` directory!
 Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
+Please don't run Gulp task. I will.
 
 License
 -------
 
 **The MIT License (MIT)**
 
-Copyright (c) 2013 Jay Salvat
+Copyright 2015 Jay Salvat
 
 Permission is hereby granted, free of charge, to any person obtaining a copy
 of this software and associated documentation files (the "Software"), to deal

bower.json

@@ -1,13 +1,13 @@
 {
     "name": "Vegas",
-    "version": "1.3.5",
+    "version": "2.0.0-wip",
     "main": [
-        "dist/jquery.vegas.js",
-        "dist/jquery.vegas.css"
+        "dist/vegas.min.js",
+        "dist/vegas.min.css"
     ],
     "ignore": [
         "src",
-        "gruntfile.js",
+        "gulpfile.js",
         "package.json",
         "component.json"
     ],

component.json

@@ -1,23 +1,25 @@
 {
     "name": "Vegas",
-    "version": "1.3.5",
+    "version": "2.0.0-wip",
     "description": "Vegas - Fullscreen Backgrounds and Slideshows with jQuery.",
     "homepage": "http://vegas.jaysalvat.com",
     "author": "Jay Salvat",
     "license": "MIT",
     "main": [
-        "dist/jquery.vegas.js",
-        "dist/jquery.vegas.css"
+        "dist/vegas.min.js",
+        "dist/vegas.min.css"
     ],
     "repository": {
         "type": "git",
         "url": "[email protected]:jaysalvat/vegas.git"
     },
     "keywords": [
-        "jquery",
         "background",
         "slideshow",
         "fullscreen",
-        "vegas"
+        "vegas",
+        "jquery",
+        "zepto",
+        "pin"
     ]
 }

dist/jquery.vegas.css

@@ -1,34 +0,0 @@
-.vegas-loading {
-	border-radius: 10px;
-	background: #000;
-	background: rgba(0,0,0,0.7);
-	background: url(images/loading.gif) no-repeat center center; /* Loading Gif by http://preloaders.net/ */
-	height: 32px;
-	left: 20px;
-	position: fixed;
-	top: 20px;
-	width: 32px; 
-	z-index: 0;
-}
-
-.vegas-overlay {
-	background: transparent url(overlays/01.png);
-	opacity: 0.5;
-	z-index: -1;
-}
-
-.vegas-background {
-	-ms-interpolation-mode: bicubic;
-	image-rendering: optimizeQuality;
-    max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
-	z-index: -2;
-}
-
-.vegas-overlay,
-.vegas-background {
-	-webkit-user-select: none;
-	 -khtml-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	        user-select: none;
-}

dist/jquery.vegas.js

@@ -1,319 +0,0 @@
- // ----------------------------------------------------------------------------
- // Vegas - Fullscreen Backgrounds and Slideshows with jQuery.
- // v1.3.5 - released 2014-10-13 19:56
- // Licensed under the MIT license.
- // http://vegas.jaysalvat.com/
- // ----------------------------------------------------------------------------
- // Copyright (C) 2010-2014 Jay Salvat
- // http://jaysalvat.com/
- // ----------------------------------------------------------------------------
-
-(function($) {
-    var $background = $("<img />").addClass("vegas-background"), $overlay = $("<div />").addClass("vegas-overlay"), $loading = $("<div />").addClass("vegas-loading"), $current = $(), paused = null, backgrounds = [], step = 0, delay = 5e3, walk = function() {}, timer, methods = {
-        init: function(settings) {
-            var options = {
-                src: getBackground(),
-                align: "center",
-                valign: "center",
-                fade: 0,
-                loading: true,
-                load: function() {},
-                complete: function() {}
-            };
-            $.extend(options, $.vegas.defaults.background, settings);
-            if (options.loading) {
-                loading();
-            }
-            var $new = $background.clone();
-            $new.css({
-                position: "fixed",
-                left: "0px",
-                top: "0px"
-            }).bind("load", function() {
-                if ($new == $current) {
-                    return;
-                }
-                $(window).bind("load resize.vegas", function(e) {
-                    resize($new, options);
-                });
-                if ($current.is("img")) {
-                    $current.stop();
-                    $new.hide().insertAfter($current).fadeIn(options.fade, function() {
-                        $(".vegas-background").not(this).remove();
-                        $("body").trigger("vegascomplete", [ this, step - 1 ]);
-                        options.complete.apply($new, [ step - 1 ]);
-                    });
-                } else {
-                    $new.hide().prependTo("body").fadeIn(options.fade, function() {
-                        $("body").trigger("vegascomplete", [ this, step - 1 ]);
-                        options.complete.apply(this, [ step - 1 ]);
-                    });
-                }
-                $current = $new;
-                resize($current, options);
-                if (options.loading) {
-                    loaded();
-                }
-                $("body").trigger("vegasload", [ $current.get(0), step - 1 ]);
-                options.load.apply($current.get(0), [ step - 1 ]);
-                if (step) {
-                    $("body").trigger("vegaswalk", [ $current.get(0), step - 1 ]);
-                    options.walk.apply($current.get(0), [ step - 1 ]);
-                }
-            }).attr("src", options.src);
-            return $.vegas;
-        },
-        destroy: function(what) {
-            if (!what || what == "background") {
-                $(".vegas-background, .vegas-loading").remove();
-                $(window).unbind("*.vegas");
-                $current = $();
-            }
-            if (!what || what == "overlay") {
-                $(".vegas-overlay").remove();
-            }
-            clearInterval(timer);
-            return $.vegas;
-        },
-        overlay: function(settings) {
-            var options = {
-                src: null,
-                opacity: null
-            };
-            $.extend(options, $.vegas.defaults.overlay, settings);
-            $overlay.remove();
-            $overlay.css({
-                margin: "0",
-                padding: "0",
-                position: "fixed",
-                left: "0px",
-                top: "0px",
-                width: "100%",
-                height: "100%"
-            });
-            if (options.src === false) {
-                $overlay.css("backgroundImage", "none");
-            }
-            if (options.src) {
-                $overlay.css("backgroundImage", "url(" + options.src + ")");
-            }
-            if (options.opacity) {
-                $overlay.css("opacity", options.opacity);
-            }
-            $overlay.prependTo("body");
-            return $.vegas;
-        },
-        slideshow: function(settings, keepPause) {
-            var options = {
-                step: step,
-                delay: delay,
-                preload: false,
-                loading: true,
-                backgrounds: backgrounds,
-                walk: walk
-            };
-            $.extend(options, $.vegas.defaults.slideshow, settings);
-            if (options.backgrounds != backgrounds) {
-                if (!settings.step) {
-                    options.step = 0;
-                }
-                if (!settings.walk) {
-                    options.walk = function() {};
-                }
-                if (options.preload) {
-                    $.vegas("preload", options.backgrounds);
-                }
-            }
-            backgrounds = options.backgrounds;
-            delay = options.delay;
-            step = options.step;
-            walk = options.walk;
-            clearInterval(timer);
-            if (!backgrounds.length) {
-                return $.vegas;
-            }
-            var doSlideshow = function() {
-                if (step < 0) {
-                    step = backgrounds.length - 1;
-                }
-                if (step >= backgrounds.length || !backgrounds[step - 1]) {
-                    step = 0;
-                }
-                var settings = backgrounds[step++];
-                settings.walk = options.walk;
-                settings.loading = options.loading;
-                if (typeof settings.fade == "undefined") {
-                    settings.fade = options.fade;
-                }
-                if (settings.fade > options.delay) {
-                    settings.fade = options.delay;
-                }
-                $.vegas(settings);
-            };
-            doSlideshow();
-            if (!keepPause) {
-                paused = false;
-                $("body").trigger("vegasstart", [ $current.get(0), step - 1 ]);
-            }
-            if (!paused) {
-                timer = setInterval(doSlideshow, options.delay);
-            }
-            return $.vegas;
-        },
-        next: function() {
-            var from = step;
-            if (step) {
-                $.vegas("slideshow", {
-                    step: step
-                }, true);
-                $("body").trigger("vegasnext", [ $current.get(0), step - 1, from - 1 ]);
-            }
-            return $.vegas;
-        },
-        previous: function() {
-            var from = step;
-            if (step) {
-                $.vegas("slideshow", {
-                    step: step - 2
-                }, true);
-                $("body").trigger("vegasprevious", [ $current.get(0), step - 1, from - 1 ]);
-            }
-            return $.vegas;
-        },
-        jump: function(s) {
-            var from = step;
-            if (step) {
-                $.vegas("slideshow", {
-                    step: s
-                }, true);
-                $("body").trigger("vegasjump", [ $current.get(0), step - 1, from - 1 ]);
-            }
-            return $.vegas;
-        },
-        stop: function() {
-            var from = step;
-            step = 0;
-            paused = null;
-            clearInterval(timer);
-            $("body").trigger("vegasstop", [ $current.get(0), from - 1 ]);
-            return $.vegas;
-        },
-        pause: function() {
-            paused = true;
-            clearInterval(timer);
-            $("body").trigger("vegaspause", [ $current.get(0), step - 1 ]);
-            return $.vegas;
-        },
-        get: function(what) {
-            if (what === null || what == "background") {
-                return $current.get(0);
-            }
-            if (what == "overlay") {
-                return $overlay.get(0);
-            }
-            if (what == "step") {
-                return step - 1;
-            }
-            if (what == "paused") {
-                return paused;
-            }
-        },
-        preload: function(backgrounds) {
-            var cache = [];
-            for (var i in backgrounds) {
-                if (backgrounds[i].src) {
-                    var cacheImage = document.createElement("img");
-                    cacheImage.src = backgrounds[i].src;
-                    cache.push(cacheImage);
-                }
-            }
-            return $.vegas;
-        }
-    };
-    function resize($img, settings) {
-        var options = {
-            align: "center",
-            valign: "center"
-        };
-        $.extend(options, settings);
-        if ($img.height() === 0) {
-            $img.load(function() {
-                resize($(this), settings);
-            });
-            return;
-        }
-        var vp = getViewportSize(), ww = vp.width, wh = vp.height, iw = $img.width(), ih = $img.height(), rw = wh / ww, ri = ih / iw, newWidth, newHeight, newLeft, newTop, properties;
-        if (rw > ri) {
-            newWidth = wh / ri;
-            newHeight = wh;
-        } else {
-            newWidth = ww;
-            newHeight = ww * ri;
-        }
-        properties = {
-            width: newWidth + "px",
-            height: newHeight + "px",
-            top: "auto",
-            bottom: "auto",
-            left: "auto",
-            right: "auto"
-        };
-        if (!isNaN(parseInt(options.valign, 10))) {
-            properties.top = 0 - (newHeight - wh) / 100 * parseInt(options.valign, 10) + "px";
-        } else if (options.valign == "top") {
-            properties.top = 0;
-        } else if (options.valign == "bottom") {
-            properties.bottom = 0;
-        } else {
-            properties.top = (wh - newHeight) / 2;
-        }
-        if (!isNaN(parseInt(options.align, 10))) {
-            properties.left = 0 - (newWidth - ww) / 100 * parseInt(options.align, 10) + "px";
-        } else if (options.align == "left") {
-            properties.left = 0;
-        } else if (options.align == "right") {
-            properties.right = 0;
-        } else {
-            properties.left = (ww - newWidth) / 2;
-        }
-        $img.css(properties);
-    }
-    function loading() {
-        $loading.prependTo("body").fadeIn();
-    }
-    function loaded() {
-        $loading.fadeOut("fast", function() {
-            $(this).remove();
-        });
-    }
-    function getBackground() {
-        if ($("body").css("backgroundImage")) {
-            return $("body").css("backgroundImage").replace(/url\("?(.*?)"?\)/i, "$1");
-        }
-    }
-    function getViewportSize() {
-        var elmt = window, prop = "inner";
-        if (!("innerWidth" in window)) {
-            elmt = document.documentElement || document.body;
-            prop = "client";
-        }
-        return {
-            width: elmt[prop + "Width"],
-            height: elmt[prop + "Height"]
-        };
-    }
-    $.vegas = function(method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else if (typeof method === "object" || !method) {
-            return methods.init.apply(this, arguments);
-        } else {
-            $.error("Method " + method + " does not exist");
-        }
-    };
-    $.vegas.defaults = {
-        background: {},
-        slideshow: {},
-        overlay: {}
-    };
-})(jQuery);

dist/jquery.vegas.min.css

@@ -1 +0,0 @@
-.vegas-loading{border-radius:10px;background:#000;background:rgba(0,0,0,.7);background:url(images/loading.gif) no-repeat center center;height:32px;left:20px;position:fixed;top:20px;width:32px;z-index:0}.vegas-overlay{background:transparent url(overlays/01.png);opacity:.5;z-index:-1}.vegas-background{-ms-interpolation-mode:bicubic;image-rendering:optimizeQuality;max-width:none!important;z-index:-2}.vegas-overlay,.vegas-background{-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}

dist/metadata.json

@@ -1,4 +0,0 @@
-{
-  "date": "2014-10-13 19:56:09",
-  "version": "1.3.5"
-}

dist/patch/vegas.pin.js

@@ -0,0 +1,61 @@
+/* 
+ * Pin to jQuery compatibility patch
+ *
+ * This file is required if you use 
+ * Pin instead of jQuery
+ *
+ * What is Pin?
+ * http://pin.jaysalvat.com
+ */
+
+/* global Pin: true */
+
+(function ($) {
+    'use strict';
+
+    if ($ && $.pin) {
+        $.fn.addClass = function (name) {
+            return this.set('.' + name);
+        };
+
+        $.fn.hasClass = function (name) {
+            return this.get('.' + name);
+        };
+
+        $.fn.removeClass = function (name) {
+            return this.set('.' + name, 'remove');
+        };
+
+        $.fn.css = function (key, value) {
+            if (value === undefined) {
+                return this.get(':' + key);
+            }
+            return this.set(':' + key, value);
+        };
+
+        $.fn.attr = function (key, value) {
+            if (value === undefined) {
+                return this.get('@' + key);
+            }
+            return this.set('@' + key, value);
+        };
+
+        $.fn.fadeIn = function (duration) {
+            return this.each(function () {
+                var self  = this,
+                    start = new Date(),
+                    from  = 0,
+                    intvl = setInterval(function() {
+                        var passed   = new Date() - start,
+                            progress = passed / duration;
+
+                        self.style.opacity = from + progress;
+
+                        if (progress >= 1) {
+                            clearInterval(intvl);
+                        }
+                    }, duration || 100);
+            });
+        };
+    }
+})(typeof Pin !== 'undefined' ? Pin : null);

dist/patch/vegas.pin.min.js

@@ -0,0 +1,2 @@
+!function(t){"use strict";t&&t.pin&&(t.fn.addClass=function(t){return this.set("."+t)},t.fn.hasClass=function(t){return this.get("."+t)},t.fn.removeClass=function(t){return this.set("."+t,"remove")},t.fn.css=function(t,n){return void 0===n?this.get(":"+t):this.set(":"+t,n)},t.fn.attr=function(t,n){return void 0===n?this.get("@"+t):this.set("@"+t,n)},t.fn.fadeIn=function(t){return this.each(function(){var n=this,e=new Date,i=0,s=setInterval(function(){var r=new Date-e,f=r/t;n.style.opacity=i+f,f>=1&&clearInterval(s)},t||100)})})}("undefined"!=typeof Pin?Pin:null);
+//# sourceMappingURL=../patch/vegas.pin.min.js.map

dist/patch/vegas.pin.min.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["?"],"names":["$","pin","fn","addClass","name","this","set","hasClass","get","removeClass","css","key","value","undefined","attr","fadeIn","duration","each","self","start","Date","from","intvl","setInterval","passed","progress","style","opacity","clearInterval","Pin"],"mappings":"CAOA,SAAWA,GACP,YAEIA,IAAKA,EAAEC,MACPD,EAAEE,GAAGC,SAAW,SAAUC,GACtB,MAAOC,MAAKC,IAAI,IAAMF,IAG1BJ,EAAEE,GAAGK,SAAW,SAAUH,GACtB,MAAOC,MAAKG,IAAI,IAAMJ,IAG1BJ,EAAEE,GAAGO,YAAc,SAAUL,GACzB,MAAOC,MAAKC,IAAI,IAAMF,EAAM,WAGhCJ,EAAEE,GAAGQ,IAAM,SAAUC,EAAKC,GACtB,MAAcC,UAAVD,EACOP,KAAKG,IAAI,IAAMG,GAEnBN,KAAKC,IAAI,IAAMK,EAAKC,IAG/BZ,EAAEE,GAAGY,KAAO,SAAUH,EAAKC,GACvB,MAAcC,UAAVD,EACOP,KAAKG,IAAI,IAAMG,GAEnBN,KAAKC,IAAI,IAAMK,EAAKC,IAG/BZ,EAAEE,GAAGa,OAAS,SAAUC,GACpB,MAAOX,MAAKY,KAAK,WACb,GAAIC,GAAQb,KACRc,EAAQ,GAAIC,MACZC,EAAQ,EACRC,EAAQC,YAAY,WAChB,GAAIC,GAAW,GAAIJ,MAASD,EACxBM,EAAWD,EAASR,CAExBE,GAAKQ,MAAMC,QAAUN,EAAOI,EAExBA,GAAY,GACZG,cAAcN,IAEnBN,GAAY,UAIjB,mBAARa,KAAsBA,IAAM","file":"patch/vegas.pin.min.js","sourcesContent":[null],"sourceRoot":"/source/"}

dist/vegas.css

@@ -0,0 +1,222 @@
+.vegas-container {
+    overflow: hidden !important;
+}
+
+.vegas-wrapper,
+.vegas-overlay,
+.vegas-timer,
+.vegas-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+}
+
+.vegas-overlay {
+    background: transparent url(overlays/02.png) center center repeat;
+    opacity: 0.5;
+}
+
+.vegas-timer {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+}
+    .vegas-timer-progress {
+        width: 0%;
+        height: 100%;
+        background: yellowgreen;
+        transition-property: width;
+        transition-timing-function: ease-out;
+    }
+        .vegas-timer-running .vegas-timer-progress {
+            width: 100%;
+        }
+
+.vegas-slide {
+    padding: 0;
+    background: transparent center center no-repeat;
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+}
+
+body.vegas-container {
+    overflow: auto;
+}
+    body.vegas-container > .vegas-timer,
+    body.vegas-container > .vegas-overlay,
+    body.vegas-container > .vegas-slide {
+        position: fixed;
+        z-index: -1;
+    }
+
+.vegas-video {
+    min-width: 100%; 
+    min-height: 100%;
+    width: auto; 
+    height: auto;
+}
+
+/* fade */
+
+.vegas-transition-fade {
+    opacity: 0;
+}
+
+.vegas-transition-fade-in {
+    opacity: 1;
+}
+
+.vegas-transition-fade-out {
+    opacity: 0;
+}
+
+/* slideLeft */
+
+.vegas-transition-slideLeft {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+}
+
+.vegas-transition-slideLeft-in {
+     -webkit-transform: translateX(0%);
+             transform: translateX(0%); 
+}
+
+.vegas-transition-slideLeft-out {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+}
+
+/* slideRight */
+
+.vegas-transition-slideRight {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+}
+
+.vegas-transition-slideRight-in {
+     -webkit-transform: translateX(0%);
+             transform: translateX(0%); 
+}
+
+.vegas-transition-slideRight-out {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+}
+
+/* slideUp */
+
+.vegas-transition-slideUp {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+}
+
+.vegas-transition-slideUp-in {
+     -webkit-transform: translateY(0%);
+             transform: translateY(0%); 
+}
+
+.vegas-transition-slideUp-out {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+}
+
+/* slideDown */
+
+.vegas-transition-slideDown {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+}
+
+.vegas-transition-slideDown-in {
+     -webkit-transform: translateY(0%);
+             transform: translateY(0%); 
+}
+
+.vegas-transition-slideDown-out {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+}
+
+/* zoomIn */
+
+.vegas-transition-zoomIn {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 0;
+}
+
+.vegas-transition-zoomIn-in {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomIn-out {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+}
+
+/* zoomOut */
+
+.vegas-transition-zoomOut {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+}
+
+.vegas-transition-zoomOut-in {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomOut-out {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 0;
+}
+
+/* swirlLeft */
+
+.vegas-transition-swirlLeft {
+    -webkit-transform: scale(2) rotate(35deg);
+            transform: scale(2) rotate(35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlLeft-in {
+     -webkit-transform: scale(1) rotate(0deg);
+             transform: scale(1) rotate(0deg); 
+    opacity: 1;
+}
+
+.vegas-transition-swirlLeft-out {
+    -webkit-transform: scale(2) rotate(-35deg);
+            transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+/* swirlRight */
+
+.vegas-transition-swirlRight {
+    -webkit-transform: scale(2) rotate(-35deg);
+            transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlRight-in {
+     -webkit-transform: scale(1) rotate(0deg);
+             transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+.vegas-transition-swirlRight-out {
+    -webkit-transform: scale(2) rotate(35deg);
+            transform: scale(2) rotate(35deg);
+    opacity: 0;
+}

dist/vegas.js

@@ -0,0 +1,502 @@
+ // ----------------------------------------------------------------------------
+ // Vegas - Fullscreen Backgrounds and Slideshows.
+ // v2.0.0-wip - released 2015-01-14
+ // Licensed under the MIT License.
+ // http://vegas.jaysalvat.com/
+ // ----------------------------------------------------------------------------
+ // Copyright (C) 2010-2015 Jay Salvat
+ // http://jaysalvat.com/
+ // ----------------------------------------------------------------------------
+
+/* global jQuery, Zepto, Pin */
+
+(function ($) {
+    'use strict';
+
+    var defaults = {
+        slide:           0,
+        delay:           5000,
+        preload:         true,
+        timer:           true,
+        overlay:         false,
+        autoplay:        true,
+        shuffle:         false,
+        fill:            true,
+        color:           null,
+        align:           'center',
+        valign:          'center',
+        transition:      'fade',
+        transitionDelay: 1000,
+        init:  function () {},
+        play:  function () {},
+        pause: function () {},
+        walk:  function () {},
+        slides: [
+            // {   
+            //  src:             null,
+            //  color:           null,
+            //  delay:           null,
+            //  align:           null,
+            //  valign:          null,
+            //  transition:      null,
+            //  transitiondelay: null,
+            //  fill:            true,
+            //  videos:          []
+            // }
+            // ...
+        ]
+    };
+
+    var Vegas = function (elmt, options) {
+        this.elmt         = elmt;
+        this.settings     = $.extend({}, defaults, $.vegas.defaults, options);
+        this.slide        = this.settings.slide;
+        this.total        = this.settings.slides.length;
+        this.noshow       = this.total < 2;
+        this.paused       = !this.settings.autoplay || this.noshow;
+        this.$elmt        = $(elmt);
+        this.$timer       = null;
+        this.$overlay     = null;
+        this.$slide       = null;
+        this.timeout      = null;
+        this.transitions  = [];
+
+        this.support = {
+            objectFit:  'objectFit'  in document.body.style,
+            transition: 'transition' in document.body.style || 'WebkitTransition' in document.body.style,
+            video:      $.vegas.isVideoCompatible()
+        };
+
+        for (var i = 0; i < document.styleSheets.length; i++) {
+            var sheet = document.styleSheets[i],
+                rules = sheet.rules ? sheet.rules : sheet.cssRules;
+
+            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);
+                
+                    if (match && match[1]) {
+                        this.transitions.push(match[1]);
+                    }
+                }
+            }
+        }
+
+        if (this.settings.shuffle === true) {
+            this.shuffle();
+        }
+
+        this._init();
+    };
+
+    Vegas.prototype = {
+        _init: function () {
+            var $wrapper,
+                $overlay,
+                $timer,
+                isBody    = this.elmt.tagName === 'BODY',
+                timer     = this.settings.timer,
+                overlay   = this.settings.overlay,
+                preload   = this.settings.preload,
+                position  = this.$elmt.css('position'),
+                img,
+                i;
+
+            // Preloading
+            if (preload) {
+                for (i = 0; i < this.settings.slides.length; i++) {
+                    img = new Image();
+                    img.src = this.settings.slides[i].src;
+                }
+            }
+
+            // Wrapper with content
+            if (!isBody) {
+                $wrapper = $('<div class="vegas-wrapper">')
+                    .css('overflow', this.$elmt.css('overflow'))
+                    .css('padding',  this.$elmt.css('padding'));
+
+                // Some browsers don't compute padding shorthand
+                if (!this.$elmt.css('padding')) {
+                    $wrapper
+                        .css('padding-top',    this.$elmt.css('padding-top'))
+                        .css('padding-bottom', this.$elmt.css('padding-bottom'))
+                        .css('padding-left',   this.$elmt.css('padding-left'))
+                        .css('padding-right',  this.$elmt.css('padding-right'));
+                }
+
+                $wrapper[0].innerHTML = this.elmt.innerHTML;
+                this.elmt.innerHTML = '';
+            }
+
+            // Timer
+            if (timer && this.support.transition) {
+                $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
+                this.$timer = $timer;
+                this.$elmt.prepend($timer);
+            }
+
+            // Overlay
+            if (overlay) {
+                $overlay = $('<div class="vegas-overlay">');
+                if (typeof overlay === 'string') {
+                    $overlay.css('background-image', 'url(' + overlay + ')');
+                }
+                this.$overlay = $overlay;
+                this.$elmt.prepend($overlay);
+            }
+
+            // Container
+            this.$elmt.addClass('vegas-container');
+            if (!isBody) {
+                if (position === 'static') {
+                    this.$elmt.css('position', 'relative');
+                }
+                this.$elmt.append($wrapper);
+            }
+
+            this.trigger('init');
+            this._goto(this.slide);
+        },
+
+        _slideShow: function () {
+            var self = this;
+
+            if (this.paused || this.noshow) {
+                clearTimeout(this.timeout);
+            } else {
+                this.timeout = setTimeout(function () {
+                    self.next();
+                }, this._options('delay')); 
+            }
+        },
+
+        _timer: function (state) {
+            var self = this;
+
+            clearTimeout(this.timeout);
+
+            if (!this.$timer || this.paused || this.noshow) {
+                return;
+            }
+
+            this.$timer
+                .removeClass('vegas-timer-running')
+                    .find('div')
+                        .css('transition-duration', '0ms');
+
+            if (state) {
+                setTimeout(function () {
+                   self.$timer
+                    .addClass('vegas-timer-running')
+                        .find('div')
+                            .css('transition-duration', self._options('delay') - 100 + 'ms');
+                }, 100);
+            }
+        },
+
+        _options: function (key, i) {
+            if (i === undefined) {
+                i = this.slide;
+            }
+
+            if (this.settings.slides[i][key] !== undefined) {
+                return this.settings.slides[i][key];
+            }
+
+            return this.settings[key];
+        },
+
+        _goto: function (nb) {
+            this.slide = nb;
+
+            var $slide,
+                $slides    = this.$elmt.children('.vegas-slide'),
+                total      = $slides.length,
+                self       = this,
+                src        = this.settings.slides[nb].src,
+                videos     = this.settings.slides[nb].video,
+                delay      = this._options('delay'),
+                duration   = this._options('transitionDelay'),
+                align      = this._options('align'),
+                valign     = this._options('valign'),
+                color      = this._options('color') || this.$elmt.css('background-color'),
+                fill       = this._options('fill') ? 'cover' : 'contain',
+                transition = this._options('transition'),
+                isRandom   = transition === 'random',
+                video,
+                source,
+                img;
+
+            if (isRandom) {
+                transition = this.transitions[Math.floor(Math.random() * (this.transitions.length - 1))];
+            }
+
+            if (transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+                console.error("Vegas: Transition " + transition + " doesn't exist.");
+            }
+
+            if (duration > delay) {
+                duration = delay;
+            }
+
+            if (this.support.video && videos) {
+                if (videos instanceof Array === false) {
+                    videos = [ videos ];
+                }
+
+                video = document.createElement('video');
+                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')
+                    .addClass('vegas-transition-' + transition)
+                    .css('background-color', color);
+
+                if (this.support.objectFit) {
+                    $slide
+                        .css('object-position', align + ' ' + valign)
+                        .css('object-fit', fill)
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                } else if (fill === 'contain') {
+                    $slide
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                }
+            } else {
+                img = new Image();
+                img.src = src;
+
+                $slide = $('<div></div>')
+                    .addClass('vegas-slide')
+                    .addClass('vegas-transition-' + transition)
+                    .css('background-image',    'url(' + src + ')')
+                    .css('background-color',    color)
+                    .css('background-position', align + ' ' + valign)
+                    .css('background-size',     fill);
+            }
+
+            if (!self.support.transition) {
+                $slide.css('display', 'none');
+            }
+
+            if (total) {
+                $slides.eq(total - 1).after($slide);
+            } else {
+                this.$elmt.prepend($slide);
+            }
+
+            $slides
+                .css('transition', 'all 0ms')
+                .each(function () {
+                    this.className  = ' vegas-slide';
+                    this.className += ' vegas-transition-' +  transition;
+                    this.className += ' vegas-transition-' +  transition + '-in';
+                    
+                    if (video) {
+                        this.className += ' vegas-video';    
+                    }
+                }
+            );
+
+            self._timer(false);
+
+            function go () {
+                self._timer(true);
+
+                setTimeout(function () {
+                    if (self.support.transition) {
+                        $slides
+                            .css('transition', 'all ' + duration + 'ms')
+                            .addClass('vegas-transition-' + transition + '-out');
+                    }
+
+                    $slide
+                        .css('transition', 'all ' + duration + 'ms')
+                        .addClass('vegas-transition-' + transition + '-in');
+
+                    if (!self.support.transition) {
+                        $slide.fadeIn(duration);
+                    }
+
+                    if ($slides.length >= 2) {
+                         $slides.eq(0).remove();
+                    }
+
+                    self.trigger('walk');
+                    self._slideShow();
+                }, 100);
+            }
+
+            if (video) {
+                video.play();
+                video.oncanplay = go;
+            } else {
+                img.onload = go;
+            }
+        },
+
+        shuffle: function () {
+            var temp,
+                rand;
+
+            for (var i = this.total - 1; i > 0; i--) {
+                rand = Math.floor(Math.random() * (i + 1));
+                temp = this.settings.slides[i];
+                this.settings.slides[i] = this.settings.slides[rand];
+                this.settings.slides[rand] = temp;
+            }
+        },
+
+        play: function () {
+            if (this.paused) {
+                this.paused = false;
+                this.next();
+                this.trigger('play');
+            }
+        },
+
+        pause: function () {
+            this._timer(false);
+            this.paused = true;
+            this.trigger('pause');
+        },
+
+        toggle: function () {
+            if (this.paused) {
+                this.play();
+            } else {
+                this.pause();
+            }
+        },
+
+        playing: function () {
+            return !this.paused && !this.noshow;
+        },
+
+        current: function (advanced) {
+            if (advanced) {
+                return {
+                    slide: this.slide,
+                    data:  this.settings.slides[this.slide]
+                };
+            }
+            return this.slide;
+        },
+
+        jump: function (nb) {
+            if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
+                return;
+            }
+
+            this.slide = nb;
+            this._goto(this.slide);
+        },
+
+        next: function () {
+            this.slide++;
+
+            if (this.slide >= this.total) {
+                this.slide = 0;
+            }
+
+            this._goto(this.slide);
+        },
+
+        previous: function () {
+            this.slide--;
+
+            if (this.slide < 0) {
+                this.slide = this.total - 1;
+            }
+
+            this._goto(this.slide);
+        },
+
+        trigger: function (fn) {
+            var params = [];
+
+            if (fn !== 'init') {
+                params = [ 
+                    this.slide, 
+                    this.settings.slides[this.slide]
+                ];
+            }
+
+            this.$elmt.trigger('vegas' + fn, params);
+
+            if (typeof this.settings[fn] === 'function') {
+                this.settings[fn].apply(this.$elmt, params);
+            }
+        },
+
+        options: function (key, value) {
+            if (typeof key === 'string') {
+                if (value === undefined) {
+                    return this.settings[key];
+                }
+                this.settings[key] = value;
+            } else if (typeof key === 'object') {
+                this.settings = key;
+            } else {
+                return this.settings;
+            }
+        }
+    };
+
+    $.fn.vegas = function(options) {
+        var args = arguments,
+            error = false,
+            returns;
+
+        if (options === undefined || typeof options === 'object') {
+            return this.each(function () {
+                if (!this._vegas) {
+                    this._vegas = new Vegas(this, options);
+                }
+            });
+        } else if (typeof options === 'string') {
+            this.each(function () {
+                var instance = this._vegas;
+
+                if (!instance) {
+                    throw new Error('No Vegas applied to this element.');
+                }
+
+                if (typeof instance[options] === 'function' && options[0] !== '_') {
+                    returns = instance[options].apply(instance, [].slice.call(args, 1));
+                } else {
+                    error = true;
+                }
+            });
+
+            if (error) {
+                throw new Error('No method "' + options + '" in Vegas.');
+            }
+
+            return returns !== undefined ? returns : this;
+        }
+    };
+
+    $.vegas = {};
+    $.vegas.defaults = defaults;
+
+    $.vegas.isVideoCompatible = function () {
+        return !('ontouchstart' in window || 'onmsgesturechange' in window);
+    };
+
+})(typeof jQuery !== 'undefined' ? jQuery :
+   typeof Zepto  !== 'undefined' ? Zepto  :
+   typeof Pin    !== 'undefined' ? Pin    : null
+);

gruntfile.js

@@ -1,164 +0,0 @@
-var semver = require('semver'),
-    format = require('util').format;
-
-module.exports = function(grunt) {
-
-    grunt.initConfig({
-
-        pkg: grunt.file.readJSON('package.json'),
-
-        banner: [
-            ' // ----------------------------------------------------------------------------',
-            ' // <%= pkg.description %>',
-            ' // v<%= pkg.version %> - released <%= grunt.template.today("yyyy-mm-dd HH:MM") %>',
-            ' // Licensed under the MIT license.',
-            ' // http://vegas.jaysalvat.com/',
-            ' // ----------------------------------------------------------------------------',
-            ' // Copyright (C) 2010-<%= grunt.template.today("yyyy") %> Jay Salvat',
-            ' // http://jaysalvat.com/',
-            ' // ----------------------------------------------------------------------------',
-            '\n'
-        ].join('\n'),
-
-        jshint: {
-            files: ['gruntfile.js', 'src/**/*.js']
-        },
-
-        uglify: {
-            options: {
-                banner: '<%= banner %>'
-            },
-            js: {
-                options: {
-                    mangle: false,
-                    compress: false,
-                    beautify: true
-                },
-                src: 'src/jquery.vegas.js',
-                dest: 'dist/jquery.vegas.js'
-            },
-            jsmin: {
-                options: {
-                    mangle: true,
-                    compress: true
-                },
-                src: 'dist/jquery.vegas.js',
-                dest: 'dist/jquery.vegas.min.js'
-            }
-        },
-
-        cssmin: {
-            minify: {
-                src: 'src/jquery.vegas.css',
-                dest: 'dist/jquery.vegas.min.css'
-            }
-        },
-
-        exec: {
-            publish: {
-                cmd: [
-                    'cp -r src/images dist/',
-                    'cp -r src/overlays dist/',
-                    'cp -r src/jquery.vegas.css dist/jquery.vegas.css',
-                    'cp -r dist/ tmp/',
-                    'cd tmp',
-                    'zip -r vegas.zip *',
-                    'cd -',
-                    'git checkout gh-pages',
-                    'rm -rf releases/latest/',
-                    'cp -r tmp/ releases/<%= pkg.version %>/',
-                    'cp -r tmp/ releases/latest/',
-                    'git add -A releases/<%= pkg.version %>',
-                    'git add -A releases/latest',
-                    'git commit -m "Published v<%= pkg.version %>."',
-                    'git push origin gh-pages',
-                    'git checkout -',
-                    'rm -rf tmp/'
-                ].join(' && ')
-            },
-            gitFailIfDirty: {
-                cmd: 'test -z "$(git status --porcelain)"'
-            },
-            gitAdd: {
-                cmd: 'git add .'
-            },
-            gitCommit: {
-                cmd: function(message) {
-                    return format('git commit -m "Build %s"', message);
-                }
-            },
-            gitTag: {
-                cmd: function(version) {
-                    return format('git tag v%s -am "%s"', version, version);
-                }
-            },
-            gitPush: {
-                cmd: [
-                    'git push origin master',
-                    'git push origin master --tags'
-                ].join(' && ')
-            }
-        }
-    });
-
-    grunt.loadNpmTasks('grunt-exec');
-    grunt.loadNpmTasks('grunt-contrib-jshint');
-    grunt.loadNpmTasks('grunt-contrib-uglify');
-    grunt.loadNpmTasks('grunt-contrib-cssmin');
-
-    grunt.registerTask('build',   ['jshint', 'uglify', 'cssmin']);
-    grunt.registerTask('publish', ['exec:publish']);
-    grunt.registerTask('default', ['build']);
-
-    grunt.registerTask('release', 'Release lib.', function(version) {
-        var pkg = grunt.file.readJSON('package.json');
-
-        version = semver.inc(pkg.version, version) || version;
-
-        if (!semver.valid(version) || semver.lte(version, pkg.version)) {
-            grunt.fatal('Invalid version.');
-        }
-
-        pkg.version = version;
-        grunt.config.data.pkg = pkg;
-
-        grunt.task.run([
-            'exec:gitFailIfDirty',
-            'build',
-            'metadata:' + version,
-            'manifests:' + version,
-            'exec:gitAdd',
-            'exec:gitCommit:' + version,
-            'exec:gitTag:' + version,
-            'exec:gitPush',
-            'exec:publish'
-        ]);
-    });
-
-    grunt.registerTask('manifests', 'Update manifests.', function(version) {
-        var pkg = grunt.file.readJSON('package.json'),
-            cpt = grunt.file.readJSON('component.json'),
-            bwr = grunt.file.readJSON('bower.json');
-
-        pkg.version = version;
-        cpt.version = version;
-        bwr.version = version;
-
-        pkg = JSON.stringify(pkg, null, 4);
-        cpt = JSON.stringify(cpt, null, 4);
-        bwr = JSON.stringify(bwr, null, 4);
-
-        grunt.file.write('package.json', pkg);
-        grunt.file.write('component.json', cpt);
-        grunt.file.write('bower.json', bwr);
-    });
-
-    grunt.registerTask('metadata', 'Create metadata file.', function(version) {
-        var metadata = {
-            'date': grunt.template.today("yyyy-mm-dd HH:MM:ss"),
-            'version': version
-        };
-
-        grunt.file.write('dist/metadata.json', JSON.stringify(metadata, null, 2));
-    });
-};

gulpfile.js

@@ -0,0 +1,308 @@
+/* Utlimate Jay Mega Gulpfile */
+/* global require:true */
+/* jshint laxbreak:true */
+
+(function () {
+    'use strict';
+ 
+    var pkg       = require('./package.json'),
+        del       = require('del'),
+        yargs     = require('yargs'),
+        exec      = require('exec'),
+        fs        = require('fs'),
+        gulp      = require('gulp'),
+        bump      = require('gulp-bump'),
+        header    = require('gulp-header'),
+        cssmin    = require('gulp-cssmin'),
+        uglify    = require('gulp-uglify'),
+        sourcemap = require('gulp-sourcemaps'),
+        jshint    = require('gulp-jshint'),
+        gutil     = require('gulp-util'),
+        zip       = require('gulp-zip'),
+        rename    = require('gulp-rename'),
+        replace   = require('gulp-replace'),
+        gsync     = require('gulp-sync'),
+        sync      = gsync(gulp).sync;
+
+    var bumpVersion = yargs.argv.type || 'patch';
+
+    var settings = {
+        name: 'vegas',
+        banner: {
+            content: [
+                ' // ----------------------------------------------------------------------------',
+                ' // <%= pkg.description %>',
+                ' // v<%= pkg.version %> - released <%= datetime %>',
+                ' // Licensed under the MIT License.',
+                ' // http://vegas.jaysalvat.com/',
+                ' // ----------------------------------------------------------------------------',
+                ' // Copyright (C) 2010-<%= year %> Jay Salvat',
+                ' // http://jaysalvat.com/',
+                ' // ----------------------------------------------------------------------------',
+                ''
+            ].join('\n'),
+            vars: {
+                pkg: pkg,
+                datetime: gutil.date('yyyy-mm-dd'),
+                year: gutil.date('yyyy')
+            }
+        }
+    };
+
+    var getPackageJson = function () {
+        return JSON.parse(fs.readFileSync('./package.json'));
+    };
+
+    gulp.task('clean', function (cb) {
+        return del([ './dist' ], cb);
+    });
+
+    gulp.task('tmp-clean', function (cb) {
+        return del([ './tmp' ], cb);
+    });
+
+    gulp.task('tmp-create', function (cb) {
+        return exec('mkdir -p ./tmp', cb);
+    });
+
+    gulp.task('tmp-copy', [ 'tmp-create' ], function () {
+        return gulp.src('./dist/**/*')
+            .pipe(gulp.dest('./tmp'));
+    });
+
+    gulp.task('zip', [ 'tmp-create' ], function () {
+        var filename = settings.name + '.zip';
+
+        return gulp.src('./dist/**/*')
+            .pipe(zip(filename))
+            .pipe(gulp.dest('./tmp'));
+    });
+
+    gulp.task('fail-if-dirty', function (cb) {
+        return exec('git diff-index HEAD --', function (err, output) { // err, output, code
+            if (err) {
+                return cb(err);
+            }
+            if (output) {
+                return cb('Repository is dirty');
+            }
+            return cb();
+        });
+    });
+
+    gulp.task('fail-if-not-master', function (cb) {
+        exec('git symbolic-ref -q HEAD', function (err, output) { // err, output, code
+            if (err) {
+                return cb(err);
+            }
+            if (!/refs\/heads\/master/.test(output)) {
+                return cb('Branch is not Master');
+            }
+            return cb();
+        });
+    });
+
+    gulp.task('git-tag', function (cb) {
+        var message = 'v' + getPackageJson().version;
+
+        return exec('git tag ' + message, cb);
+    });
+
+    gulp.task('git-add', function (cb) {
+        return exec('git add -A', cb);
+    });
+
+    gulp.task('git-commit', [ 'git-add' ], function (cb) {
+        var message = 'Build v' + getPackageJson().version;
+
+        return exec('git commit -m "' + message + '"', cb);
+    });
+
+    gulp.task('git-pull', function (cb) {
+        return exec('git pull origin master', function (err, output, code) {
+            if (code !== 0) {
+                return cb(err + output);
+            }
+            return cb();
+        });
+    });
+
+    gulp.task('git-push', [ 'git-commit' ], function (cb) {
+        return exec('git push origin master --tags', function (err, output, code) {
+            if (code !== 0) {
+                return cb(err + output);
+            }
+            return cb();
+        });
+    });
+
+    gulp.task('meta', [ 'tmp-create' ], function (cb) {
+        var  metadata = {
+                date: gutil.date('yyyy-mm-dd HH:MM'),
+                version: 'v' + getPackageJson().version
+            },
+            json = JSON.stringify(metadata, null, 4);
+
+        fs.writeFileSync('tmp/metadata.json', json);
+        fs.writeFileSync('tmp/metadata.js', '__metadata(' + json + ');');
+
+        return cb();
+    });
+
+    gulp.task('bump', function () {
+        return gulp.src([ 'package.json', 'bower.json', 'component.json' ])
+            .pipe(bump(
+                /^[a-z]+$/.test(bumpVersion) 
+                    ? { type: bumpVersion } 
+                    : { version: bumpVersion }
+            ))
+            .pipe(gulp.dest('.'));
+    });
+
+    gulp.task('year', function () {
+        return gulp.src([ './LICENSE.md', './README.md' ])
+            .pipe(replace(/(Copyright )(\d{4})/g, '$1' + gutil.date('yyyy')))
+            .pipe(gulp.dest('.'));
+    });
+
+    gulp.task('lint', function() {
+        return gulp.src('./src/**.js')
+            .pipe(jshint())
+            .pipe(jshint.reporter('default'));
+    });
+
+    gulp.task('copy', function () {
+        return gulp.src('./src/**/*')
+            .pipe(gulp.dest('./dist'));
+    });
+
+    gulp.task('uglify', function () {
+        return gulp.src('./dist/**/!(*.min.js).js')
+            .pipe(rename({ suffix: '.min' }))
+            .pipe(sourcemap.init())
+            .pipe(uglify({
+                compress: {
+                    warnings: false
+                },
+                mangle: true,
+                outSourceMap: true
+            }))
+            .pipe(sourcemap.write('.'))
+            .pipe(gulp.dest('./dist/'));
+    });
+
+    gulp.task('cssmin', function () {
+        return gulp.src('./dist/**/!(*.min.css).css')
+            .pipe(rename({ suffix: '.min' }))
+            .pipe(cssmin())
+            .pipe(gulp.dest('./dist/'));
+    });
+
+    gulp.task('header', function () {
+        settings.banner.vars.pkg = getPackageJson();
+
+        return gulp.src('./dist/*.js')
+            .pipe(header(settings.banner.content, settings.banner.vars ))
+            .pipe(gulp.dest('./dist/'));
+    });
+
+    gulp.task('gh-pages', function (cb) {
+        var version = getPackageJson().version;
+
+        exec([  'git checkout gh-pages',
+                'rm -rf releases/' + version,
+                'mkdir -p releases/' + version,
+                'cp -r tmp/* releases/' + version,
+                'git add -A releases/' + version,
+                'rm -rf releases/latest',
+                'mkdir -p releases/latest',
+                'cp -r tmp/* releases/latest',
+                'git add -A releases/latest',
+                'git commit -m "Publish release v' + version + '."',
+                'git push origin gh-pages',
+                'git checkout -'
+            ].join(' && '),
+            function (err, output, code) {
+                if (code !== 0) {
+                    return cb(err + output);
+                }
+                return cb();
+            }
+        );
+    });
+
+    gulp.task('build', sync([
+        'lint',
+        'clean', 
+        'copy', 
+        'uglify',
+        'cssmin',
+        'header'
+    ], 
+    'building'));
+
+    gulp.task('release', sync([
+      [ 'fail-if-not-master', 'fail-if-dirty' ],
+        'git-pull',
+        'bump',
+        'license',
+        'clean',
+        'copy',
+        'uglify',
+        'cssmin',
+        'header',
+        'git-add',
+        'git-commit',
+        'git-tag',
+        'git-push',
+        'publish'
+    ], 
+    'releasing'));
+
+    gulp.task('publish', sync([
+      [ 'fail-if-not-master', 'fail-if-dirty' ],
+        'tmp-create',
+        'tmp-copy',
+        'meta',
+        'zip',
+        'gh-pages',
+        'tmp-clean'
+    ], 
+    'publising'));
+})();
+
+/*
+
+NPM Installation
+----------------
+
+npm install --save-dev del
+npm install --save-dev yargs
+npm install --save-dev exec
+npm install --save-dev fs
+npm install --save-dev gulp
+npm install --save-dev gulp-bump
+npm install --save-dev gulp-header
+npm install --save-dev gulp-cssmin
+npm install --save-dev gulp-uglify
+npm install --save-dev gulp-sourcemaps
+npm install --save-dev gulp-jshint
+npm install --save-dev gulp-util
+npm install --save-dev gulp-zip
+npm install --save-dev gulp-rename
+npm install --save-dev gulp-replace
+npm install --save-dev gulp-sync
+
+Gh-pages creation
+-----------------
+
+git checkout --orphan gh-pages
+git rm -rf .
+rm -fr
+echo 'Welcome' > index.html
+git add index.html
+git commit -a -m 'First commit'
+git push origin gh-pages
+git checkout -
+
+*/

package.json

@@ -1,29 +1,43 @@
 {
-    "name": "Vegas",
-    "version": "1.3.5",
-    "description": "Vegas - Fullscreen Backgrounds and Slideshows with jQuery.",
-    "homepage": "http://vegas.jaysalvat.com",
-    "author": "Jay Salvat",
-    "license": "MIT",
-    "main": "dist/jquery.vegas.js",
-    "repository": {
-        "type": "git",
-        "url": "[email protected]:jaysalvat/vegas.git"
-    },
-    "keywords": [
-        "jquery",
-        "background",
-        "slideshow",
-        "fullscreen",
-        "vegas"
-    ],
-    "devDependencies": {
-        "grunt": "~0.4",
-        "grunt-contrib-clean": "~0.4.0",
-        "grunt-contrib-cssmin": "~0.6.1",
-        "grunt-contrib-jshint": "~0.1",
-        "grunt-contrib-uglify": "~0.1",
-        "grunt-exec": "~0.4",
-        "semver": "^4.0.3"
-    }
-}
+  "name": "Vegas",
+  "version": "2.0.0-wip",
+  "description": "Vegas - Fullscreen Backgrounds and Slideshows.",
+  "homepage": "http://vegas.jaysalvat.com",
+  "author": "Jay Salvat",
+  "license": "MIT",
+  "main": [
+    "dist/vegas.min.js",
+    "dist/vegas.min.css"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:jaysalvat/vegas.git"
+  },
+  "keywords": [
+    "background",
+    "slideshow",
+    "fullscreen",
+    "vegas",
+    "jquery",
+    "zepto",
+    "pin"
+  ],
+  "devDependencies": {
+    "del": "^1.1.1",
+    "exec": "^0.1.3",
+    "fs": "0.0.2",
+    "gulp": "^3.8.10",
+    "gulp-bump": "^0.1.11",
+    "gulp-cssmin": "^0.1.6",
+    "gulp-header": "^1.2.2",
+    "gulp-jshint": "^1.9.0",
+    "gulp-rename": "^1.2.0",
+    "gulp-replace": "^0.5.0",
+    "gulp-sourcemaps": "^1.3.0",
+    "gulp-sync": "^0.1.4",
+    "gulp-uglify": "^1.0.2",
+    "gulp-util": "^3.0.2",
+    "gulp-zip": "^2.0.2",
+    "yargs": "^1.3.3"
+  }
+}

src/jquery.vegas.css

@@ -1,34 +0,0 @@
-.vegas-loading {
-	border-radius: 10px;
-	background: #000;
-	background: rgba(0,0,0,0.7);
-	background: url(images/loading.gif) no-repeat center center; /* Loading Gif by http://preloaders.net/ */
-	height: 32px;
-	left: 20px;
-	position: fixed;
-	top: 20px;
-	width: 32px; 
-	z-index: 0;
-}
-
-.vegas-overlay {
-	background: transparent url(overlays/01.png);
-	opacity: 0.5;
-	z-index: -1;
-}
-
-.vegas-background {
-	-ms-interpolation-mode: bicubic;
-	image-rendering: optimizeQuality;
-    max-width: none !important; /* counteracts global img modification by twitter bootstrap library */
-	z-index: -2;
-}
-
-.vegas-overlay,
-.vegas-background {
-	-webkit-user-select: none;
-	 -khtml-user-select: none;
-	   -moz-user-select: none;
-	    -ms-user-select: none;
-	        user-select: none;
-}

src/jquery.vegas.js

@@ -1,464 +0,0 @@
-// ----------------------------------------------------------------------------
-// Vegas – Fullscreen Backgrounds and Slideshows with jQuery.
-// Licensed under the MIT license.
-// http://vegas.jaysalvat.com/
-// ----------------------------------------------------------------------------
-// Copyright (C) 2013 Jay Salvat
-// http://jaysalvat.com/
-// ----------------------------------------------------------------------------
-
-(function($) {
-    var $background = $('<img />').addClass('vegas-background'),
-        $overlay = $('<div />').addClass('vegas-overlay'),
-        $loading = $('<div />').addClass('vegas-loading'),
-        $current = $(),
-        paused = null,
-        backgrounds = [],
-        step = 0,
-        delay = 5000,
-        walk = function() {},
-        timer,
-        methods = {
-
-        // Init plugin
-        init : function(settings) {
-            var options = {
-                src: getBackground(),
-                align: 'center',
-                valign: 'center',
-                fade: 0,
-                loading: true,
-                load: function() {},
-                complete: function() {}
-            };
-
-            $.extend(options, $.vegas.defaults.background, settings);
-
-            if (options.loading) {
-                loading();
-            }
-
-            var $new = $background.clone();
-            $new.css({
-                'position': 'fixed',
-                'left': '0px',
-                'top': '0px'
-            })
-            .bind('load', function() {
-                if ($new == $current) {
-                    return;
-                }
-
-                $(window).bind('load resize.vegas', function(e) {
-                    resize($new, options);
-                });
-
-                if ($current.is('img')) {
-
-                    $current.stop();
-
-                    $new.hide()
-                        .insertAfter($current)
-                        .fadeIn(options.fade, function() {
-                            $('.vegas-background')
-                                .not(this)
-                                    .remove();
-                            $('body').trigger('vegascomplete', [this, step - 1]);
-                            options.complete.apply($new, [step - 1]);
-                        });
-                } else {
-                    $new.hide()
-                        .prependTo('body')
-                        .fadeIn(options.fade, function() {
-                            $('body').trigger('vegascomplete', [this, step - 1]);
-                            options.complete.apply(this, [step - 1]);
-                        });
-                }
-
-                $current = $new;
-
-                resize($current, options);
-
-                if (options.loading) {
-                    loaded();
-                }
-
-                $('body').trigger('vegasload', [$current.get(0), step - 1]);
-                options.load.apply($current.get(0), [step - 1]);
-
-                if (step) {
-                    $('body').trigger('vegaswalk', [$current.get(0), step - 1]);
-                    options.walk.apply($current.get(0), [step - 1]);
-                }
-            })
-            .attr('src', options.src);
-
-            return $.vegas;
-        },
-
-        // Destroy background and/or overlay
-        destroy: function(what) {
-            if (!what || what == 'background') {
-                $('.vegas-background, .vegas-loading').remove();
-                $(window).unbind('*.vegas');
-                $current = $();
-            }
-
-            if (!what || what == 'overlay') {
-                $('.vegas-overlay').remove();
-            }
-
-            clearInterval(timer);
-
-            return $.vegas;
-        },
-
-        // Display the pattern overlay
-        overlay: function(settings) {
-            var options = {
-                src: null,
-                opacity: null
-            };
-            $.extend(options, $.vegas.defaults.overlay, settings);
-
-            $overlay.remove();
-
-            $overlay
-                .css({
-                    'margin': '0',
-                    'padding': '0',
-                    'position': 'fixed',
-                    'left': '0px',
-                    'top': '0px',
-                    'width': '100%',
-                    'height': '100%'
-            });
-
-            if (options.src === false) {
-                $overlay.css('backgroundImage', 'none');
-            }
-
-            if (options.src) {
-                $overlay.css('backgroundImage', 'url(' + options.src + ')');
-            }
-
-            if (options.opacity) {
-                $overlay.css('opacity', options.opacity);
-            }
-
-            $overlay.prependTo('body');
-
-            return $.vegas;
-        },
-
-        // Start/restart slideshow
-        slideshow: function(settings, keepPause) {
-            var options = {
-                step: step,
-                delay: delay,
-                preload: false,
-                loading: true,
-                backgrounds: backgrounds,
-                walk: walk
-            };
-
-            $.extend(options, $.vegas.defaults.slideshow, settings);
-
-            if (options.backgrounds != backgrounds) {
-                if (!settings.step) {
-                    options.step = 0;
-                }
-
-                if (!settings.walk) {
-                    options.walk = function() {};
-                }
-
-                if (options.preload) {
-                    $.vegas('preload', options.backgrounds);
-                }
-            }
-
-            backgrounds = options.backgrounds;
-            delay = options.delay;
-            step = options.step;
-            walk = options.walk;
-
-            clearInterval(timer);
-
-            if (!backgrounds.length) {
-                return $.vegas;
-            }
-
-            var doSlideshow = function() {
-                if (step < 0) {
-                    step = backgrounds.length - 1;
-                }
-
-                if (step >= backgrounds.length || !backgrounds[step - 1]) {
-                    step = 0;
-                }
-
-                var settings = backgrounds[step++];
-                settings.walk = options.walk;
-                settings.loading = options.loading;
-
-                if (typeof(settings.fade) == 'undefined') {
-                    settings.fade = options.fade;
-                }
-
-                if (settings.fade > options.delay) {
-                    settings.fade = options.delay;
-                }
-
-                $.vegas(settings);
-            };
-
-            doSlideshow();
-
-            if (!keepPause) {
-                paused = false;
-
-                $('body').trigger('vegasstart', [$current.get(0), step - 1]);
-            }
-
-            if (!paused) {
-                timer = setInterval(doSlideshow, options.delay);
-            }
-
-            return $.vegas;
-        },
-
-        // Jump to the next background in the current slideshow
-        next: function() {
-            var from = step;
-
-            if (step) {
-                $.vegas('slideshow', { step: step }, true);
-
-                $('body').trigger('vegasnext', [$current.get(0), step - 1, from - 1]);
-            }
-
-            return $.vegas;
-        },
-
-        // Jump to the previous background in the current slideshow
-        previous: function() {
-            var from = step;
-
-            if (step) {
-                $.vegas('slideshow', { step: step - 2 }, true);
-
-                $('body').trigger('vegasprevious', [$current.get(0), step - 1, from - 1]);
-            }
-
-            return $.vegas;
-        },
-
-        // Jump to a specific background in the current slideshow
-        jump: function(s) {
-            var from = step;
-
-            if (step) {
-                $.vegas('slideshow', { step: s }, true);
-
-                $('body').trigger('vegasjump', [$current.get(0), step - 1, from - 1]);
-            }
-
-            return $.vegas;
-        },
-
-        // Stop slideshow
-        stop: function() {
-            var from = step;
-            step = 0;
-            paused = null;
-            clearInterval(timer);
-
-            $('body').trigger('vegasstop', [$current.get(0), from - 1]);
-
-            return $.vegas;
-        },
-
-        // Pause slideShow
-        pause: function() {
-            paused = true;
-            clearInterval(timer);
-
-            $('body').trigger('vegaspause', [$current.get(0), step - 1]);
-
-            return $.vegas;
-        },
-
-        // Get some useful values or objects
-        get: function(what) {
-            if (what === null || what == 'background') {
-                return $current.get(0);
-            }
-
-            if (what == 'overlay') {
-                return $overlay.get(0);
-            }
-
-            if (what == 'step') {
-                return step - 1;
-            }
-
-            if (what == 'paused') {
-                return paused;
-            }
-        },
-
-        // Preload an array of backgrounds
-        preload: function(backgrounds) {
-            var cache = [];
-            for(var i in backgrounds) {
-                if (backgrounds[i].src) {
-                    var cacheImage = document.createElement('img');
-                    cacheImage.src = backgrounds[i].src;
-                    cache.push(cacheImage);
-                }
-            }
-
-            return $.vegas;
-        }
-    };
-
-    // Resize the background
-    function resize($img, settings) {
-        var options =  {
-            align: 'center',
-            valign: 'center'
-        };
-
-        $.extend(options, settings);
-
-        if($img.height() === 0) {
-            $img.load(function(){
-                resize($(this), settings);
-            });
-            return;
-        }
-
-        var vp = getViewportSize(),
-            ww = vp.width,
-            wh = vp.height,
-            iw = $img.width(),
-            ih = $img.height(),
-            rw = wh / ww,
-            ri = ih / iw,
-            newWidth, newHeight,
-            newLeft, newTop,
-            properties;
-
-        if (rw > ri) {
-            newWidth = wh / ri;
-            newHeight = wh;
-        } else {
-            newWidth = ww;
-            newHeight = ww * ri;
-        }
-
-        properties = {
-            'width': newWidth + 'px',
-            'height': newHeight + 'px',
-            'top': 'auto',
-            'bottom': 'auto',
-            'left': 'auto',
-            'right': 'auto'
-        };
-
-        if (!isNaN(parseInt(options.valign, 10))) {
-            properties.top = (0 - (newHeight - wh) / 100 * parseInt(options.valign, 10)) + 'px';
-        } else if (options.valign == 'top') {
-            properties.top = 0;
-        } else if (options.valign == 'bottom') {
-            properties.bottom = 0;
-        } else {
-            properties.top = (wh - newHeight) / 2;
-        }
-
-        if (!isNaN(parseInt(options.align, 10))) {
-            properties.left = (0 - (newWidth - ww) / 100 * parseInt(options.align, 10)) + 'px';
-        } else if (options.align == 'left') {
-            properties.left = 0;
-        } else if (options.align == 'right') {
-            properties.right = 0;
-        } else {
-            properties.left = (ww - newWidth) / 2 ;
-        }
-
-        $img.css(properties);
-    }
-
-    // Display the loading indicator
-    function loading() {
-        $loading.prependTo('body').fadeIn();
-    }
-
-    // Hide the loading indicator
-    function loaded() {
-        $loading.fadeOut('fast', function() {
-            $(this).remove();
-        });
-    }
-
-    // Get the background image from the body
-    function getBackground() {
-        if ($('body').css('backgroundImage')) {
-            return $('body').css('backgroundImage').replace(/url\("?(.*?)"?\)/i, '$1');
-        }
-    }
-
-    // Get the real viewport size
-    function getViewportSize(){
-        var elmt = window,
-            prop = 'inner';
-
-        if (!('innerWidth' in window)){
-            elmt = document.documentElement || document.body;
-            prop = 'client';
-        }
-
-        return {
-            width:  elmt[prop + 'Width' ],
-            height: elmt[prop + 'Height']
-        };
-    }
-
-    // The plugin
-    $.vegas = function(method) {
-        if (methods[method]) {
-            return methods[method].apply(this, Array.prototype.slice.call(arguments, 1));
-        } else if (typeof method === 'object' || !method) {
-            return methods.init.apply(this, arguments);
-        } else {
-            $.error('Method ' +  method + ' does not exist');
-        }
-    };
-
-    // Global parameters
-    $.vegas.defaults = {
-        background: {
-            // src:         string
-            // align:       string/int
-            // valign:      string/int
-            // fade:        int
-            // loading      bool
-            // load:        function
-            // complete:    function
-        },
-        slideshow: {
-            // fade:        null
-            // step:        int
-            // delay:       int
-            // backgrounds: array
-            // loading      bool
-            // preload:     bool
-            // walk:        function
-        },
-        overlay: {
-            // src:         string
-            // opacity:     float
-        }
-    };
-})(jQuery);

src/patch/vegas.pin.js

@@ -0,0 +1,56 @@
+/* 
+ * Pin compatibility patch
+ * http://pin.jaysalvat.com
+ */
+
+/* global Pin: true */
+
+(function ($) {
+    'use strict';
+
+    if ($ && $.pin) {
+        $.fn.addClass = function (name) {
+            return this.set('.' + name);
+        };
+
+        $.fn.hasClass = function (name) {
+            return this.get('.' + name);
+        };
+
+        $.fn.removeClass = function (name) {
+            return this.set('.' + name, 'remove');
+        };
+
+        $.fn.css = function (key, value) {
+            if (value === undefined) {
+                return this.get(':' + key);
+            }
+            return this.set(':' + key, value);
+        };
+
+        $.fn.attr = function (key, value) {
+            if (value === undefined) {
+                return this.get('@' + key);
+            }
+            return this.set('@' + key, value);
+        };
+
+        $.fn.fadeIn = function (duration) {
+            return this.each(function () {
+                var self  = this,
+                    start = new Date(),
+                    from  = 0,
+                    intvl = setInterval(function() {
+                        var passed   = new Date() - start,
+                            progress = passed / duration;
+
+                        self.style.opacity = from + progress;
+
+                        if (progress >= 1) {
+                            clearInterval(intvl);
+                        }
+                    }, duration || 100);
+            });
+        };
+    }
+})(typeof Pin !== 'undefined' ? Pin : null);

src/vegas.css

@@ -0,0 +1,222 @@
+.vegas-container {
+    overflow: hidden !important;
+}
+
+.vegas-wrapper,
+.vegas-overlay,
+.vegas-timer,
+.vegas-slide {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+}
+
+.vegas-overlay {
+    background: transparent url(overlays/02.png) center center repeat;
+    opacity: 0.5;
+}
+
+.vegas-timer {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+}
+    .vegas-timer-progress {
+        width: 0%;
+        height: 100%;
+        background: yellowgreen;
+        transition-property: width;
+        transition-timing-function: ease-out;
+    }
+        .vegas-timer-running .vegas-timer-progress {
+            width: 100%;
+        }
+
+.vegas-slide {
+    padding: 0;
+    background: transparent center center no-repeat;
+    -webkit-transform: translateZ(0);
+            transform: translateZ(0);
+}
+
+body.vegas-container {
+    overflow: auto;
+}
+    body.vegas-container > .vegas-timer,
+    body.vegas-container > .vegas-overlay,
+    body.vegas-container > .vegas-slide {
+        position: fixed;
+        z-index: -1;
+    }
+
+.vegas-video {
+    min-width: 100%; 
+    min-height: 100%;
+    width: auto; 
+    height: auto;
+}
+
+/* fade */
+
+.vegas-transition-fade {
+    opacity: 0;
+}
+
+.vegas-transition-fade-in {
+    opacity: 1;
+}
+
+.vegas-transition-fade-out {
+    opacity: 0;
+}
+
+/* slideLeft */
+
+.vegas-transition-slideLeft {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+}
+
+.vegas-transition-slideLeft-in {
+     -webkit-transform: translateX(0%);
+             transform: translateX(0%); 
+}
+
+.vegas-transition-slideLeft-out {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+}
+
+/* slideRight */
+
+.vegas-transition-slideRight {
+    -webkit-transform: translateX(-100%);
+            transform: translateX(-100%);
+}
+
+.vegas-transition-slideRight-in {
+     -webkit-transform: translateX(0%);
+             transform: translateX(0%); 
+}
+
+.vegas-transition-slideRight-out {
+    -webkit-transform: translateX(100%);
+            transform: translateX(100%);
+}
+
+/* slideUp */
+
+.vegas-transition-slideUp {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+}
+
+.vegas-transition-slideUp-in {
+     -webkit-transform: translateY(0%);
+             transform: translateY(0%); 
+}
+
+.vegas-transition-slideUp-out {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+}
+
+/* slideDown */
+
+.vegas-transition-slideDown {
+    -webkit-transform: translateY(-100%);
+            transform: translateY(-100%);
+}
+
+.vegas-transition-slideDown-in {
+     -webkit-transform: translateY(0%);
+             transform: translateY(0%); 
+}
+
+.vegas-transition-slideDown-out {
+    -webkit-transform: translateY(100%);
+            transform: translateY(100%);
+}
+
+/* zoomIn */
+
+.vegas-transition-zoomIn {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 0;
+}
+
+.vegas-transition-zoomIn-in {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomIn-out {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+}
+
+/* zoomOut */
+
+.vegas-transition-zoomOut {
+    -webkit-transform: scale(2);
+            transform: scale(2);
+    opacity: 0;
+}
+
+.vegas-transition-zoomOut-in {
+    -webkit-transform: scale(1);
+            transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomOut-out {
+    -webkit-transform: scale(0);
+            transform: scale(0);
+    opacity: 0;
+}
+
+/* swirlLeft */
+
+.vegas-transition-swirlLeft {
+    -webkit-transform: scale(2) rotate(35deg);
+            transform: scale(2) rotate(35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlLeft-in {
+     -webkit-transform: scale(1) rotate(0deg);
+             transform: scale(1) rotate(0deg); 
+    opacity: 1;
+}
+
+.vegas-transition-swirlLeft-out {
+    -webkit-transform: scale(2) rotate(-35deg);
+            transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+/* swirlRight */
+
+.vegas-transition-swirlRight {
+    -webkit-transform: scale(2) rotate(-35deg);
+            transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlRight-in {
+     -webkit-transform: scale(1) rotate(0deg);
+             transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+.vegas-transition-swirlRight-out {
+    -webkit-transform: scale(2) rotate(35deg);
+            transform: scale(2) rotate(35deg);
+    opacity: 0;
+}

src/vegas.js

@@ -0,0 +1,493 @@
+
+/* global jQuery, Zepto, Pin */
+
+(function ($) {
+    'use strict';
+
+    var defaults = {
+        slide:           0,
+        delay:           5000,
+        preload:         true,
+        timer:           true,
+        overlay:         false,
+        autoplay:        true,
+        shuffle:         false,
+        fill:            true,
+        color:           null,
+        align:           'center',
+        valign:          'center',
+        transition:      'fade',
+        transitionDelay: 1000,
+        init:  function () {},
+        play:  function () {},
+        pause: function () {},
+        walk:  function () {},
+        slides: [
+            // {   
+            //  src:             null,
+            //  color:           null,
+            //  delay:           null,
+            //  align:           null,
+            //  valign:          null,
+            //  transition:      null,
+            //  transitiondelay: null,
+            //  fill:            true,
+            //  videos:          []
+            // }
+            // ...
+        ]
+    };
+
+    var Vegas = function (elmt, options) {
+        this.elmt         = elmt;
+        this.settings     = $.extend({}, defaults, $.vegas.defaults, options);
+        this.slide        = this.settings.slide;
+        this.total        = this.settings.slides.length;
+        this.noshow       = this.total < 2;
+        this.paused       = !this.settings.autoplay || this.noshow;
+        this.$elmt        = $(elmt);
+        this.$timer       = null;
+        this.$overlay     = null;
+        this.$slide       = null;
+        this.timeout      = null;
+        this.transitions  = [];
+
+        this.support = {
+            objectFit:  'objectFit'  in document.body.style,
+            transition: 'transition' in document.body.style || 'WebkitTransition' in document.body.style,
+            video:      $.vegas.isVideoCompatible()
+        };
+
+        for (var i = 0; i < document.styleSheets.length; i++) {
+            var sheet = document.styleSheets[i],
+                rules = sheet.rules ? sheet.rules : sheet.cssRules;
+
+            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);
+                
+                    if (match && match[1]) {
+                        this.transitions.push(match[1]);
+                    }
+                }
+            }
+        }
+
+        if (this.settings.shuffle === true) {
+            this.shuffle();
+        }
+
+        this._init();
+    };
+
+    Vegas.prototype = {
+        _init: function () {
+            var $wrapper,
+                $overlay,
+                $timer,
+                isBody    = this.elmt.tagName === 'BODY',
+                timer     = this.settings.timer,
+                overlay   = this.settings.overlay,
+                preload   = this.settings.preload,
+                position  = this.$elmt.css('position'),
+                img,
+                i;
+
+            // Preloading
+            if (preload) {
+                for (i = 0; i < this.settings.slides.length; i++) {
+                    img = new Image();
+                    img.src = this.settings.slides[i].src;
+                }
+            }
+
+            // Wrapper with content
+            if (!isBody) {
+                $wrapper = $('<div class="vegas-wrapper">')
+                    .css('overflow', this.$elmt.css('overflow'))
+                    .css('padding',  this.$elmt.css('padding'));
+
+                // Some browsers don't compute padding shorthand
+                if (!this.$elmt.css('padding')) {
+                    $wrapper
+                        .css('padding-top',    this.$elmt.css('padding-top'))
+                        .css('padding-bottom', this.$elmt.css('padding-bottom'))
+                        .css('padding-left',   this.$elmt.css('padding-left'))
+                        .css('padding-right',  this.$elmt.css('padding-right'));
+                }
+
+                $wrapper[0].innerHTML = this.elmt.innerHTML;
+                this.elmt.innerHTML = '';
+            }
+
+            // Timer
+            if (timer && this.support.transition) {
+                $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
+                this.$timer = $timer;
+                this.$elmt.prepend($timer);
+            }
+
+            // Overlay
+            if (overlay) {
+                $overlay = $('<div class="vegas-overlay">');
+                if (typeof overlay === 'string') {
+                    $overlay.css('background-image', 'url(' + overlay + ')');
+                }
+                this.$overlay = $overlay;
+                this.$elmt.prepend($overlay);
+            }
+
+            // Container
+            this.$elmt.addClass('vegas-container');
+            if (!isBody) {
+                if (position === 'static') {
+                    this.$elmt.css('position', 'relative');
+                }
+                this.$elmt.append($wrapper);
+            }
+
+            this.trigger('init');
+            this._goto(this.slide);
+        },
+
+        _slideShow: function () {
+            var self = this;
+
+            if (this.paused || this.noshow) {
+                clearTimeout(this.timeout);
+            } else {
+                this.timeout = setTimeout(function () {
+                    self.next();
+                }, this._options('delay')); 
+            }
+        },
+
+        _timer: function (state) {
+            var self = this;
+
+            clearTimeout(this.timeout);
+
+            if (!this.$timer || this.paused || this.noshow) {
+                return;
+            }
+
+            this.$timer
+                .removeClass('vegas-timer-running')
+                    .find('div')
+                        .css('transition-duration', '0ms');
+
+            if (state) {
+                setTimeout(function () {
+                   self.$timer
+                    .addClass('vegas-timer-running')
+                        .find('div')
+                            .css('transition-duration', self._options('delay') - 100 + 'ms');
+                }, 100);
+            }
+        },
+
+        _options: function (key, i) {
+            if (i === undefined) {
+                i = this.slide;
+            }
+
+            if (this.settings.slides[i][key] !== undefined) {
+                return this.settings.slides[i][key];
+            }
+
+            return this.settings[key];
+        },
+
+        _goto: function (nb) {
+            this.slide = nb;
+
+            var $slide,
+                $slides    = this.$elmt.children('.vegas-slide'),
+                total      = $slides.length,
+                self       = this,
+                src        = this.settings.slides[nb].src,
+                videos     = this.settings.slides[nb].video,
+                delay      = this._options('delay'),
+                duration   = this._options('transitionDelay'),
+                align      = this._options('align'),
+                valign     = this._options('valign'),
+                color      = this._options('color') || this.$elmt.css('background-color'),
+                fill       = this._options('fill') ? 'cover' : 'contain',
+                transition = this._options('transition'),
+                isRandom   = transition === 'random',
+                video,
+                source,
+                img;
+
+            if (isRandom) {
+                transition = this.transitions[Math.floor(Math.random() * (this.transitions.length - 1))];
+            }
+
+            if (transition !== 'none' && this.transitions.indexOf(transition) < 0) {
+                console.error("Vegas: Transition " + transition + " doesn't exist.");
+            }
+
+            if (duration > delay) {
+                duration = delay;
+            }
+
+            if (this.support.video && videos) {
+                if (videos instanceof Array === false) {
+                    videos = [ videos ];
+                }
+
+                video = document.createElement('video');
+                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')
+                    .addClass('vegas-transition-' + transition)
+                    .css('background-color', color);
+
+                if (this.support.objectFit) {
+                    $slide
+                        .css('object-position', align + ' ' + valign)
+                        .css('object-fit', fill)
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                } else if (fill === 'contain') {
+                    $slide
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                }
+            } else {
+                img = new Image();
+                img.src = src;
+
+                $slide = $('<div></div>')
+                    .addClass('vegas-slide')
+                    .addClass('vegas-transition-' + transition)
+                    .css('background-image',    'url(' + src + ')')
+                    .css('background-color',    color)
+                    .css('background-position', align + ' ' + valign)
+                    .css('background-size',     fill);
+            }
+
+            if (!self.support.transition) {
+                $slide.css('display', 'none');
+            }
+
+            if (total) {
+                $slides.eq(total - 1).after($slide);
+            } else {
+                this.$elmt.prepend($slide);
+            }
+
+            $slides
+                .css('transition', 'all 0ms')
+                .each(function () {
+                    this.className  = ' vegas-slide';
+                    this.className += ' vegas-transition-' +  transition;
+                    this.className += ' vegas-transition-' +  transition + '-in';
+                    
+                    if (video) {
+                        this.className += ' vegas-video';    
+                    }
+                }
+            );
+
+            self._timer(false);
+
+            function go () {
+                self._timer(true);
+
+                setTimeout(function () {
+                    if (self.support.transition) {
+                        $slides
+                            .css('transition', 'all ' + duration + 'ms')
+                            .addClass('vegas-transition-' + transition + '-out');
+                    }
+
+                    $slide
+                        .css('transition', 'all ' + duration + 'ms')
+                        .addClass('vegas-transition-' + transition + '-in');
+
+                    if (!self.support.transition) {
+                        $slide.fadeIn(duration);
+                    }
+
+                    if ($slides.length >= 2) {
+                         $slides.eq(0).remove();
+                    }
+
+                    self.trigger('walk');
+                    self._slideShow();
+                }, 100);
+            }
+
+            if (video) {
+                video.play();
+                video.oncanplay = go;
+            } else {
+                img.onload = go;
+            }
+        },
+
+        shuffle: function () {
+            var temp,
+                rand;
+
+            for (var i = this.total - 1; i > 0; i--) {
+                rand = Math.floor(Math.random() * (i + 1));
+                temp = this.settings.slides[i];
+                this.settings.slides[i] = this.settings.slides[rand];
+                this.settings.slides[rand] = temp;
+            }
+        },
+
+        play: function () {
+            if (this.paused) {
+                this.paused = false;
+                this.next();
+                this.trigger('play');
+            }
+        },
+
+        pause: function () {
+            this._timer(false);
+            this.paused = true;
+            this.trigger('pause');
+        },
+
+        toggle: function () {
+            if (this.paused) {
+                this.play();
+            } else {
+                this.pause();
+            }
+        },
+
+        playing: function () {
+            return !this.paused && !this.noshow;
+        },
+
+        current: function (advanced) {
+            if (advanced) {
+                return {
+                    slide: this.slide,
+                    data:  this.settings.slides[this.slide]
+                };
+            }
+            return this.slide;
+        },
+
+        jump: function (nb) {
+            if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
+                return;
+            }
+
+            this.slide = nb;
+            this._goto(this.slide);
+        },
+
+        next: function () {
+            this.slide++;
+
+            if (this.slide >= this.total) {
+                this.slide = 0;
+            }
+
+            this._goto(this.slide);
+        },
+
+        previous: function () {
+            this.slide--;
+
+            if (this.slide < 0) {
+                this.slide = this.total - 1;
+            }
+
+            this._goto(this.slide);
+        },
+
+        trigger: function (fn) {
+            var params = [];
+
+            if (fn !== 'init') {
+                params = [ 
+                    this.slide, 
+                    this.settings.slides[this.slide]
+                ];
+            }
+
+            this.$elmt.trigger('vegas' + fn, params);
+
+            if (typeof this.settings[fn] === 'function') {
+                this.settings[fn].apply(this.$elmt, params);
+            }
+        },
+
+        options: function (key, value) {
+            if (typeof key === 'string') {
+                if (value === undefined) {
+                    return this.settings[key];
+                }
+                this.settings[key] = value;
+            } else if (typeof key === 'object') {
+                this.settings = key;
+            } else {
+                return this.settings;
+            }
+        }
+    };
+
+    $.fn.vegas = function(options) {
+        var args = arguments,
+            error = false,
+            returns;
+
+        if (options === undefined || typeof options === 'object') {
+            return this.each(function () {
+                if (!this._vegas) {
+                    this._vegas = new Vegas(this, options);
+                }
+            });
+        } else if (typeof options === 'string') {
+            this.each(function () {
+                var instance = this._vegas;
+
+                if (!instance) {
+                    throw new Error('No Vegas applied to this element.');
+                }
+
+                if (typeof instance[options] === 'function' && options[0] !== '_') {
+                    returns = instance[options].apply(instance, [].slice.call(args, 1));
+                } else {
+                    error = true;
+                }
+            });
+
+            if (error) {
+                throw new Error('No method "' + options + '" in Vegas.');
+            }
+
+            return returns !== undefined ? returns : this;
+        }
+    };
+
+    $.vegas = {};
+    $.vegas.defaults = defaults;
+
+    $.vegas.isVideoCompatible = function () {
+        return !('ontouchstart' in window || 'onmsgesturechange' in window);
+    };
+
+})(typeof jQuery !== 'undefined' ? jQuery :
+   typeof Zepto  !== 'undefined' ? Zepto  :
+   typeof Pin    !== 'undefined' ? Pin    : null
+);