Sfoglia il codice sorgente

Merge branch 'merged'

Jay Salvat 10 anni fa
parent
commit
028da6a337

+ 23 - 1
CHANGELOG.md

@@ -2,6 +2,28 @@
 
 ## CHANGE LOG
 
+### Vegas 2.0.4 2015-03-12
+
+* New video options mute and loop
+
+### Vegas 2.0.3 2015-03-06
+
+* Restore missing overlays
+
+### Vegas 2.0.2 2015-03-06
+
+* Fix a bug with random transitions
+* Remove Transition/Animation auto-detection 
+* Aad TransitionRegister/AnimationRegister options instead
+
+### Vegas 2.0.1 2015-03-05
+
+* Remove dev folder
+
+### Vegas 2.0.0 2015-03-05
+
+* Brand new Vegas V2
+
 ### Vegas 1.3.4 2013-12-16
 
 * Allow overlay(false) to disable overlay when vegas is already running
@@ -58,4 +80,4 @@
 
 ### Vegas 1.0.0 2011-05-13
 
-* First public release
+* First public release

+ 1 - 1
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

+ 51 - 7
README.md

@@ -1,11 +1,41 @@
-Vegas – Fullscreen Backgrounds and Slideshows with jQuery
-=========================================================
+Vegas – Backgrounds and Slideshows
+==================================
 
-Vegas is a jQuery plugin to add beautiful fullscreen backgrounds to your webpages. You can even create amazing Slideshows.
+[![NPM version](https://badge.fury.io/js/vegas.svg)](http://badge.fury.io/js/vegas)
+[![Bower version](https://badge.fury.io/bo/vegas.svg)](http://badge.fury.io/bo/vegas)
+
+Vegas is a [jQuery](http://jquery.com)/[Zepto](http://zeptojs.com) plugin 
+to add beautiful backgrounds and Slideshows to DOM elements.
+
+**Important note:** Vegas 2 is not a drop-in replacement for version 1.x. It's a brand new plugin.
+
+#### Install
+
+Download the [last version](http://jaysalvat.github.io/vegas/releases/latest/vegas.zip).
+
+Or use [Bower](http://bower.io/):
+
+    bower install vegas
+
+Or use [NPM](https://www.npmjs.org/):
+
+    npm install vegas
+
+#### Get started
+
+First, include either [jQuery](http://jquery.com) or [Zepto](http://zeptojs.com).
+
+Then...
 
     $(function() {
-	    $.vegas('/img/background.jpg')('overlay');
-	}
+        $('body').vegas({
+            slides: [
+                { src: 'img1.jpg' },
+                { src: 'img2.jpg' },
+                { src: 'img3.jpg' }
+            ]
+        });
+    }
 
 ### Official website
 http://vegas.jaysalvat.com/
@@ -16,10 +46,24 @@ http://vegas.jaysalvat.com/demo/
 ### Documentation
 http://vegas.jaysalvat.com/documentation/
 
+#### Looking for Vegas v1?
+
+The [Vegas v1 website](http://v1.vegas.jaysalvat.com) is still available but this version is not maintained anymore.
+
 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!
+
+Install dependencies.
+
+    npm install
+
+Run watch task before editing code. 
+
+    gulp watch
+
 Regarding code style like indentation and whitespace, **follow the conventions you see used in the source already.**
 
 License
@@ -27,7 +71,7 @@ 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

+ 5 - 5
bower.json

@@ -1,13 +1,13 @@
 {
-    "name": "Vegas",
-    "version": "1.3.5",
+    "name": "vegas",
+    "version": "2.0.3",
     "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"
     ],

+ 9 - 7
component.json

@@ -1,23 +1,25 @@
 {
-    "name": "Vegas",
-    "version": "1.3.5",
-    "description": "Vegas - Fullscreen Backgrounds and Slideshows with jQuery.",
+    "name": "vegas",
+    "version": "2.0.3",
+    "description": "Vegas - Fullscreen Backgrounds and Slideshows.",
     "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-plugin",
+        "jquery",
+        "zepto"
     ]
 }

+ 0 - 164
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));
-    });
-};

+ 334 - 0
gulpfile.js

@@ -0,0 +1,334 @@
+/* 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'),
+        prefixer  = require('gulp-autoprefixer'),
+        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 %> - built <%= 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("npm-publish", function (cb) {
+        exec('npm publish', 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('autoprefixer', function () {
+        return gulp.src('./dist/**/*.css')
+            .pipe(prefixer())
+            .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(prefixer())
+            .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("watch", function() {
+        gulp.watch("./src/**/*", [ "build" ]);
+    });
+
+    gulp.task('build', sync([
+        'lint',
+        'clean', 
+        'copy', 
+        'autoprefixer',
+        'uglify',
+        'cssmin',
+        'header'
+    ], 
+    'building'));
+
+    gulp.task('release', sync([
+      [ 'fail-if-not-master', 'fail-if-dirty' ],
+        'git-pull',
+        'bump',
+        'year',
+        'clean',
+        'copy',
+        'autoprefixer',
+        'uglify',
+        'cssmin',
+        'header',
+        'git-add',
+        'git-commit',
+        'git-tag',
+        'git-push',
+        'publish',
+        'npm-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-autoprefixer
+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 -
+
+*/

+ 43 - 28
package.json

@@ -1,29 +1,44 @@
 {
-    "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.3",
+  "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-plugin",
+    "jquery",
+    "zepto"
+  ],
+  "devDependencies": {
+    "del": "^1.1.1",
+    "exec": "^0.1.3",
+    "fs": "0.0.2",
+    "gulp": "^3.8.10",
+    "gulp-autoprefixer": "^2.1.0",
+    "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"
+  }
+}

BIN
src/images/loading.gif


+ 0 - 34
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;
-}

+ 0 - 464
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,
-        isIPhone = (navigator.userAgent.match(/iPod|iPhone/i)),
-        IPhoneHeightOffset = 76,
-        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: isIPhone ? elmt[prop + "Height"] + IPhoneHeightOffset : 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);

BIN
src/overlays/01.png


BIN
src/overlays/02.png


BIN
src/overlays/09.png


BIN
src/overlays/10.png


BIN
src/overlays/11.png


BIN
src/overlays/12.png


BIN
src/overlays/13.png


BIN
src/overlays/14.png


BIN
src/overlays/15.png


+ 408 - 0
src/vegas.css

@@ -0,0 +1,408 @@
+.vegas-wrapper,
+.vegas-overlay,
+.vegas-timer,
+.vegas-slide,
+.vegas-slide-inner {
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+    margin: 0;
+}
+
+.vegas-overlay {
+    opacity: .5;
+    background: transparent url(overlays/02.png) center center repeat;
+}
+
+.vegas-timer {
+    top: auto;
+    bottom: 0;
+    height: 2px;
+}
+    .vegas-timer-progress {
+        width: 0%;
+        height: 100%;
+        background: yellowgreen;
+        transition: width ease-out;
+    }
+        .vegas-timer-running .vegas-timer-progress {
+            width: 100%;
+        }
+
+.vegas-slide,
+.vegas-slide-inner {
+    margin: 0;
+    padding: 0;
+    background: transparent center center no-repeat;
+    transform: translateZ(0);
+}
+
+body .vegas-container {
+    overflow: hidden !important;
+    position: relative;
+}
+    
+.vegas-video {
+    min-width: 100%; 
+    min-height: 100%;
+    width: auto; 
+    height: auto;
+}
+
+body.vegas-container {
+    overflow: auto;
+    position: static;
+    z-index: -2;
+}
+    body.vegas-container > .vegas-timer,
+    body.vegas-container > .vegas-overlay,
+    body.vegas-container > .vegas-slide {
+        position: fixed;
+        z-index: -1;
+    }
+
+    /* Target Safari IOS7+ in order to add 76px */
+    _::full-page-media, _:future, 
+    :root body.vegas-container > .vegas-slide,
+    :root body.vegas-container > .vegas-overlay {
+        bottom: -76px;
+    }
+
+/*************************
+    Transitions
+ *************************/
+
+/* fade */
+.vegas-transition-fade,
+.vegas-transition-fade2 {
+    opacity: 0;
+}
+
+.vegas-transition-fade-in,
+.vegas-transition-fade2-in {
+    opacity: 1;
+}
+
+.vegas-transition-fade2-out {
+    opacity: 0;
+}
+
+/* blur */
+.vegas-transition-blur,
+.vegas-transition-blur2 {
+    opacity: 0;
+    filter: blur(32px);
+}
+
+.vegas-transition-blur-in,
+.vegas-transition-blur2-in {
+    opacity: 1;
+    filter: blur(0px);
+}
+
+.vegas-transition-blur2-out {
+    opacity: 0;
+}
+
+/* flash */
+.vegas-transition-flash,
+.vegas-transition-flash2 {
+    opacity: 0;
+    filter: brightness(25);
+}
+
+.vegas-transition-flash-in,
+.vegas-transition-flash2-in {
+    opacity: 1;
+    filter: brightness(1);
+}
+
+.vegas-transition-flash2-out {
+    opacity: 0;
+    filter: brightness(25);
+}
+
+/* negative */
+.vegas-transition-negative,
+.vegas-transition-negative2 {
+    opacity: 0;
+    filter: invert(100%);
+}
+
+.vegas-transition-negative-in,
+.vegas-transition-negative2-in {
+    opacity: 1;
+    filter: invert(0);
+}
+
+.vegas-transition-negative2-out {
+    opacity: 0;
+    filter: invert(100%);
+}
+
+/* burn */
+.vegas-transition-burn,
+.vegas-transition-burn2 {
+    opacity: 0;
+    filter: contrast(1000%) saturate(1000%);
+}
+
+.vegas-transition-burn-in,
+.vegas-transition-burn2-in {
+    opacity: 1;
+    filter: contrast(100%) saturate(100%);
+}
+
+.vegas-transition-burn2-out {
+    opacity: 0;
+    filter: contrast(1000%) saturate(1000%);
+}
+
+/* slideLeft */
+.vegas-transition-slideLeft,
+.vegas-transition-slideLeft2 {
+    transform: translateX(100%);
+}
+
+.vegas-transition-slideLeft-in,
+.vegas-transition-slideLeft2-in {
+    transform: translateX(0%); 
+}
+
+.vegas-transition-slideLeft2-out {
+    transform: translateX(-100%);
+}
+
+/* slideRight */
+.vegas-transition-slideRight,
+.vegas-transition-slideRight2 {
+    transform: translateX(-100%);
+}
+
+.vegas-transition-slideRight-in,
+.vegas-transition-slideRight2-in {
+    transform: translateX(0%); 
+}
+
+.vegas-transition-slideRight2-out {
+    transform: translateX(100%);
+}
+
+/* slideUp */
+.vegas-transition-slideUp,
+.vegas-transition-slideUp2 {
+    transform: translateY(100%);
+}
+
+.vegas-transition-slideUp-in,
+.vegas-transition-slideUp2-in {
+    transform: translateY(0%); 
+}
+
+.vegas-transition-slideUp2-out {
+    transform: translateY(-100%);
+}
+
+/* slideDown */
+.vegas-transition-slideDown,
+.vegas-transition-slideDown2 {
+    transform: translateY(-100%);
+}
+
+.vegas-transition-slideDown-in,
+.vegas-transition-slideDown2-in {
+    transform: translateY(0%); 
+}
+
+.vegas-transition-slideDown2-out {
+    transform: translateY(100%);
+}
+
+/* zoomIn */
+.vegas-transition-zoomIn,
+.vegas-transition-zoomIn2 {
+    transform: scale(0);
+    opacity: 0;
+}
+
+.vegas-transition-zoomIn-in,
+.vegas-transition-zoomIn2-in {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomIn2-out {
+    transform: scale(2);
+    opacity: 0;
+}
+
+/* zoomOut */
+.vegas-transition-zoomOut,
+.vegas-transition-zoomOut2 {
+    transform: scale(2);
+    opacity: 0;
+}
+
+.vegas-transition-zoomOut-in,
+.vegas-transition-zoomOut2-in {
+    transform: scale(1);
+    opacity: 1;
+}
+
+.vegas-transition-zoomOut2-out {
+    transform: scale(0);
+    opacity: 0;
+}
+
+/* swirlLeft */
+.vegas-transition-swirlLeft,
+.vegas-transition-swirlLeft2 {
+    transform: scale(2) rotate(35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlLeft-in,
+.vegas-transition-swirlLeft2-in {
+    transform: scale(1) rotate(0deg); 
+    opacity: 1;
+}
+
+.vegas-transition-swirlLeft2-out {
+    transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+/* swirlRight */
+.vegas-transition-swirlRight,
+.vegas-transition-swirlRight2 {
+    transform: scale(2) rotate(-35deg);
+    opacity: 0;
+}
+
+.vegas-transition-swirlRight-in,
+.vegas-transition-swirlRight2-in {
+    transform: scale(1) rotate(0deg);
+    opacity: 1;
+}
+
+.vegas-transition-swirlRight2-out {
+    transform: scale(2) rotate(35deg);
+    opacity: 0;
+}
+
+/*************************
+    Animations
+ *************************/
+
+.vegas-animation-kenburns {
+    animation: kenburns ease-out;
+}
+@keyframes kenburns {
+    0% {
+        transform: scale(1.5);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+
+.vegas-animation-kenburnsUp {
+    animation: kenburnsUp ease-out;
+}
+@keyframes kenburnsUp {
+    0% {
+        transform: scale(1.5) translate(0, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDown {
+    animation: kenburnsDown ease-out;
+}
+@keyframes kenburnsDown {
+    0% {
+        transform: scale(1.5) translate(0, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsLeft {
+    animation: kenburnsLeft ease-out;
+}
+@keyframes kenburnsLeft {
+    0% {
+        transform: scale(1.5) translate(10%, 0);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsRight {
+    animation: kenburnsRight ease-out;
+}
+@keyframes kenburnsRight {
+    0% {
+        transform: scale(1.5) translate(-10%, 0);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpLeft {
+    animation: kenburnsUpLeft ease-out;
+}
+@keyframes kenburnsUpLeft {
+    0% {
+        transform: scale(1.5) translate(10%, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsUpRight {
+    animation: kenburnsUpRight ease-out;
+}
+@keyframes kenburnsUpRight {
+    0% {
+        transform: scale(1.5) translate(-10%, 10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownLeft {
+    animation: kenburnsDownLeft ease-out;
+}
+@keyframes kenburnsDownLeft {
+    0% {
+        transform: scale(1.5) translate(10%, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}
+
+.vegas-animation-kenburnsDownRight {
+    animation: kenburnsDownRight ease-out;
+}
+@keyframes kenburnsDownRight {
+    0% {
+        transform: scale(1.5) translate(-10%, -10%);
+    }
+    100% {
+        transform: scale(1) translate(0, 0);
+    }
+}

+ 669 - 0
src/vegas.js

@@ -0,0 +1,669 @@
+
+/* global jQuery, Zepto */
+
+(function ($) {
+    'use strict';
+
+    var defaults = {
+        slide:              0,
+        delay:              5000,
+        preload:            false,
+        preloadImage:       false,
+        preloadVideo:       false,
+        timer:              true,
+        overlay:            false,
+        autoplay:           true,
+        shuffle:            false,
+        cover:              true,
+        color:              null,
+        align:              'center',
+        valign:             'center',
+        transition:         'fade',
+        transitionDuration: 1000,
+        transitionRegister: [],
+        animation:          null,
+        animationDuration:  'auto',
+        animationRegister:  [],
+        init:  function () {},
+        play:  function () {},
+        pause: function () {},
+        walk:  function () {},
+        slides: [
+            // {   
+            //  src:                null,
+            //  color:              null,
+            //  delay:              null,
+            //  align:              null,
+            //  valign:             null,
+            //  transition:         null,
+            //  transitionDuration: null,
+            //  animation:          null,
+            //  animationDuration:  null,
+            //  cover:              true,
+            //  video: {
+            //      src: [],
+            //      mute: true,
+            //      loop: true
+            // }
+            // ...
+        ]
+    };
+
+    var videoCache = {};
+
+    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 = [
+            'fade', 'fade2',
+            'blur', 'blur2',
+            'flash', 'flash2',
+            'negative', 'negative2',
+            'burn', 'burn2',
+            'slideLeft', 'slideLeft2',
+            'slideRight', 'slideRight2',
+            'slideUp', 'slideUp2',
+            'slideDown', 'slideDown2',
+            'zoomIn', 'zoomIn2',
+            'zoomOut', 'zoomOut2',
+            'swirlLeft', 'swirlLeft2',
+            'swirlRight', 'swirlRight2'
+        ];
+
+        this.animations = [
+            'kenburns',
+            'kenburnsLeft', 'kenburnsRight',
+            'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight',
+            'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'
+        ];
+
+        if (this.settings.transitionRegister instanceof Array === false) {
+            this.settings.transitionRegister = [ this.settings.transitionRegister ];
+        }
+
+        if (this.settings.animationRegister instanceof Array === false) {
+            this.settings.animationRegister = [ this.settings.animationRegister ];
+        }
+        
+        this.transitions = this.transitions.concat(this.settings.transitionRegister);
+        this.animations  = this.animations.concat(this.settings.animationRegister);
+
+        this.support = {
+            objectFit:  'objectFit'  in document.body.style,
+            transition: 'transition' in document.body.style || 'WebkitTransition' in document.body.style,
+            video:      $.vegas.isVideoCompatible()
+        };
+
+        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,
+                self    = this;
+
+            // Preloading
+            this._preload();
+
+            // Wrapper with content
+            if (!isBody) {
+                this.$elmt.css('height', this.$elmt.css('height'));
+                
+                $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'));
+                }
+
+                this.$elmt.clone(true).children().appendTo($wrapper);
+                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) {
+                this.$elmt.append($wrapper);
+            }
+
+            setTimeout(function () {
+                self.trigger('init');
+                self._goto(self.slide);
+
+                if (self.settings.autoplay) {
+                    self.trigger('play');
+                }
+            }, 1);
+        },
+
+        _preload: function () {
+            var video, img, i;
+
+            for (i = 0; i < this.settings.slides.length; i++) {
+                if (this.settings.preload || this.settings.preloadImages) {
+                    if (this.settings.slides[i].src) {
+                        img = new Image();
+                        img.src = this.settings.slides[i].src;
+                    }
+                }
+
+                if (this.settings.preload || this.settings.preloadVideos) {
+                    if (this.support.video && this.settings.slides[i].video) {
+                        video = this._video(this.settings.slides[i].video);
+                    }
+                }
+            }
+        },
+
+        _random: function (array) {
+            return array[Math.floor(Math.random() * (array.length - 1))];
+        },
+
+        _slideShow: function () {
+            var self = this;
+
+            if (this.total > 1 && !this.paused && !this.noshow) {
+                this.timeout = setTimeout(function () {
+                    self.next();
+                }, this._options('delay')); 
+            }
+        },
+
+        _timer: function (state) {
+            var self = this;
+
+            clearTimeout(this.timeout);
+
+            if (!this.$timer) {
+                return;
+            }
+
+            this.$timer
+                .removeClass('vegas-timer-running')
+                    .find('div')
+                        .css('transition-duration', '0ms');
+
+            if (this.paused || this.noshow) {
+                return;
+            }
+
+            if (state) {
+                setTimeout(function () {
+                   self.$timer
+                    .addClass('vegas-timer-running')
+                        .find('div')
+                            .css('transition-duration', self._options('delay') - 100 + 'ms');
+                }, 100);
+            }
+        },
+
+        _video: function (srcs) {
+            var video, 
+                source,
+                cacheKey = srcs.toString();
+
+            if (videoCache[cacheKey]) {
+                return videoCache[cacheKey];
+            }
+
+            if (srcs instanceof Array === false) {
+                srcs = [ srcs ];
+            }
+
+            video = document.createElement('video');
+            // video.muted = true;
+            video.preload = true;
+
+            srcs.forEach(function (src) {
+                source = document.createElement('source');
+                source.src = src;
+                video.appendChild(source);
+            });
+
+            videoCache[cacheKey] = video;
+
+            return video;
+        },
+
+        _fadeOutSound: function (video, duration) {
+            var self   = this,
+                delay  = duration / 10,
+                volume = video.volume - 0.09;
+
+            var src = video.getElementsByTagName('source')[0].src;
+
+            if (volume > 0) {
+                if (src === 'http://localhost/personnel/vegas/dev/videos/bg2.mp4') {
+                    console.log('----', Math.round(volume * 100));
+                }
+                video.volume = volume;
+
+                setTimeout(function () {
+                    self._fadeOutSound(video, duration);
+                }, delay);
+            } else {
+                video.pause();
+            }
+        },
+
+        _fadeInSound: function (video, duration) {
+            var self   = this,
+                delay  = duration / 10,
+                volume = video.volume + 0.09;
+            
+            var src = video.getElementsByTagName('source')[0].src;
+
+            if (volume < 1) {
+                if (src === 'http://localhost/personnel/vegas/dev/videos/bg2.mp4') {
+                    console.log('++++', Math.round(volume * 100));
+                }
+
+                video.volume = volume;
+
+                setTimeout(function () {
+                    self._fadeInSound(video, duration);
+                }, delay);
+            }
+        },
+
+        _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) {
+            if (typeof this.settings.slides[nb] === 'undefined') {
+                nb = 0;
+            }
+
+            this.slide = nb;
+
+            var $slide,
+                $inner,
+                $video,
+                $slides       = this.$elmt.children('.vegas-slide'),
+                src           = this.settings.slides[nb].src,
+                videoSettings = this.settings.slides[nb].video,
+                delay         = this._options('delay'),
+                align         = this._options('align'),
+                valign        = this._options('valign'),
+                color         = this._options('color') || this.$elmt.css('background-color'),
+                cover         = this._options('cover') ? 'cover' : 'contain',
+                self          = this,
+                total         = $slides.length,
+                video,
+                img;
+
+            var transition         = this._options('transition'),
+                transitionDuration = this._options('transitionDuration'),
+                animation          = this._options('animation' ),
+                animationDuration  = this._options('animationDuration');
+
+            if (transition === 'random' || transition instanceof Array) {
+                if (transition instanceof Array) {
+                    transition = this._random(transition);
+                } else {
+                    transition = this._random(this.transitions);
+                }
+            }
+
+            if (animation === 'random' || animation instanceof Array) {
+                if (animation instanceof Array) {
+                    animation = this._random(animation);
+                } else {
+                    animation = this._random(this.animations);
+                }
+            }
+
+            if (transitionDuration === 'auto' || transitionDuration > delay) {
+                transitionDuration = delay;
+            }
+
+            if (animationDuration === 'auto') {
+                animationDuration = delay;
+            }
+
+            $slide = $('<div class="vegas-slide"></div>');
+            
+            if (this.support.transition && transition) {
+                $slide.addClass('vegas-transition-' + transition);
+            }
+
+            // Video
+
+            if (this.support.video && videoSettings) {
+                if (videoSettings instanceof Array) {
+                    video = this._video(videoSettings);
+                } else {
+                    video = this._video(videoSettings.src);
+                }
+
+                video.loop  = videoSettings.loop !== undefined ? videoSettings.loop : true;
+                video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true;
+
+                if (video.muted === false) {
+                    video.volume = 0;
+                    this._fadeInSound(video, transitionDuration);
+                } else {
+                    video.pause();
+                }
+
+                $video = $(video)
+                    .addClass('vegas-video')
+                    .css('background-color', color);
+
+                if (this.support.objectFit) {
+                    $video
+                        .css('object-position', align + ' ' + valign)
+                        .css('object-fit', cover)
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                } else if (cover === 'contain') {
+                    $video
+                        .css('width',  '100%')
+                        .css('height', '100%');
+                }
+
+                $slide.append($video);
+
+            // Image
+
+            } else {
+                img = new Image();
+
+                $inner = $('<div class="vegas-slide-inner"></div>')
+                    .css('background-image',    'url(' + src + ')')
+                    .css('background-color',    color)
+                    .css('background-position', align + ' ' + valign)
+                    .css('background-size',     cover);
+
+                if (this.support.transition && animation) {
+                    $inner
+                        .addClass('vegas-animation-' + animation)
+                        .css('animation-duration',  animationDuration + 'ms');
+                }
+
+                $slide.append($inner);
+            }
+
+            if (!this.support.transition) {
+                $slide.css('display', 'none');
+            }
+
+            if (total) {
+                $slides.eq(total - 1).after($slide);
+            } else {
+                this.$elmt.prepend($slide);
+            }
+
+            self._timer(false);
+
+            function go () {
+                self._timer(true);
+
+                setTimeout(function () {
+                    if (transition) {
+                        if (self.support.transition) {
+                            $slides
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-out');
+
+                            $slides.each(function () {
+                                var video = $slides.find('video').get(0);
+
+                                if (video) {
+                                    video.volume = 1;
+                                    self._fadeOutSound(video, transitionDuration);
+                                }
+                            });
+
+                            $slide
+                                .css('transition', 'all ' + transitionDuration + 'ms')
+                                .addClass('vegas-transition-' + transition + '-in');
+                        } else {
+                            $slide.fadeIn(transitionDuration);
+                        }
+                    }
+
+                    for (var i = 0; i < $slides.length - 4; i++) {
+                         $slides.eq(i).remove();
+                    }
+
+                    self.trigger('walk');
+                    self._slideShow();
+                }, 100);
+            }
+
+            if (video) {
+                if (video.readyState === 4) {
+                    video.currentTime = 0;
+                    video.play();
+                    go();
+                } else {
+                    video.oncanplay = function () {
+                        video.play();
+                        if (!video._started) {
+                            video._started = true;
+                            go();
+                        }
+                    };
+                }
+            } else {
+                img.src = src;
+                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.settings ];
+            } else {
+                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) {
+            var oldSlides = this.settings.slides.slice();
+
+            if (typeof key === 'object') {
+                this.settings = $.extend({}, defaults, $.vegas.defaults, key);
+            } else if (typeof key === 'string') {
+                if (value === undefined) {
+                    return this.settings[key];
+                }
+                this.settings[key] = value; 
+            } else {
+                return this.settings;
+            }
+
+            // In case slides have changed
+            if (this.settings.slides !== oldSlides) {
+                this.total  = this.settings.slides.length;
+                this.noshow = this.total < 2;
+                this._preload();   
+            }
+        }
+    };
+
+    $.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 !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+    };
+
+})(window.jQuery || window.Zepto);