merge: Hugh develop version 1.0.2 - 20201221

dist/vegas.css

@@ -554,3 +554,57 @@ body.vegas-container > .vegas-slide {
         transform: scale(1) translate(0, 0);
     }
 }
+*[type=vegas] .vegas-content-scrollable .contents{
+    display:none;
+}
+.vegas-prev-icon:before{
+    content: "";
+    width: 40px;
+    height: 40px;
+    display: block;
+    border-top : white 5px solid;
+    border-left: white 5px solid;
+    transform: rotate(-45deg) translateY(-50%);
+    top: 50%;
+    left: 40px;
+    position: absolute;
+    cursor: pointer;
+}
+.vegas-next-icon:before{
+    content: "";
+    width: 40px;
+    height: 40px;
+    display: block;
+    border-top : white 5px solid;
+    border-right: white 5px solid;
+    transform: rotate(45deg) translateY(-50%);
+    top: 50%;
+    right: 40px;
+    position: absolute;
+    cursor: pointer;
+}
+.vegas-disabled:not(.vegas-prev), .vegas-disabled *, .vegas-disabled *:before, .vegas-disabled *:after{
+    cursor: not-allowed !important;
+}
+.vegas-dots{
+    width: 100%;
+    bottom: 0;
+    left: 0;
+    text-align: center;
+    position: absolute;
+}
+.vegas-dot{
+    margin: 0 4px;
+    width: 8px;
+    height: 8px;
+    border-radius: 100%;
+    background: #000;
+    opacity: .2;
+    display: inline-block;
+    cursor: pointer;
+}
+.vegas-dot-active{
+    cursor:default;
+    background: orange ;
+    opacity: 1;
+}

dist/vegas.js

@@ -7,745 +7,940 @@
  * Copyright (C) 2010-2021 Jay Salvat
  * http://jaysalvat.com/
  * --------------------------------------------------------------------------*/
-
-(function ($) {
-  'use strict';
-
-  var defaults = {
-    slide:                   0,
-    delay:                   5000,
-    loop:                    true,
-    preload:                 false,
-    preloadImage:            false,
-    preloadVideo:            false,
-    timer:                   true,
-    overlay:                 false,
-    autoplay:                true,
-    shuffle:                 false,
-    cover:                   true,
-    color:                   null,
-    align:                   'center',
-    valign:                  'center',
-    firstTransition:         null,
-    firstTransitionDuration: null,
-    transition:              'fade',
-    transitionDuration:      1000,
-    transitionRegister:      [],
-    animation:               null,
-    animationDuration:       'auto',
-    animationRegister:       [],
-    slidesToKeep:            1,
-    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.ended        = false;
-    this.$elmt        = $(elmt);
-    this.$timer       = null;
-    this.$overlay     = null;
-    this.$slide       = null;
-    this.timeout      = null;
-    this.first        = true;
-
-    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)) {
-      this.settings.transitionRegister = [ this.settings.transitionRegister ];
-    }
-
-    if (!(this.settings.animationRegister instanceof Array)) {
-      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()
+/* Customize By Hugh
+ * version 1.0.2 - 20201221
+ * Simple use by just div[type=vegas] image ...
+ */
+(function($) {
+    'use strict';
+  
+    var defaults = {
+        slide: 0,
+        delay: 5000,
+        loop: true,
+        preload: false,
+        preloadImage: false,
+        preloadVideo: false,
+        timer: true,
+        overlay: false,
+        autoplay: true,
+        shuffle: false,
+        cover: true,
+        color: null,
+        align: 'center',
+        valign: 'center',
+        firstTransition: null,
+        firstTransitionDuration: null,
+        transition: 'fade',
+        transitionDuration: 1000,
+        transitionRegister: [],
+        animation: null,
+        animationDuration: 'auto',
+        animationRegister: [],
+        slidesToKeep: 1,
+        "arrow-status": 'none',     // none|disabled|hide|show
+        "arrow-hookStatus": 'hide', // none|disabled|hide|show
+        "arrow-prevHook": null,
+        "arrow-nextHook": null,
+        "dot-status": 'none',      //none|show
+        "dot-hook": null,
+        "dot-hookStatus": 'clone', // none|clone|clone-id
+        prevTransparent: true,
+        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
+        // }
+        // ...
+        ]
     };
-
-    if (this.settings.shuffle === true) {
-      this.shuffle();
-    }
-
-    this._init();
-  };
-
-  Vegas.prototype = {
-    _init: function () {
-      var $content,
-        $contentScroll,
-        $overlay,
-        $timer,
-        isBody  = this.elmt.tagName === 'BODY',
-        timer   = this.settings.timer,
-        overlay = this.settings.overlay,
-        self    = this;
-
-      // Preloading
-      this._preload();
-
-      // Div with scrollable content
-      if (!isBody) {
-        $contentScroll = $('<div class="vegas-content-scrollable">');
-
-        $content = $('<div class="vegas-content">')
-          .css('overflow', this.$elmt.css('overflow'))
-          .css('padding',  this.$elmt.css('padding'));
-
-        // Some browsers don't compute padding shorthand
-        if (!this.$elmt.css('padding')) {
-          $content
-            .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.css('padding', 0);
-
-        this.$elmt.clone(true).children().appendTo($content);
-        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 + ')');
+  
+    var videoCache = {};
+  
+    var Vegas = function(elmt, options) {
+        this.elmt = elmt;
+        this.$elmt = $(elmt);
+        this.settings = $.extend({}, defaults, $.vegas.defaults, options);
+        this._init_settings();
+        this.slide = this.settings.slide;
+        this.total = this.settings.slides.length;
+        this.noshow = this.total < 2;
+        this.paused = !this.settings.autoplay || this.noshow;
+        this.ended = false;
+        this.$timer = null;
+        this.$overlay = null;
+        this.$slide = null;
+        this.timeout = null;
+        this.first = true;
+        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)) {
+            this.settings.transitionRegister = [this.settings.transitionRegister];
         }
-
-        this.$overlay = $overlay;
-        this.$elmt.prepend($overlay);
-      }
-
-      // Container
-      this.$elmt.addClass('vegas-container');
-
-      if (!isBody) {
-        this.$elmt.append($contentScroll);
-        $contentScroll.append($content);
-      }
-
-      setTimeout(function () {
-        self.trigger('init');
-        self._goto(self.slide);
-
-        if (self.settings.autoplay) {
-          self.trigger('play');
+  
+        if (!(this.settings.animationRegister instanceof Array)) {
+            this.settings.animationRegister = [this.settings.animationRegister];
         }
-      }, 1);
-    },
-
-    _preload: function () {
-      var 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;
-          }
+  
+        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();
         }
-
-        if (this.settings.preload || this.settings.preloadVideos) {
-          if (this.support.video && this.settings.slides[i].video) {
-            if (this.settings.slides[i].video instanceof Array) {
-              this._video(this.settings.slides[i].video);
+  
+        this._init();
+        this._arrows();
+        this._dots();
+    };
+  
+    Vegas.prototype = {
+        _init_settings: function(options) {
+            var attributes = this.elmt.attributes;
+            var settings = this.settings;
+            window.attr_merge(attributes, settings);
+            this.slide = settings.slide;
+            var slides = [];
+            this.$elmt.children().each(function() {
+                var $this = $(this);
+                if ($this.is('img')) {
+                    slides.push({
+                        src: $this.attr('src'),
+                    });
+                    if ($this.attr('data-transition') != undefined && $this.attr('data-transition') != settings['transition']) {
+                        slides[slides.length - 1].transition = $this.attr('data-transition');
+                    }
+                    if ($this.attr('data-animation') != undefined && $this.attr('data-animation') != settings['animation']) {
+                        slides[slides.length - 1].transition = $this.attr('data-animation');
+                    }
+                }
+                if ($this.is('video')) {
+                    if ($this.children().length > 0) {
+                        slides.push({
+                            video: {
+                                src: [],
+                                loop: eval($this.attr('data-loop') || false),
+                                mute: eval($this.attr('data-mute') || true),
+                            }
+                        });
+                        var video_srces = [];
+                        $this.children().each(function() {
+                            video_srces.push($(this).attr('src'))
+                        });
+                        slides[slides.length - 1].video.src = video_srces;
+                    } else {
+                        slides.push({
+                            video: {
+                                src: [$this.attr('src')],
+                                loop: eval($this.attr('data-loop') || false),
+                                mute: eval($this.attr('data-mute') || true),
+                            }
+                        });
+                    }
+                }
+            });
+            this.settings.slides = slides;
+  
+        },
+        _arrows: function(){
+            let settings = window.attr_prefix(this.settings, 'arrow');
+            let this_prev = this.$elmt.find('.vegas-prev');
+            let this_next = this.$elmt.find('.vegas-next');
+  
+            if (settings.prevHook != null) {
+                $("body").on("click", settings.prevHook, function() {
+                    $('[data-arrow-prevHook="' + settings.prevHook + '"] .vegas-prev').click();
+                });
+            }
+            if (settings.nextHook != null) {
+                $("body").on("click", settings.nextHook, function() {
+                    $('[data-arrow-nextHook="' + settings.nextHook + '"] .vegas-next').click();
+                });
+            }
+  
+            if (settings.status == 'none') {
+                this_prev.hide();
+                this_next.hide();
+            } else if (settings.status == 'hide') {
+                if (this.slide == 0) {
+                    this.$elmt.find('.vegas-prev').hide();
+                }
+                this.$elmt.on('vegaschange', function() {
+                    if ($(this).vegas('current') <= 0) {
+                        $(this).find('.vegas-prev').hide();
+                    } else {
+                        $(this).find('.vegas-prev').show();
+                    }
+                    if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                        $(this).find('.vegas-next').hide();
+                    } else {
+                        $(this).find('.vegas-next').show();
+                    }
+                });
+            } else if (settings.status == 'disabled') {
+                if (this.slide == 0) {
+                    this.$elmt.find('.vegas-prev').addClass('vegas-disabled');
+                }
+                this.$elmt.on('vegaschange', function() {
+                    if ($(this).vegas('current') <= 0) {
+                        $(this).find('.vegas-prev').addClass('vegas-disabled');
+                    } else {
+                        $(this).find('.vegas-prev').removeClass('vegas-disabled');
+                    }
+                    if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                        $(this).find('.vegas-next').addClass('vegas-disabled');
+                    } else {
+                        $(this).find('.vegas-next').removeClass('vegas-disabled');
+                    }
+                });
+            }
+            if (settings.hookStatus == 'none') {
+                $(settings.prevHook).hide();
+                $(settings.nextHook).hide();
+            } else if (settings.hookStatus == 'hide') {
+                if (this.slide == 0) {
+                    $(settings.prevHook).hide();
+                }
+                this.$elmt.on('vegaschange', function() {
+                    if ($(this).vegas('current') <= 0) {
+                        $(settings.prevHook).hide();
+                    } else {
+                        $(settings.prevHook).show();
+                    }
+                    if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                        $(settings.nextHook).hide();
+                    } else {
+                        $(settings.nextHook).show();
+                    }
+                });
+            } else if (settings.hookStatus == 'disabled') {
+                if (this.slide == 0) {
+                    $(settings.prevHook).addClass('vegas-disabled');
+                }
+                this.$elmt.on('vegaschange', function() {
+                    if ($(this).vegas('current') <= 0) {
+                        $(settings.prevHook).addClass('vegas-disabled');
+                    } else {
+                        $(settings.prevHook).removeClass('vegas-disabled');
+                    }
+                    if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                        $(settings.nextHook).addClass('vegas-disabled');
+                    } else {
+                        $(settings.nextHook).removeClass('vegas-disabled');
+                    }
+                });
+            } 
+        },
+        _dots: function() {
+            let settings = window.attr_prefix(this.settings, 'dot');
+            let dots = this.$elmt.find('.vegas-dots .vegas-dot').eq(0);
+            let dataHook = $(settings.hook);
+            let dataHookChild = $(settings.hook).children().eq(0);
+            
+            for (var i = 1; i < this.settings.slides.length; i++) {
+                dots.clone(true).appendTo(this.$elmt.find('.vegas-dots'));
+                if (settings.hookStatus == "clone") {
+                    dataHookChild.clone(true).appendTo(dataHook);
+                }
+                if (settings.hookStatus == "clone-id") {
+                    var vegas_dot = dataHookChild.clone(true);
+  
+                    vegas_dot.html(function(x, oldHTML) {
+                        return oldHTML.replace(/\${i}/g, i + 1);
+                    }).appendTo(dataHook);
+                }
+            }
+            if (settings.hookStatus == "clone-id") {
+                dataHookChild.html(function(x, oldHTML) {
+                    return oldHTML.replace(/\${i}/g, 1);
+                })
+            }
+            if (settings.status == "hide") {
+                this.$elmt.find('.vegas-dots').hide();
+            }
+            this.$elmt.find('.vegas-dots .vegas-dot').eq(this.slide).addClass('vegas-dot-active');
+            $(settings.hook).children().eq(this.slide).addClass('vegas-dot-active');
+  
+            this.$elmt.on('vegaschange', function() {
+                $(this).find('.vegas-dots .vegas-dot.vegas-dot-active').removeClass('vegas-dot-active');
+                $(settings.hook).children('.vegas-dot-active').removeClass('vegas-dot-active');
+                var active_dot = $(this).vegas('current') > $(this).find('.vegas-dots .vegas-dot').length - 1 ? $(this).find('.vegas-dots .vegas-dot').length - 1 : $(this).vegas('current');
+                var active_dot = $(this).vegas('current') < 0 ? 0 : active_dot;
+                $(this).find('.vegas-dots .vegas-dot').eq(active_dot).addClass('vegas-dot-active');
+                $(settings.hook).children().eq(active_dot).addClass('vegas-dot-active');
+            });
+            var dot_clone = settings.hook;
+  
+            $(settings.hook).children().on('click', function() {
+                $('[data-dot-hook="' + dot_clone + '"] .vegas-dots').children('.vegas-dot').eq($(this).index()).click();
+            });
+        },
+        _init: function() {
+            var $content, $contentScroll, $overlay, $timer, isBody = this.elmt.tagName === 'BODY', timer = this.settings.timer, overlay = this.settings.overlay, self = this;
+  
+            // Preloading
+            this._preload();
+  
+            // Div with scrollable content
+            if (!isBody) {
+                $contentScroll = $('<div class="vegas-content-scrollable">');
+  
+                $content = $('<div class="vegas-content">').css('overflow', this.$elmt.css('overflow')).css('padding', this.$elmt.css('padding'));
+  
+                // Some browsers don't compute padding shorthand
+                if (!this.$elmt.css('padding')) {
+                    $content.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.css('padding', 0);
+                
+                this.$elmt.clone(true).children().appendTo($content);
+  
+                $content.children().not('.vegas-dot-controls').wrapAll("<div class='contents'></div>");
+                $content.append($('<div class="vegas-arrow-controls"></div>'));
+                $content.find('.vegas-arrow-controls').append($('<div class="vegas-prev"></div>')).find('.vegas-prev').append($('<div class="vegas-prev-icon"></div>'));
+                $content.find('.vegas-arrow-controls').append($('<div class="vegas-next"></div>')).find('.vegas-next').append($('<div class="vegas-next-icon"></div>'));
+                $content.append($('<div class="vegas-dot-controls"></div>')).find('.vegas-dot-controls').append($('<div class="vegas-dots"></div>')).find('.vegas-dots').append($('<div class="vegas-dot"></div>'));
+  
+                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($contentScroll);
+                $contentScroll.append($content);
+            }
+  
+            this.$elmt.data('vegas', this);
+  
+            setTimeout(function() {
+                self.trigger('init');
+                self._goto(self.slide);
+  
+                if (self.settings.autoplay) {
+                    self.trigger('play');
+                }
+            }, 1);
+        },
+  
+        _preload: function() {
+            var 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) {
+                        if (this.settings.slides[i].video instanceof Array) {
+                            this._video(this.settings.slides[i].video);
+                        } else {
+                            this._video(this.settings.slides[i].video.src);
+                        }
+                    }
+                }
+            }
+        },
+  
+        _random: function(array) {
+            return array[Math.floor(Math.random() * array.length)];
+        },
+  
+        _slideShow: function() {
+            var self = this;
+  
+            if (this.total > 1 && !this.ended && !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.ended || 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)) {
+                srcs = [srcs];
+            }
+  
+            video = document.createElement('video');
+            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;
+  
+            if (volume > 0) {
+                video.volume = volume;
+  
+                setTimeout(function() {
+                    self._fadeOutSound(video, duration);
+                }, delay);
             } else {
-              this._video(this.settings.slides[i].video.src);
+                video.pause();
             }
-          }
-        }
-      }
-    },
-
-    _random: function (array) {
-      return array[Math.floor(Math.random() * array.length)];
-    },
-
-    _slideShow: function () {
-      var self = this;
-
-      if (this.total > 1 && !this.ended && !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.ended || 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)) {
-        srcs = [ srcs ];
-      }
-
-      video = document.createElement('video');
-      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;
-
-      if (volume > 0) {
-        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;
-
-      if (volume < 1) {
-        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'),
-        cover         = this._options('cover'),
-        color         = this._options('color') || this.$elmt.css('background-color'),
-        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 (this.settings.firstTransition && this.first) {
-        transition = this.settings.firstTransition || transition;
-      }
-
-      if (this.settings.firstTransitionDuration && this.first) {
-        transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
-      }
-
-      if (this.first) {
-        this.first = false;
-      }
-
-      if (cover !== 'repeat') {
-        if (cover === true) {
-          cover = 'cover';
-        } else if (cover === false) {
-          cover = 'contain';
-        }
-      }
-
-      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);
-
-        if (cover === 'repeat') {
-          $inner.css('background-repeat', 'repeat');
-        } else {
-          $inner.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);
-      }
-
-      $slides
-        .css('transition', 'all 0ms')
-        .each(function () {
-          this.className  = 'vegas-slide';
-
-          if (this.tagName === 'VIDEO') {
-            this.className += ' vegas-video';
-          }
-
-          if (transition) {
-            this.className += ' vegas-transition-' + transition;
-            this.className += ' vegas-transition-' + transition + '-in';
-          }
-        }
-        );
-
-      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);
+        },
+  
+        _fadeInSound: function(video, duration) {
+            var self = this
+              , delay = duration / 10
+              , volume = video.volume + 0.09;
+  
+            if (volume < 1) {
+                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'), cover = this._options('cover'), color = this._options('color') || this.$elmt.css('background-color'), 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 (this.settings.firstTransition && this.first) {
+                transition = this.settings.firstTransition || transition;
+            }
+  
+            if (this.settings.firstTransitionDuration && this.first) {
+                transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
+            }
+  
+            if (this.first) {
+                this.first = false;
+            }
+  
+            if (cover !== 'repeat') {
+                if (cover === true) {
+                    cover = 'cover';
+                } else if (cover === false) {
+                    cover = 'contain';
+                }
+            }
+  
+            if (transition === 'random' || transition instanceof Array) {
+                if (transition instanceof Array) {
+                    transition = this._random(transition);
+                } else {
+                    transition = this._random(this.transitions);
                 }
-              });
-
-              $slide
-                .css('transition', 'all ' + transitionDuration + 'ms')
-                .addClass('vegas-transition-' + transition + '-in');
+            }
+  
+            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);
+            }
+  
+  
+            if (this.support.video && videoSettings) {
+                // Video
+  
+                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);
+  
+  
             } else {
-              $slide.fadeIn(transitionDuration);
-            }
-          }
-
-          for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) {
-            $slides.eq(i).remove();
-          }
-
-          self.trigger('walk');
-          self._slideShow();
-        }, 100);
-      }
-      if (video) {
-        if (video.readyState === 4) {
-          video.currentTime = 0;
-        }
-
-        video.play();
-        go();
-      } else {
-        img.src = src;
-
-        if (img.complete) {
-          go();
-        } else {
-          img.onload = go;
+                // Image
+  
+                img = new Image();
+                $inner = $('<div class="vegas-slide-inner"></div>').css('background-image', 'url("' + src + '")').css('background-color', color).css('background-position', align + ' ' + valign);
+  
+                if (cover === 'repeat') {
+                    $inner.css('background-repeat', 'repeat');
+                } else {
+                    $inner.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);
+            }
+  
+            $slides.css('transition', 'all 0ms').each(function() {
+                this.className = 'vegas-slide';
+  
+                if (this.tagName === 'VIDEO') {
+                    this.className += ' vegas-video';
+                }
+  
+                if (transition) {
+                    this.className += ' vegas-transition-' + transition;
+                    this.className += ' vegas-transition-' + transition + '-in';
+                }
+            });
+  
+            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').css('opacity', self.settings.prevTransparent ? 0 : 1);
+  
+                            $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 - self.settings.slidesToKeep; i++) {
+                        $slides.eq(i).remove();
+                    }
+  
+                    self.trigger('walk');
+                    self._slideShow();
+                }, 100);
+            }
+            if (video) {
+                if (video.readyState === 4) {
+                    video.currentTime = 0;
+                }
+  
+                video.play();
+                go();
+            } else {
+                img.src = src;
+  
+                if (img.complete) {
+                    go();
+                } else {
+                    img.onload = go;
+                }
+            }
+        },
+  
+        _end: function() {
+            this.ended = !this.settings.autoplay;
+            this._timer(false);
+            this.trigger('end');
+        },
+  
+        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.trigger('jump');
+            this.slide = nb;
+            this.trigger('change');
+            this._goto(this.slide);
+        },
+  
+        next: function() {
+            this.slide++;
+            this.trigger('next');
+            this.trigger('change');
+            if (this.slide >= this.total) {
+                this.slide--;
+                if (!this.settings.loop) {
+                    return this._end();
+                }
+  
+                this.slide = 0;
+            }
+  
+            this._goto(this.slide);
+        },
+  
+        previous: function() {
+            this.slide--;
+            this.trigger('previous');
+            this.trigger('change');
+            if (this.slide < 0) {
+                if (!this.settings.loop) {
+                    this.slide++;
+                    return;
+                } else {
+                    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();
+            }
+        },
+  
+        destroy: function() {
+            clearTimeout(this.timeout);
+  
+            this.$elmt.removeClass('vegas-container');
+            this.$elmt.find('> .vegas-slide').remove();
+            this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
+            this.$elmt.find('> .vegas-wrapper').remove();
+  
+            if (this.settings.timer) {
+                this.$timer.remove();
+            }
+  
+            if (this.settings.overlay) {
+                this.$overlay.remove();
+            }
+  
+            this.elmt._vegas = null;
         }
-      }
-    },
-
-    _end: function () {
-      this.ended = !this.settings.autoplay;
-      this._timer(false);
-      this.trigger('end');
-    },
-
-    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) {
-        if (!this.settings.loop) {
-          return this._end();
+    };
+  
+    $.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 (options[0] === '_' && options[1] === '_'){
+                    returns = instance[options.substring(2)];
+                } else {
+                    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;
         }
-
-        this.slide = 0;
-      }
-
-      this._goto(this.slide);
-    },
-
-    previous: function () {
-      this.slide--;
-
-      if (this.slide < 0) {
-        if (!this.settings.loop) {
-          this.slide++;
-          return;
-        } else {
-          this.slide = this.total - 1;
+    }
+    ;
+  
+    $.vegas = {};
+    $.vegas.defaults = defaults;
+  
+    $.vegas.isVideoCompatible = function() {
+        return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+    }
+    ;
+  
+  }
+  )(window.jQuery || window.Zepto || window.m4q);
+  $(document).ready(function() {
+    if (typeof $.initialize == 'function'){
+        $.initialize('[type=vegas]', function(event) {
+            if (! window.delegate_vegas){
+                window.delegate_vegas = true;
+                delegate_function();
+            }
+            if ($(this).is(':not("[vegas]")')){
+                $(this).vegas().attr('vegas', '');
+            }
+        });
+    } else {
+        window.init_vegas = function(){
+            $('[type="vegas"]:not("[vegas]")').vegas().attr('vegas', '');
         }
-      }
-
-      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];
+        if ($('[type="vegas"]:not("[vegas]")').length > 0){
+            window.init_vegas();
+            window.delegate_vegas = true;
+            delegate_function();
         }
-        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();
-      }
-    },
-
-    destroy: function () {
-      clearTimeout(this.timeout);
-
-      this.$elmt.removeClass('vegas-container');
-      this.$elmt.find('> .vegas-slide').remove();
-      this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
-      this.$elmt.find('> .vegas-wrapper').remove();
-
-      if (this.settings.timer) {
-        this.$timer.remove();
-      }
-
-      if (this.settings.overlay) {
-        this.$overlay.remove();
-      }
-
-      this.elmt._vegas = null;
     }
-  };
-
-  $.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);
+    
+  });
+  function delegate_function(){
+    $("body").delegate("[type=vegas][vegas]", "mousedown", function() {
+        var e = window.event;
+        startX = e.clientX;
+        window.sliding = true;
+    });
+    $("body").delegate("[type=vegas][vegas]", "mouseup", function() {
+        var e = window.event;
+        var endX = e.clientX;
+        // 左滑
+        if ((startX - endX) > 30) {
+            $(this).vegas('next');
         }
-      });
-    } else if (typeof options === 'string') {
-      this.each(function () {
-        var instance = this._vegas;
-
-        if (!instance) {
-          throw new Error('No Vegas applied to this element.');
+        // 右滑
+        if ((endX - startX) > 30) {
+            $(this).vegas('previous');
         }
-
-        if (typeof instance[options] === 'function' && options[0] !== '_') {
-          returns = instance[options].apply(instance, [].slice.call(args, 1));
-        } else {
-          error = true;
+        window.sliding = false;
+    });
+    $("body").delegate("[type=vegas][vegas]", "mouseleave", function() {
+        if (window.sliding) {
+            var e = window.event;
+            var endX = e.clientX;
+            // 左滑
+            if ((startX - endX) > 30) {
+                $(this).vegas('next');
+            }
+            // 右滑
+            if ((endX - startX) > 30) {
+                $(this).vegas('previous');
+            }
+            window.sliding = false;
         }
-      });
-
-      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 || window.m4q);
+    });
+    $("body").delegate('[type=vegas][vegas] .vegas-prev', "click", function() {
+        $(this).parents('[type=vegas]').vegas('previous');
+    });
+    $("body").delegate('[type=vegas][vegas] .vegas-next', "click", function() {
+        $(this).parents('[type=vegas]').vegas('next');
+    });
+    $("body").delegate('[type=vegas][vegas] .vegas-dots .vegas-dot', "click", function() {
+        $(this).parents('[type=vegas]').vegas('jump', $(this).index());
+    });
+  }
+  

src/vegas.js

@@ -1,37 +1,44 @@
 
-(function ($) {
+(function($) {
   'use strict';
 
   var defaults = {
-    slide:                   0,
-    delay:                   5000,
-    loop:                    true,
-    preload:                 false,
-    preloadImage:            false,
-    preloadVideo:            false,
-    timer:                   true,
-    overlay:                 false,
-    autoplay:                true,
-    shuffle:                 false,
-    cover:                   true,
-    color:                   null,
-    align:                   'center',
-    valign:                  'center',
-    firstTransition:         null,
-    firstTransitionDuration: null,
-    transition:              'fade',
-    transitionDuration:      1000,
-    transitionRegister:      [],
-    animation:               null,
-    animationDuration:       'auto',
-    animationRegister:       [],
-    slidesToKeep:            1,
-    init:  function () {},
-    play:  function () {},
-    pause: function () {},
-    walk:  function () {},
-    slides: [
-      // {
+      slide: 0,
+      delay: 5000,
+      loop: true,
+      preload: false,
+      preloadImage: false,
+      preloadVideo: false,
+      timer: true,
+      overlay: false,
+      autoplay: true,
+      shuffle: false,
+      cover: true,
+      color: null,
+      align: 'center',
+      valign: 'center',
+      firstTransition: null,
+      firstTransitionDuration: null,
+      transition: 'fade',
+      transitionDuration: 1000,
+      transitionRegister: [],
+      animation: null,
+      animationDuration: 'auto',
+      animationRegister: [],
+      slidesToKeep: 1,
+      "arrow-status": 'none',     // none|disabled|hide|show
+      "arrow-hookStatus": 'hide', // none|disabled|hide|show
+      "arrow-prevHook": null,
+      "arrow-nextHook": null,
+      "dot-status": 'none',      //none|show
+      "dot-hook": null,
+      "dot-hookStatus": 'clone', // none|clone|clone-id
+      prevTransparent: true,
+      init: function() {},
+      play: function() {},
+      pause: function() {},
+      walk: function() {},
+      slides: [// {
       //  src:                null,
       //  color:              null,
       //  delay:              null,
@@ -48,695 +55,879 @@
       //      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.ended        = false;
-    this.$elmt        = $(elmt);
-    this.$timer       = null;
-    this.$overlay     = null;
-    this.$slide       = null;
-    this.timeout      = null;
-    this.first        = true;
-
-    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)) {
-      this.settings.transitionRegister = [ this.settings.transitionRegister ];
-    }
-
-    if (!(this.settings.animationRegister instanceof Array)) {
-      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();
-  };
+  var Vegas = function(elmt, options) {
+      this.elmt = elmt;
+      this.$elmt = $(elmt);
+      this.settings = $.extend({}, defaults, $.vegas.defaults, options);
+      this._init_settings();
+      this.slide = this.settings.slide;
+      this.total = this.settings.slides.length;
+      this.noshow = this.total < 2;
+      this.paused = !this.settings.autoplay || this.noshow;
+      this.ended = false;
+      this.$timer = null;
+      this.$overlay = null;
+      this.$slide = null;
+      this.timeout = null;
+      this.first = true;
+      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'];
 
-  Vegas.prototype = {
-    _init: function () {
-      var $content,
-        $contentScroll,
-        $overlay,
-        $timer,
-        isBody  = this.elmt.tagName === 'BODY',
-        timer   = this.settings.timer,
-        overlay = this.settings.overlay,
-        self    = this;
-
-      // Preloading
-      this._preload();
-
-      // Div with scrollable content
-      if (!isBody) {
-        $contentScroll = $('<div class="vegas-content-scrollable">');
-
-        $content = $('<div class="vegas-content">')
-          .css('overflow', this.$elmt.css('overflow'))
-          .css('padding',  this.$elmt.css('padding'));
-
-        // Some browsers don't compute padding shorthand
-        if (!this.$elmt.css('padding')) {
-          $content
-            .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.css('padding', 0);
-
-        this.$elmt.clone(true).children().appendTo($content);
-        this.elmt.innerHTML = '';
+      this.animations = ['kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight', 'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'];
+      if (!(this.settings.transitionRegister instanceof Array)) {
+          this.settings.transitionRegister = [this.settings.transitionRegister];
       }
 
-      // Timer
-      if (timer && this.support.transition) {
-        $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
-        this.$timer = $timer;
-        this.$elmt.prepend($timer);
+      if (!(this.settings.animationRegister instanceof Array)) {
+          this.settings.animationRegister = [this.settings.animationRegister];
       }
 
-      // Overlay
-      if (overlay) {
-        $overlay = $('<div class="vegas-overlay">');
+      this.transitions = this.transitions.concat(this.settings.transitionRegister);
+      this.animations = this.animations.concat(this.settings.animationRegister);
 
-        if (typeof overlay === 'string') {
-          $overlay.css('background-image', 'url(' + overlay + ')');
-        }
+      this.support = {
+          objectFit: 'objectFit'in document.body.style,
+          transition: 'transition'in document.body.style || 'WebkitTransition'in document.body.style,
+          video: $.vegas.isVideoCompatible()
+      };
 
-        this.$overlay = $overlay;
-        this.$elmt.prepend($overlay);
+      if (this.settings.shuffle === true) {
+          this.shuffle();
       }
 
-      // Container
-      this.$elmt.addClass('vegas-container');
+      this._init();
+      this._arrows();
+      this._dots();
+  };
 
-      if (!isBody) {
-        this.$elmt.append($contentScroll);
-        $contentScroll.append($content);
-      }
+  Vegas.prototype = {
+      _init_settings: function(options) {
+          var attributes = this.elmt.attributes;
+          var settings = this.settings;
+          window.attr_merge(attributes, settings);
+          this.slide = settings.slide;
+          var slides = [];
+          this.$elmt.children().each(function() {
+              var $this = $(this);
+              if ($this.is('img')) {
+                  slides.push({
+                      src: $this.attr('src'),
+                  });
+                  if ($this.attr('data-transition') != undefined && $this.attr('data-transition') != settings['transition']) {
+                      slides[slides.length - 1].transition = $this.attr('data-transition');
+                  }
+                  if ($this.attr('data-animation') != undefined && $this.attr('data-animation') != settings['animation']) {
+                      slides[slides.length - 1].transition = $this.attr('data-animation');
+                  }
+              }
+              if ($this.is('video')) {
+                  if ($this.children().length > 0) {
+                      slides.push({
+                          video: {
+                              src: [],
+                              loop: eval($this.attr('data-loop') || false),
+                              mute: eval($this.attr('data-mute') || true),
+                          }
+                      });
+                      var video_srces = [];
+                      $this.children().each(function() {
+                          video_srces.push($(this).attr('src'))
+                      });
+                      slides[slides.length - 1].video.src = video_srces;
+                  } else {
+                      slides.push({
+                          video: {
+                              src: [$this.attr('src')],
+                              loop: eval($this.attr('data-loop') || false),
+                              mute: eval($this.attr('data-mute') || true),
+                          }
+                      });
+                  }
+              }
+          });
+          this.settings.slides = slides;
+
+      },
+      _arrows: function(){
+          let settings = window.attr_prefix(this.settings, 'arrow');
+          let this_prev = this.$elmt.find('.vegas-prev');
+          let this_next = this.$elmt.find('.vegas-next');
+
+          if (settings.prevHook != null) {
+              $("body").on("click", settings.prevHook, function() {
+                  $('[data-arrow-prevHook="' + settings.prevHook + '"] .vegas-prev').click();
+              });
+          }
+          if (settings.nextHook != null) {
+              $("body").on("click", settings.nextHook, function() {
+                  $('[data-arrow-nextHook="' + settings.nextHook + '"] .vegas-next').click();
+              });
+          }
 
-      setTimeout(function () {
-        self.trigger('init');
-        self._goto(self.slide);
+          if (settings.status == 'none') {
+              this_prev.hide();
+              this_next.hide();
+          } else if (settings.status == 'hide') {
+              if (this.slide == 0) {
+                  this.$elmt.find('.vegas-prev').hide();
+              }
+              this.$elmt.on('vegaschange', function() {
+                  if ($(this).vegas('current') <= 0) {
+                      $(this).find('.vegas-prev').hide();
+                  } else {
+                      $(this).find('.vegas-prev').show();
+                  }
+                  if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                      $(this).find('.vegas-next').hide();
+                  } else {
+                      $(this).find('.vegas-next').show();
+                  }
+              });
+          } else if (settings.status == 'disabled') {
+              if (this.slide == 0) {
+                  this.$elmt.find('.vegas-prev').addClass('vegas-disabled');
+              }
+              this.$elmt.on('vegaschange', function() {
+                  if ($(this).vegas('current') <= 0) {
+                      $(this).find('.vegas-prev').addClass('vegas-disabled');
+                  } else {
+                      $(this).find('.vegas-prev').removeClass('vegas-disabled');
+                  }
+                  if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                      $(this).find('.vegas-next').addClass('vegas-disabled');
+                  } else {
+                      $(this).find('.vegas-next').removeClass('vegas-disabled');
+                  }
+              });
+          }
+          if (settings.hookStatus == 'none') {
+              $(settings.prevHook).hide();
+              $(settings.nextHook).hide();
+          } else if (settings.hookStatus == 'hide') {
+              if (this.slide == 0) {
+                  $(settings.prevHook).hide();
+              }
+              this.$elmt.on('vegaschange', function() {
+                  if ($(this).vegas('current') <= 0) {
+                      $(settings.prevHook).hide();
+                  } else {
+                      $(settings.prevHook).show();
+                  }
+                  if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                      $(settings.nextHook).hide();
+                  } else {
+                      $(settings.nextHook).show();
+                  }
+              });
+          } else if (settings.hookStatus == 'disabled') {
+              if (this.slide == 0) {
+                  $(settings.prevHook).addClass('vegas-disabled');
+              }
+              this.$elmt.on('vegaschange', function() {
+                  if ($(this).vegas('current') <= 0) {
+                      $(settings.prevHook).addClass('vegas-disabled');
+                  } else {
+                      $(settings.prevHook).removeClass('vegas-disabled');
+                  }
+                  if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
+                      $(settings.nextHook).addClass('vegas-disabled');
+                  } else {
+                      $(settings.nextHook).removeClass('vegas-disabled');
+                  }
+              });
+          } 
+      },
+      _dots: function() {
+          let settings = window.attr_prefix(this.settings, 'dot');
+          let dots = this.$elmt.find('.vegas-dots .vegas-dot').eq(0);
+          let dataHook = $(settings.hook);
+          let dataHookChild = $(settings.hook).children().eq(0);
+          
+          for (var i = 1; i < this.settings.slides.length; i++) {
+              dots.clone(true).appendTo(this.$elmt.find('.vegas-dots'));
+              if (settings.hookStatus == "clone") {
+                  dataHookChild.clone(true).appendTo(dataHook);
+              }
+              if (settings.hookStatus == "clone-id") {
+                  var vegas_dot = dataHookChild.clone(true);
+
+                  vegas_dot.html(function(x, oldHTML) {
+                      return oldHTML.replace(/\${i}/g, i + 1);
+                  }).appendTo(dataHook);
+              }
+          }
+          if (settings.hookStatus == "clone-id") {
+              dataHookChild.html(function(x, oldHTML) {
+                  return oldHTML.replace(/\${i}/g, 1);
+              })
+          }
+          if (settings.status == "hide") {
+              this.$elmt.find('.vegas-dots').hide();
+          }
+          this.$elmt.find('.vegas-dots .vegas-dot').eq(this.slide).addClass('vegas-dot-active');
+          $(settings.hook).children().eq(this.slide).addClass('vegas-dot-active');
+
+          this.$elmt.on('vegaschange', function() {
+              $(this).find('.vegas-dots .vegas-dot.vegas-dot-active').removeClass('vegas-dot-active');
+              $(settings.hook).children('.vegas-dot-active').removeClass('vegas-dot-active');
+              var active_dot = $(this).vegas('current') > $(this).find('.vegas-dots .vegas-dot').length - 1 ? $(this).find('.vegas-dots .vegas-dot').length - 1 : $(this).vegas('current');
+              var active_dot = $(this).vegas('current') < 0 ? 0 : active_dot;
+              $(this).find('.vegas-dots .vegas-dot').eq(active_dot).addClass('vegas-dot-active');
+              $(settings.hook).children().eq(active_dot).addClass('vegas-dot-active');
+          });
+          var dot_clone = settings.hook;
+
+          $(settings.hook).children().on('click', function() {
+              $('[data-dot-hook="' + dot_clone + '"] .vegas-dots').children('.vegas-dot').eq($(this).index()).click();
+          });
+      },
+      _init: function() {
+          var $content, $contentScroll, $overlay, $timer, isBody = this.elmt.tagName === 'BODY', timer = this.settings.timer, overlay = this.settings.overlay, self = this;
+
+          // Preloading
+          this._preload();
+
+          // Div with scrollable content
+          if (!isBody) {
+              $contentScroll = $('<div class="vegas-content-scrollable">');
+
+              $content = $('<div class="vegas-content">').css('overflow', this.$elmt.css('overflow')).css('padding', this.$elmt.css('padding'));
+
+              // Some browsers don't compute padding shorthand
+              if (!this.$elmt.css('padding')) {
+                  $content.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.css('padding', 0);
+              
+              this.$elmt.clone(true).children().appendTo($content);
+
+              $content.children().not('.vegas-dot-controls').wrapAll("<div class='contents'></div>");
+              $content.append($('<div class="vegas-arrow-controls"></div>'));
+              $content.find('.vegas-arrow-controls').append($('<div class="vegas-prev"></div>')).find('.vegas-prev').append($('<div class="vegas-prev-icon"></div>'));
+              $content.find('.vegas-arrow-controls').append($('<div class="vegas-next"></div>')).find('.vegas-next').append($('<div class="vegas-next-icon"></div>'));
+              $content.append($('<div class="vegas-dot-controls"></div>')).find('.vegas-dot-controls').append($('<div class="vegas-dots"></div>')).find('.vegas-dots').append($('<div class="vegas-dot"></div>'));
+
+              this.elmt.innerHTML = '';
+          }
 
-        if (self.settings.autoplay) {
-          self.trigger('play');
-        }
-      }, 1);
-    },
+          // Timer
+          if (timer && this.support.transition) {
+              $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
+              this.$timer = $timer;
+              this.$elmt.prepend($timer);
+          }
 
-    _preload: function () {
-      var img, i;
+          // Overlay
+          if (overlay) {
+              $overlay = $('<div class="vegas-overlay">');
 
-      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 (typeof overlay === 'string') {
+                  $overlay.css('background-image', 'url(' + overlay + ')');
+              }
 
-        if (this.settings.preload || this.settings.preloadVideos) {
-          if (this.support.video && this.settings.slides[i].video) {
-            if (this.settings.slides[i].video instanceof Array) {
-              this._video(this.settings.slides[i].video);
-            } else {
-              this._video(this.settings.slides[i].video.src);
-            }
+              this.$overlay = $overlay;
+              this.$elmt.prepend($overlay);
           }
-        }
-      }
-    },
 
-    _random: function (array) {
-      return array[Math.floor(Math.random() * array.length)];
-    },
+          // Container
+          this.$elmt.addClass('vegas-container');
 
-    _slideShow: function () {
-      var self = this;
+          if (!isBody) {
+              this.$elmt.append($contentScroll);
+              $contentScroll.append($content);
+          }
 
-      if (this.total > 1 && !this.ended && !this.paused && !this.noshow) {
-        this.timeout = setTimeout(function () {
-          self.next();
-        }, this._options('delay'));
-      }
-    },
+          this.$elmt.data('vegas', this);
+
+          setTimeout(function() {
+              self.trigger('init');
+              self._goto(self.slide);
+
+              if (self.settings.autoplay) {
+                  self.trigger('play');
+              }
+          }, 1);
+      },
+
+      _preload: function() {
+          var 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) {
+                      if (this.settings.slides[i].video instanceof Array) {
+                          this._video(this.settings.slides[i].video);
+                      } else {
+                          this._video(this.settings.slides[i].video.src);
+                      }
+                  }
+              }
+          }
+      },
 
-    _timer: function (state) {
-      var self = this;
+      _random: function(array) {
+          return array[Math.floor(Math.random() * array.length)];
+      },
 
-      clearTimeout(this.timeout);
+      _slideShow: function() {
+          var self = this;
 
-      if (!this.$timer) {
-        return;
-      }
+          if (this.total > 1 && !this.ended && !this.paused && !this.noshow) {
+              this.timeout = setTimeout(function() {
+                  self.next();
+              }, this._options('delay'));
+          }
+      },
 
-      this.$timer
-        .removeClass('vegas-timer-running')
-        .find('div')
-        .css('transition-duration', '0ms');
+      _timer: function(state) {
+          var self = this;
 
-      if (this.ended || this.paused || this.noshow) {
-        return;
-      }
+          clearTimeout(this.timeout);
 
-      if (state) {
-        setTimeout(function () {
-          self.$timer
-            .addClass('vegas-timer-running')
-            .find('div')
-            .css('transition-duration', self._options('delay') - 100 + 'ms');
-        }, 100);
-      }
-    },
+          if (!this.$timer) {
+              return;
+          }
 
-    _video: function (srcs) {
-      var video,
-        source,
-        cacheKey = srcs.toString();
+          this.$timer.removeClass('vegas-timer-running').find('div').css('transition-duration', '0ms');
 
-      if (videoCache[cacheKey]) {
-        return videoCache[cacheKey];
-      }
+          if (this.ended || this.paused || this.noshow) {
+              return;
+          }
 
-      if (!(srcs instanceof Array)) {
-        srcs = [ srcs ];
-      }
+          if (state) {
+              setTimeout(function() {
+                  self.$timer.addClass('vegas-timer-running').find('div').css('transition-duration', self._options('delay') - 100 + 'ms');
+              }, 100);
+          }
+      },
 
-      video = document.createElement('video');
-      video.preload = true;
+      _video: function(srcs) {
+          var video, source, cacheKey = srcs.toString();
 
-      srcs.forEach(function (src) {
-        source = document.createElement('source');
-        source.src = src;
-        video.appendChild(source);
-      });
+          if (videoCache[cacheKey]) {
+              return videoCache[cacheKey];
+          }
 
-      videoCache[cacheKey] = video;
+          if (!(srcs instanceof Array)) {
+              srcs = [srcs];
+          }
 
-      return video;
-    },
+          video = document.createElement('video');
+          video.preload = true;
 
-    _fadeOutSound: function (video, duration) {
-      var self   = this,
-        delay  = duration / 10,
-        volume = video.volume - 0.09;
+          srcs.forEach(function(src) {
+              source = document.createElement('source');
+              source.src = src;
+              video.appendChild(source);
+          });
 
-      if (volume > 0) {
-        video.volume = volume;
+          videoCache[cacheKey] = video;
 
-        setTimeout(function () {
-          self._fadeOutSound(video, duration);
-        }, delay);
-      } else {
-        video.pause();
-      }
-    },
+          return video;
+      },
 
-    _fadeInSound: function (video, duration) {
-      var self   = this,
-        delay  = duration / 10,
-        volume = video.volume + 0.09;
+      _fadeOutSound: function(video, duration) {
+          var self = this
+            , delay = duration / 10
+            , volume = video.volume - 0.09;
 
-      if (volume < 1) {
-        video.volume = volume;
+          if (volume > 0) {
+              video.volume = volume;
 
-        setTimeout(function () {
-          self._fadeInSound(video, duration);
-        }, delay);
-      }
-    },
+              setTimeout(function() {
+                  self._fadeOutSound(video, duration);
+              }, delay);
+          } else {
+              video.pause();
+          }
+      },
 
-    _options: function (key, i) {
-      if (i === undefined) {
-        i = this.slide;
-      }
+      _fadeInSound: function(video, duration) {
+          var self = this
+            , delay = duration / 10
+            , volume = video.volume + 0.09;
 
-      if (this.settings.slides[i][key] !== undefined) {
-        return this.settings.slides[i][key];
-      }
+          if (volume < 1) {
+              video.volume = volume;
 
-      return this.settings[key];
-    },
+              setTimeout(function() {
+                  self._fadeInSound(video, duration);
+              }, delay);
+          }
+      },
 
-    _goto: function (nb) {
-      if (typeof this.settings.slides[nb] === 'undefined') {
-        nb = 0;
-      }
+      _options: function(key, i) {
+          if (i === undefined) {
+              i = this.slide;
+          }
 
-      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'),
-        cover         = this._options('cover'),
-        color         = this._options('color') || this.$elmt.css('background-color'),
-        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 (this.settings.firstTransition && this.first) {
-        transition = this.settings.firstTransition || transition;
-      }
+          if (this.settings.slides[i][key] !== undefined) {
+              return this.settings.slides[i][key];
+          }
 
-      if (this.settings.firstTransitionDuration && this.first) {
-        transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
-      }
+          return this.settings[key];
+      },
 
-      if (this.first) {
-        this.first = false;
-      }
+      _goto: function(nb) {
+          if (typeof this.settings.slides[nb] === 'undefined') {
+              nb = 0;
+          }
 
-      if (cover !== 'repeat') {
-        if (cover === true) {
-          cover = 'cover';
-        } else if (cover === false) {
-          cover = 'contain';
-        }
-      }
+          this.slide = nb;
 
-      if (transition === 'random' || transition instanceof Array) {
-        if (transition instanceof Array) {
-          transition = this._random(transition);
-        } else {
-          transition = this._random(this.transitions);
-        }
-      }
+          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'), cover = this._options('cover'), color = this._options('color') || this.$elmt.css('background-color'), 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 (animation === 'random' || animation instanceof Array) {
-        if (animation instanceof Array) {
-          animation = this._random(animation);
-        } else {
-          animation = this._random(this.animations);
-        }
-      }
+          if (this.settings.firstTransition && this.first) {
+              transition = this.settings.firstTransition || transition;
+          }
 
-      if (transitionDuration === 'auto' || transitionDuration > delay) {
-        transitionDuration = delay;
-      }
+          if (this.settings.firstTransitionDuration && this.first) {
+              transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
+          }
 
-      if (animationDuration === 'auto') {
-        animationDuration = delay;
-      }
+          if (this.first) {
+              this.first = false;
+          }
 
-      $slide = $('<div class="vegas-slide"></div>');
+          if (cover !== 'repeat') {
+              if (cover === true) {
+                  cover = 'cover';
+              } else if (cover === false) {
+                  cover = 'contain';
+              }
+          }
 
-      if (this.support.transition && transition) {
-        $slide.addClass('vegas-transition-' + transition);
-      }
+          if (transition === 'random' || transition instanceof Array) {
+              if (transition instanceof Array) {
+                  transition = this._random(transition);
+              } else {
+                  transition = this._random(this.transitions);
+              }
+          }
 
-      // 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);
-
-        if (cover === 'repeat') {
-          $inner.css('background-repeat', 'repeat');
-        } else {
-          $inner.css('background-size', cover);
-        }
-
-        if (this.support.transition && animation) {
-          $inner
-            .addClass('vegas-animation-' + animation)
-            .css('animation-duration',  animationDuration + 'ms');
-        }
-
-        $slide.append($inner);
-      }
+          if (animation === 'random' || animation instanceof Array) {
+              if (animation instanceof Array) {
+                  animation = this._random(animation);
+              } else {
+                  animation = this._random(this.animations);
+              }
+          }
 
-      if (!this.support.transition) {
-        $slide.css('display', 'none');
-      }
+          if (transitionDuration === 'auto' || transitionDuration > delay) {
+              transitionDuration = delay;
+          }
 
-      if (total) {
-        $slides.eq(total - 1).after($slide);
-      } else {
-        this.$elmt.prepend($slide);
-      }
+          if (animationDuration === 'auto') {
+              animationDuration = delay;
+          }
 
-      $slides
-        .css('transition', 'all 0ms')
-        .each(function () {
-          this.className  = 'vegas-slide';
+          $slide = $('<div class="vegas-slide"></div>');
 
-          if (this.tagName === 'VIDEO') {
-            this.className += ' vegas-video';
+          if (this.support.transition && transition) {
+              $slide.addClass('vegas-transition-' + transition);
           }
 
-          if (transition) {
-            this.className += ' vegas-transition-' + transition;
-            this.className += ' vegas-transition-' + transition + '-in';
-          }
-        }
-        );
 
-      self._timer(false);
+          if (this.support.video && videoSettings) {
+              // Video
 
-      function go () {
-        self._timer(true);
+              if (videoSettings instanceof Array) {
+                  video = this._video(videoSettings);
+              } else {
+                  video = this._video(videoSettings.src);
+              }
 
-        setTimeout(function () {
-          if (transition) {
-            if (self.support.transition) {
-              $slides
-                .css('transition', 'all ' + transitionDuration + 'ms')
-                .addClass('vegas-transition-' + transition + '-out');
+              video.loop = videoSettings.loop !== undefined ? videoSettings.loop : true;
+              video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true;
 
-              $slides.each(function () {
-                var video = $slides.find('video').get(0);
+              if (video.muted === false) {
+                  video.volume = 0;
+                  this._fadeInSound(video, transitionDuration);
+              } else {
+                  video.pause();
+              }
 
-                if (video) {
-                  video.volume = 1;
-                  self._fadeOutSound(video, transitionDuration);
-                }
-              });
+              $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
-                .css('transition', 'all ' + transitionDuration + 'ms')
-                .addClass('vegas-transition-' + transition + '-in');
-            } else {
-              $slide.fadeIn(transitionDuration);
-            }
+              $slide.append($video);
+
+
+          } else {
+              // Image
+
+              img = new Image();
+              $inner = $('<div class="vegas-slide-inner"></div>').css('background-image', 'url("' + src + '")').css('background-color', color).css('background-position', align + ' ' + valign);
+
+              if (cover === 'repeat') {
+                  $inner.css('background-repeat', 'repeat');
+              } else {
+                  $inner.css('background-size', cover);
+              }
+
+              if (this.support.transition && animation) {
+                  $inner.addClass('vegas-animation-' + animation).css('animation-duration', animationDuration + 'ms');
+              }
+
+              $slide.append($inner);
           }
 
-          for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) {
-            $slides.eq(i).remove();
+          if (!this.support.transition) {
+              $slide.css('display', 'none');
+          }
+          if (total) {
+              $slides.eq(total - 1).after($slide);
+          } else {
+              this.$elmt.prepend($slide);
           }
 
-          self.trigger('walk');
-          self._slideShow();
-        }, 100);
-      }
-      if (video) {
-        if (video.readyState === 4) {
-          video.currentTime = 0;
-        }
-
-        video.play();
-        go();
-      } else {
-        img.src = src;
-
-        if (img.complete) {
-          go();
-        } else {
-          img.onload = go;
-        }
-      }
-    },
+          $slides.css('transition', 'all 0ms').each(function() {
+              this.className = 'vegas-slide';
 
-    _end: function () {
-      this.ended = !this.settings.autoplay;
-      this._timer(false);
-      this.trigger('end');
-    },
+              if (this.tagName === 'VIDEO') {
+                  this.className += ' vegas-video';
+              }
 
-    shuffle: function () {
-      var temp,
-        rand;
+              if (transition) {
+                  this.className += ' vegas-transition-' + transition;
+                  this.className += ' vegas-transition-' + transition + '-in';
+              }
+          });
 
-      for (var i = this.total - 1; i > 0; i--) {
-        rand = Math.floor(Math.random() * (i + 1));
-        temp = this.settings.slides[i];
+          self._timer(false);
 
-        this.settings.slides[i] = this.settings.slides[rand];
-        this.settings.slides[rand] = temp;
-      }
-    },
+          function go() {
+              self._timer(true);
 
-    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;
-    },
+              setTimeout(function() {
+                  if (transition) {
+                      if (self.support.transition) {
+                          $slides.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-out').css('opacity', self.settings.prevTransparent ? 0 : 1);
 
-    jump: function (nb) {
-      if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
-        return;
-      }
+                          $slides.each(function() {
+                              var video = $slides.find('video').get(0);
 
-      this.slide = nb;
-      this._goto(this.slide);
-    },
+                              if (video) {
+                                  video.volume = 1;
+                                  self._fadeOutSound(video, transitionDuration);
+                              }
+                          });
 
-    next: function () {
-      this.slide++;
+                          $slide.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-in');
+                      } else {
+                          $slide.fadeIn(transitionDuration);
+                      }
+                  }
 
-      if (this.slide >= this.total) {
-        if (!this.settings.loop) {
-          return this._end();
-        }
+                  for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) {
+                      $slides.eq(i).remove();
+                  }
 
-        this.slide = 0;
-      }
+                  self.trigger('walk');
+                  self._slideShow();
+              }, 100);
+          }
+          if (video) {
+              if (video.readyState === 4) {
+                  video.currentTime = 0;
+              }
+
+              video.play();
+              go();
+          } else {
+              img.src = src;
+
+              if (img.complete) {
+                  go();
+              } else {
+                  img.onload = go;
+              }
+          }
+      },
+
+      _end: function() {
+          this.ended = !this.settings.autoplay;
+          this._timer(false);
+          this.trigger('end');
+      },
+
+      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._goto(this.slide);
-    },
+              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;
+      },
 
-    previous: function () {
-      this.slide--;
+      jump: function(nb) {
+          if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
+              return;
+          }
+          this.trigger('jump');
+          this.slide = nb;
+          this.trigger('change');
+          this._goto(this.slide);
+      },
 
-      if (this.slide < 0) {
-        if (!this.settings.loop) {
+      next: function() {
           this.slide++;
-          return;
-        } else {
-          this.slide = this.total - 1;
-        }
-      }
+          this.trigger('next');
+          this.trigger('change');
+          if (this.slide >= this.total) {
+              this.slide--;
+              if (!this.settings.loop) {
+                  return this._end();
+              }
+
+              this.slide = 0;
+          }
 
-      this._goto(this.slide);
-    },
+          this._goto(this.slide);
+      },
+
+      previous: function() {
+          this.slide--;
+          this.trigger('previous');
+          this.trigger('change');
+          if (this.slide < 0) {
+              if (!this.settings.loop) {
+                  this.slide++;
+                  return;
+              } else {
+                  this.slide = this.total - 1;
+              }
+          }
 
-    trigger: function (fn) {
-      var params = [];
+          this._goto(this.slide);
+      },
 
-      if (fn === 'init') {
-        params = [ this.settings ];
-      } else {
-        params = [
-          this.slide,
-          this.settings.slides[this.slide]
-        ];
-      }
+      trigger: function(fn) {
+          var params = [];
 
-      this.$elmt.trigger('vegas' + fn, params);
+          if (fn === 'init') {
+              params = [this.settings];
+          } else {
+              params = [this.slide, this.settings.slides[this.slide]];
+          }
 
-      if (typeof this.settings[fn] === 'function') {
-        this.settings[fn].apply(this.$elmt, params);
-      }
-    },
+          this.$elmt.trigger('vegas' + fn, params);
 
-    options: function (key, value) {
-      var oldSlides = this.settings.slides.slice();
+          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;
+          }
 
-      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();
+          }
+      },
 
-      // In case slides have changed
-      if (this.settings.slides !== oldSlides) {
-        this.total  = this.settings.slides.length;
-        this.noshow = this.total < 2;
-        this._preload();
-      }
-    },
+      destroy: function() {
+          clearTimeout(this.timeout);
 
-    destroy: function () {
-      clearTimeout(this.timeout);
+          this.$elmt.removeClass('vegas-container');
+          this.$elmt.find('> .vegas-slide').remove();
+          this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
+          this.$elmt.find('> .vegas-wrapper').remove();
 
-      this.$elmt.removeClass('vegas-container');
-      this.$elmt.find('> .vegas-slide').remove();
-      this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
-      this.$elmt.find('> .vegas-wrapper').remove();
+          if (this.settings.timer) {
+              this.$timer.remove();
+          }
 
-      if (this.settings.timer) {
-        this.$timer.remove();
-      }
+          if (this.settings.overlay) {
+              this.$overlay.remove();
+          }
 
-      if (this.settings.overlay) {
-        this.$overlay.remove();
+          this.elmt._vegas = null;
       }
-
-      this.elmt._vegas = null;
-    }
   };
 
   $.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;
-        }
-      });
+      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 (options[0] === '_' && options[1] === '_'){
+                  returns = instance[options.substring(2)];
+              } else {
+                  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.');
+          }
 
-      if (error) {
-        throw new Error('No method "' + options + '" in Vegas.');
+          return returns !== undefined ? returns : this;
       }
-
-      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 || window.m4q);
+  $.vegas.isVideoCompatible = function() {
+      return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
+  }
+  ;
+
+}
+)(window.jQuery || window.Zepto || window.m4q);
+$(document).ready(function() {
+  if (typeof $.initialize == 'function'){
+      $.initialize('[type=vegas]', function(event) {
+          if (! window.delegate_vegas){
+              window.delegate_vegas = true;
+              delegate_function();
+          }
+          if ($(this).is(':not("[vegas]")')){
+              $(this).vegas().attr('vegas', '');
+          }
+      });
+  } else {
+      window.init_vegas = function(){
+          $('[type="vegas"]:not("[vegas]")').vegas().attr('vegas', '');
+      }
+      if ($('[type="vegas"]:not("[vegas]")').length > 0){
+          window.init_vegas();
+          window.delegate_vegas = true;
+          delegate_function();
+      }
+  }
+  
+});
+function delegate_function(){
+  $("body").delegate("[type=vegas][vegas]", "mousedown", function() {
+      var e = window.event;
+      startX = e.clientX;
+      window.sliding = true;
+  });
+  $("body").delegate("[type=vegas][vegas]", "mouseup", function() {
+      var e = window.event;
+      var endX = e.clientX;
+      // 左滑
+      if ((startX - endX) > 30) {
+          $(this).vegas('next');
+      }
+      // 右滑
+      if ((endX - startX) > 30) {
+          $(this).vegas('previous');
+      }
+      window.sliding = false;
+  });
+  $("body").delegate("[type=vegas][vegas]", "mouseleave", function() {
+      if (window.sliding) {
+          var e = window.event;
+          var endX = e.clientX;
+          // 左滑
+          if ((startX - endX) > 30) {
+              $(this).vegas('next');
+          }
+          // 右滑
+          if ((endX - startX) > 30) {
+              $(this).vegas('previous');
+          }
+          window.sliding = false;
+      }
+  });
+  $("body").delegate('[type=vegas][vegas] .vegas-prev', "click", function() {
+      $(this).parents('[type=vegas]').vegas('previous');
+  });
+  $("body").delegate('[type=vegas][vegas] .vegas-next', "click", function() {
+      $(this).parents('[type=vegas]').vegas('next');
+  });
+  $("body").delegate('[type=vegas][vegas] .vegas-dots .vegas-dot', "click", function() {
+      $(this).parents('[type=vegas]').vegas('jump', $(this).index());
+  });
+}