vegas.js 32 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852853854855856857858859860861862863864865866867868869870871872873874875876877878879880881882883884885886887888889890891892893894895896897898899900901902903904905906907908909910911912913914915916917918919920921922923924925926927928929930931932933934935936937938939940
  1. (function($) {
  2. 'use strict';
  3. var defaults = {
  4. slide: 0,
  5. delay: 5000,
  6. loop: true,
  7. preload: false,
  8. preloadImage: false,
  9. preloadVideo: false,
  10. timer: true,
  11. overlay: false,
  12. autoplay: true,
  13. shuffle: false,
  14. cover: true,
  15. color: null,
  16. align: 'center',
  17. valign: 'center',
  18. firstTransition: null,
  19. firstTransitionDuration: null,
  20. transition: 'fade',
  21. transitionDuration: 1000,
  22. transitionRegister: [],
  23. animation: null,
  24. animationDuration: 'auto',
  25. animationRegister: [],
  26. slidesToKeep: 1,
  27. "arrow-status": 'none', // none|disabled|hide|show
  28. "arrow-hookStatus": 'hide', // none|disabled|hide|show
  29. "arrow-prevHook": null,
  30. "arrow-nextHook": null,
  31. "dot-status": 'none', //none|show
  32. "dot-hook": null,
  33. "dot-hookStatus": 'clone', // none|clone|clone-id
  34. prevTransparent: true,
  35. init: function() {},
  36. play: function() {},
  37. pause: function() {},
  38. walk: function() {},
  39. slides: [// {
  40. // src: null,
  41. // color: null,
  42. // delay: null,
  43. // align: null,
  44. // valign: null,
  45. // transition: null,
  46. // transitionDuration: null,
  47. // animation: null,
  48. // animationDuration: null,
  49. // cover: true,
  50. // video: {
  51. // src: [],
  52. // mute: true,
  53. // loop: true
  54. // }
  55. // ...
  56. ]
  57. };
  58. var videoCache = {};
  59. var Vegas = function(elmt, options) {
  60. this.elmt = elmt;
  61. this.$elmt = $(elmt);
  62. this.settings = $.extend({}, defaults, $.vegas.defaults, options);
  63. this._init_settings();
  64. this.slide = this.settings.slide;
  65. this.total = this.settings.slides.length;
  66. this.noshow = this.total < 2;
  67. this.paused = !this.settings.autoplay || this.noshow;
  68. this.ended = false;
  69. this.$timer = null;
  70. this.$overlay = null;
  71. this.$slide = null;
  72. this.timeout = null;
  73. this.first = true;
  74. 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'];
  75. this.animations = ['kenburns', 'kenburnsLeft', 'kenburnsRight', 'kenburnsUp', 'kenburnsUpLeft', 'kenburnsUpRight', 'kenburnsDown', 'kenburnsDownLeft', 'kenburnsDownRight'];
  76. if (!(this.settings.transitionRegister instanceof Array)) {
  77. this.settings.transitionRegister = [this.settings.transitionRegister];
  78. }
  79. if (!(this.settings.animationRegister instanceof Array)) {
  80. this.settings.animationRegister = [this.settings.animationRegister];
  81. }
  82. this.transitions = this.transitions.concat(this.settings.transitionRegister);
  83. this.animations = this.animations.concat(this.settings.animationRegister);
  84. this.support = {
  85. objectFit: 'objectFit'in document.body.style,
  86. transition: 'transition'in document.body.style || 'WebkitTransition'in document.body.style,
  87. video: $.vegas.isVideoCompatible()
  88. };
  89. if (this.settings.shuffle === true) {
  90. this.shuffle();
  91. }
  92. this._init();
  93. this._arrows();
  94. this._dots();
  95. };
  96. Vegas.prototype = {
  97. _init_settings: function(options) {
  98. var attributes = this.elmt.attributes;
  99. var settings = this.settings;
  100. window.attr_merge(attributes, settings);
  101. this.slide = settings.slide;
  102. var slides = [];
  103. this.$elmt.children().each(function() {
  104. var $this = $(this);
  105. if ($this.is('img')) {
  106. slides.push({
  107. src: $this.attr('src'),
  108. });
  109. if ($this.attr('data-transition') != undefined && $this.attr('data-transition') != settings.transition) {
  110. slides[slides.length - 1].transition = $this.attr('data-transition');
  111. }
  112. if ($this.attr('data-animation') != undefined && $this.attr('data-animation') != settings.animation) {
  113. slides[slides.length - 1].transition = $this.attr('data-animation');
  114. }
  115. }
  116. if ($this.is('video')) {
  117. if ($this.children().length > 0) {
  118. slides.push({
  119. video: {
  120. src: [],
  121. loop: eval($this.attr('data-loop') || false),
  122. mute: eval($this.attr('data-mute') || true),
  123. }
  124. });
  125. var video_srces = [];
  126. $this.children().each(function() {
  127. video_srces.push($(this).attr('src'));
  128. });
  129. slides[slides.length - 1].video.src = video_srces;
  130. } else {
  131. slides.push({
  132. video: {
  133. src: [$this.attr('src')],
  134. loop: eval($this.attr('data-loop') || false),
  135. mute: eval($this.attr('data-mute') || true),
  136. }
  137. });
  138. }
  139. }
  140. });
  141. this.settings.slides = slides;
  142. },
  143. _arrows: function(){
  144. let settings = Object.keys(this.settings).reduce(function (carry, key) {
  145. key.includes('arrow-') && (carry[key.replace('arrow-', '')] = this.settings[key])
  146. return carry;
  147. }, {});
  148. let this_prev = this.$elmt.find('.vegas-prev');
  149. let this_next = this.$elmt.find('.vegas-next');
  150. if (settings.prevHook != null) {
  151. $("body").on("click", settings.prevHook, function() {
  152. $('[data-arrow-prevHook="' + settings.prevHook + '"] .vegas-prev').click();
  153. });
  154. }
  155. if (settings.nextHook != null) {
  156. $("body").on("click", settings.nextHook, function() {
  157. $('[data-arrow-nextHook="' + settings.nextHook + '"] .vegas-next').click();
  158. });
  159. }
  160. if (settings.status == 'none') {
  161. this_prev.hide();
  162. this_next.hide();
  163. } else if (settings.status == 'hide') {
  164. if (this.slide == 0) {
  165. this.$elmt.find('.vegas-prev').hide();
  166. }
  167. this.$elmt.on('vegaschange', function() {
  168. if ($(this).vegas('current') <= 0) {
  169. $(this).find('.vegas-prev').hide();
  170. } else {
  171. $(this).find('.vegas-prev').show();
  172. }
  173. if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
  174. $(this).find('.vegas-next').hide();
  175. } else {
  176. $(this).find('.vegas-next').show();
  177. }
  178. });
  179. } else if (settings.status == 'disabled') {
  180. if (this.slide == 0) {
  181. this.$elmt.find('.vegas-prev').addClass('vegas-disabled');
  182. }
  183. this.$elmt.on('vegaschange', function() {
  184. if ($(this).vegas('current') <= 0) {
  185. $(this).find('.vegas-prev').addClass('vegas-disabled');
  186. } else {
  187. $(this).find('.vegas-prev').removeClass('vegas-disabled');
  188. }
  189. if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
  190. $(this).find('.vegas-next').addClass('vegas-disabled');
  191. } else {
  192. $(this).find('.vegas-next').removeClass('vegas-disabled');
  193. }
  194. });
  195. }
  196. if (settings.hookStatus == 'none') {
  197. $(settings.prevHook).hide();
  198. $(settings.nextHook).hide();
  199. } else if (settings.hookStatus == 'hide') {
  200. if (this.slide == 0) {
  201. $(settings.prevHook).hide();
  202. }
  203. this.$elmt.on('vegaschange', function() {
  204. if ($(this).vegas('current') <= 0) {
  205. $(settings.prevHook).hide();
  206. } else {
  207. $(settings.prevHook).show();
  208. }
  209. if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
  210. $(settings.nextHook).hide();
  211. } else {
  212. $(settings.nextHook).show();
  213. }
  214. });
  215. } else if (settings.hookStatus == 'disabled') {
  216. if (this.slide == 0) {
  217. $(settings.prevHook).addClass('vegas-disabled');
  218. }
  219. this.$elmt.on('vegaschange', function() {
  220. if ($(this).vegas('current') <= 0) {
  221. $(settings.prevHook).addClass('vegas-disabled');
  222. } else {
  223. $(settings.prevHook).removeClass('vegas-disabled');
  224. }
  225. if ($(this).vegas('current') >= ($(this).vegas('__total') - 1)) {
  226. $(settings.nextHook).addClass('vegas-disabled');
  227. } else {
  228. $(settings.nextHook).removeClass('vegas-disabled');
  229. }
  230. });
  231. }
  232. },
  233. _dots: function() {
  234. let settings = Object.keys(this.settings).reduce(function (carry, key) {
  235. key.includes('dot-') && (carry[key.replace('dot-', '')] = this.settings[key])
  236. return carry;
  237. }, {});
  238. let dots = this.$elmt.find('.vegas-dots .vegas-dot').eq(0);
  239. let dataHook = $(settings.hook);
  240. let dataHookChild = $(settings.hook).children().eq(0);
  241. for (var i = 1; i < this.settings.slides.length; i++) {
  242. dots.clone(true).appendTo(this.$elmt.find('.vegas-dots'));
  243. if (settings.hookStatus == "clone") {
  244. dataHookChild.clone(true).appendTo(dataHook);
  245. }
  246. if (settings.hookStatus == "clone-id") {
  247. const index = i;
  248. var vegas_dot = dataHookChild.clone(true);
  249. vegas_dot.html(function(x, oldHTML) {
  250. return oldHTML.replace(/\${i}/g, index + 1);
  251. }).appendTo(dataHook);
  252. }
  253. }
  254. if (settings.hookStatus == "clone-id") {
  255. dataHookChild.html(function(x, oldHTML) {
  256. return oldHTML.replace(/\${i}/g, 1);
  257. });
  258. }
  259. if (settings.status == "hide") {
  260. this.$elmt.find('.vegas-dots').hide();
  261. }
  262. this.$elmt.find('.vegas-dots .vegas-dot').eq(this.slide).addClass('vegas-dot-active');
  263. $(settings.hook).children().eq(this.slide).addClass('vegas-dot-active');
  264. this.$elmt.on('vegaschange', function() {
  265. $(this).find('.vegas-dots .vegas-dot.vegas-dot-active').removeClass('vegas-dot-active');
  266. $(settings.hook).children('.vegas-dot-active').removeClass('vegas-dot-active');
  267. 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');
  268. active_dot = $(this).vegas('current') < 0 ? 0 : active_dot;
  269. $(this).find('.vegas-dots .vegas-dot').eq(active_dot).addClass('vegas-dot-active');
  270. $(settings.hook).children().eq(active_dot).addClass('vegas-dot-active');
  271. });
  272. var dot_clone = settings.hook;
  273. $(settings.hook).children().on('click', function() {
  274. $('[data-dot-hook="' + dot_clone + '"] .vegas-dots').children('.vegas-dot').eq($(this).index()).click();
  275. });
  276. },
  277. _init: function() {
  278. var $content, $contentScroll, $overlay, $timer, isBody = this.elmt.tagName === 'BODY', timer = this.settings.timer, overlay = this.settings.overlay, self = this;
  279. // Preloading
  280. this._preload();
  281. // Div with scrollable content
  282. if (!isBody) {
  283. $contentScroll = $('<div class="vegas-content-scrollable">');
  284. $content = $('<div class="vegas-content">').css('overflow', this.$elmt.css('overflow')).css('padding', this.$elmt.css('padding'));
  285. // Some browsers don't compute padding shorthand
  286. if (!this.$elmt.css('padding')) {
  287. $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'));
  288. }
  289. this.$elmt.css('padding', 0);
  290. this.$elmt.clone(true).children().appendTo($content);
  291. $content.children().not('.vegas-dot-controls').wrapAll("<div class='contents'></div>");
  292. $content.append($('<div class="vegas-arrow-controls"></div>'));
  293. $content.find('.vegas-arrow-controls').append($('<div class="vegas-prev"></div>')).find('.vegas-prev').append($('<div class="vegas-prev-icon"></div>'));
  294. $content.find('.vegas-arrow-controls').append($('<div class="vegas-next"></div>')).find('.vegas-next').append($('<div class="vegas-next-icon"></div>'));
  295. $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>'));
  296. this.elmt.innerHTML = '';
  297. }
  298. // Timer
  299. if (timer && this.support.transition) {
  300. $timer = $('<div class="vegas-timer"><div class="vegas-timer-progress">');
  301. this.$timer = $timer;
  302. this.$elmt.prepend($timer);
  303. }
  304. // Overlay
  305. if (overlay) {
  306. $overlay = $('<div class="vegas-overlay">');
  307. if (typeof overlay === 'string') {
  308. $overlay.css('background-image', 'url(' + overlay + ')');
  309. }
  310. this.$overlay = $overlay;
  311. this.$elmt.prepend($overlay);
  312. }
  313. // Container
  314. this.$elmt.addClass('vegas-container');
  315. if (!isBody) {
  316. this.$elmt.append($contentScroll);
  317. $contentScroll.append($content);
  318. }
  319. this.$elmt.data('vegas', this);
  320. setTimeout(function() {
  321. self.trigger('init');
  322. self._goto(self.slide);
  323. if (self.settings.autoplay) {
  324. self.trigger('play');
  325. }
  326. }, 1);
  327. },
  328. _preload: function() {
  329. var img, i;
  330. for (i = 0; i < this.settings.slides.length; i++) {
  331. if (this.settings.preload || this.settings.preloadImages) {
  332. if (this.settings.slides[i].src) {
  333. img = new Image();
  334. img.src = this.settings.slides[i].src;
  335. }
  336. }
  337. if (this.settings.preload || this.settings.preloadVideos) {
  338. if (this.support.video && this.settings.slides[i].video) {
  339. if (this.settings.slides[i].video instanceof Array) {
  340. this._video(this.settings.slides[i].video);
  341. } else {
  342. this._video(this.settings.slides[i].video.src);
  343. }
  344. }
  345. }
  346. }
  347. },
  348. _random: function(array) {
  349. return array[Math.floor(Math.random() * array.length)];
  350. },
  351. _slideShow: function() {
  352. var self = this;
  353. if (this.total > 1 && !this.ended && !this.paused && !this.noshow) {
  354. this.timeout = setTimeout(function() {
  355. self.next();
  356. }, this._options('delay'));
  357. }
  358. },
  359. _timer: function(state) {
  360. var self = this;
  361. clearTimeout(this.timeout);
  362. if (!this.$timer) {
  363. return;
  364. }
  365. this.$timer.removeClass('vegas-timer-running').find('div').css('transition-duration', '0ms');
  366. if (this.ended || this.paused || this.noshow) {
  367. return;
  368. }
  369. if (state) {
  370. setTimeout(function() {
  371. self.$timer.addClass('vegas-timer-running').find('div').css('transition-duration', self._options('delay') - 100 + 'ms');
  372. }, 100);
  373. }
  374. },
  375. _video: function(srcs) {
  376. var video, source, cacheKey = srcs.toString();
  377. if (videoCache[cacheKey]) {
  378. return videoCache[cacheKey];
  379. }
  380. if (!(srcs instanceof Array)) {
  381. srcs = [srcs];
  382. }
  383. video = document.createElement('video');
  384. video.preload = true;
  385. srcs.forEach(function(src) {
  386. source = document.createElement('source');
  387. source.src = src;
  388. video.appendChild(source);
  389. });
  390. videoCache[cacheKey] = video;
  391. return video;
  392. },
  393. _fadeOutSound: function(video, duration) {
  394. var self = this,
  395. delay = duration / 10,
  396. volume = video.volume - 0.09;
  397. if (volume > 0) {
  398. video.volume = volume;
  399. setTimeout(function() {
  400. self._fadeOutSound(video, duration);
  401. }, delay);
  402. } else {
  403. video.pause();
  404. }
  405. },
  406. _fadeInSound: function(video, duration) {
  407. var self = this,
  408. delay = duration / 10,
  409. volume = video.volume + 0.09;
  410. if (volume < 1) {
  411. video.volume = volume;
  412. setTimeout(function() {
  413. self._fadeInSound(video, duration);
  414. }, delay);
  415. }
  416. },
  417. _options: function(key, i) {
  418. if (i === undefined) {
  419. i = this.slide;
  420. }
  421. if (this.settings.slides[i][key] !== undefined) {
  422. return this.settings.slides[i][key];
  423. }
  424. return this.settings[key];
  425. },
  426. _goto: function(nb) {
  427. if (typeof this.settings.slides[nb] === 'undefined') {
  428. nb = 0;
  429. }
  430. this.slide = nb;
  431. 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;
  432. var transition = this._options('transition'),
  433. transitionDuration = this._options('transitionDuration'),
  434. animation = this._options('animation'),
  435. animationDuration = this._options('animationDuration');
  436. if (this.settings.firstTransition && this.first) {
  437. transition = this.settings.firstTransition || transition;
  438. }
  439. if (this.settings.firstTransitionDuration && this.first) {
  440. transitionDuration = this.settings.firstTransitionDuration || transitionDuration;
  441. }
  442. if (this.first) {
  443. this.first = false;
  444. }
  445. if (cover !== 'repeat') {
  446. if (cover === true) {
  447. cover = 'cover';
  448. } else if (cover === false) {
  449. cover = 'contain';
  450. }
  451. }
  452. if (transition === 'random' || transition instanceof Array) {
  453. if (transition instanceof Array) {
  454. transition = this._random(transition);
  455. } else {
  456. transition = this._random(this.transitions);
  457. }
  458. }
  459. if (animation === 'random' || animation instanceof Array) {
  460. if (animation instanceof Array) {
  461. animation = this._random(animation);
  462. } else {
  463. animation = this._random(this.animations);
  464. }
  465. }
  466. if (transitionDuration === 'auto' || transitionDuration > delay) {
  467. transitionDuration = delay;
  468. }
  469. if (animationDuration === 'auto') {
  470. animationDuration = delay;
  471. }
  472. $slide = $('<div class="vegas-slide"></div>');
  473. if (this.support.transition && transition) {
  474. $slide.addClass('vegas-transition-' + transition);
  475. }
  476. if (this.support.video && videoSettings) {
  477. // Video
  478. if (videoSettings instanceof Array) {
  479. video = this._video(videoSettings);
  480. } else {
  481. video = this._video(videoSettings.src);
  482. }
  483. video.loop = videoSettings.loop !== undefined ? videoSettings.loop : true;
  484. video.muted = videoSettings.mute !== undefined ? videoSettings.mute : true;
  485. if (video.muted === false) {
  486. video.volume = 0;
  487. this._fadeInSound(video, transitionDuration);
  488. } else {
  489. video.pause();
  490. }
  491. $video = $(video).addClass('vegas-video').css('background-color', color);
  492. if (this.support.objectFit) {
  493. $video.css('object-position', align + ' ' + valign).css('object-fit', cover).css('width', '100%').css('height', '100%');
  494. } else if (cover === 'contain') {
  495. $video.css('width', '100%').css('height', '100%');
  496. }
  497. $slide.append($video);
  498. } else {
  499. // Image
  500. img = new Image();
  501. $inner = $('<div class="vegas-slide-inner"></div>').css('background-image', 'url("' + src + '")').css('background-color', color).css('background-position', align + ' ' + valign);
  502. if (cover === 'repeat') {
  503. $inner.css('background-repeat', 'repeat');
  504. } else {
  505. $inner.css('background-size', cover);
  506. }
  507. if (this.support.transition && animation) {
  508. $inner.addClass('vegas-animation-' + animation).css('animation-duration', animationDuration + 'ms');
  509. }
  510. $slide.append($inner);
  511. }
  512. if (!this.support.transition) {
  513. $slide.css('display', 'none');
  514. }
  515. if (total) {
  516. $slides.eq(total - 1).after($slide);
  517. } else {
  518. this.$elmt.prepend($slide);
  519. }
  520. $slides.css('transition', 'all 0ms').each(function() {
  521. this.className = 'vegas-slide';
  522. if (this.tagName === 'VIDEO') {
  523. this.className += ' vegas-video';
  524. }
  525. if (transition) {
  526. this.className += ' vegas-transition-' + transition;
  527. this.className += ' vegas-transition-' + transition + '-in';
  528. }
  529. });
  530. self._timer(false);
  531. function go() {
  532. self._timer(true);
  533. setTimeout(function() {
  534. if (transition) {
  535. if (self.support.transition) {
  536. $slides.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-out').css('opacity', self.settings.prevTransparent ? 0 : 1);
  537. $slides.each(function() {
  538. var video = $slides.find('video').get(0);
  539. if (video) {
  540. video.volume = 1;
  541. self._fadeOutSound(video, transitionDuration);
  542. }
  543. });
  544. $slide.css('transition', 'all ' + transitionDuration + 'ms').addClass('vegas-transition-' + transition + '-in');
  545. } else {
  546. $slide.fadeIn(transitionDuration);
  547. }
  548. }
  549. for (var i = 0; i < $slides.length - self.settings.slidesToKeep; i++) {
  550. $slides.eq(i).remove();
  551. }
  552. self.trigger('walk');
  553. self._slideShow();
  554. }, 100);
  555. }
  556. if (video) {
  557. if (video.readyState === 4) {
  558. video.currentTime = 0;
  559. }
  560. video.play();
  561. go();
  562. } else {
  563. img.src = src;
  564. if (img.complete) {
  565. go();
  566. } else {
  567. img.onload = go;
  568. }
  569. }
  570. },
  571. _end: function() {
  572. this.ended = !this.settings.autoplay;
  573. this._timer(false);
  574. this.trigger('end');
  575. },
  576. shuffle: function() {
  577. var temp, rand;
  578. for (var i = this.total - 1; i > 0; i--) {
  579. rand = Math.floor(Math.random() * (i + 1));
  580. temp = this.settings.slides[i];
  581. this.settings.slides[i] = this.settings.slides[rand];
  582. this.settings.slides[rand] = temp;
  583. }
  584. },
  585. play: function() {
  586. if (this.paused) {
  587. this.paused = false;
  588. this.next();
  589. this.trigger('play');
  590. }
  591. },
  592. pause: function() {
  593. this._timer(false);
  594. this.paused = true;
  595. this.trigger('pause');
  596. },
  597. toggle: function() {
  598. if (this.paused) {
  599. this.play();
  600. } else {
  601. this.pause();
  602. }
  603. },
  604. playing: function() {
  605. return !this.paused && !this.noshow;
  606. },
  607. current: function(advanced) {
  608. if (advanced) {
  609. return {
  610. slide: this.slide,
  611. data: this.settings.slides[this.slide]
  612. };
  613. }
  614. return this.slide;
  615. },
  616. jump: function(nb) {
  617. if (nb < 0 || nb > this.total - 1 || nb === this.slide) {
  618. return;
  619. }
  620. this.trigger('jump');
  621. this.slide = nb;
  622. this.trigger('change');
  623. this._goto(this.slide);
  624. },
  625. next: function() {
  626. this.slide++;
  627. this.trigger('next');
  628. this.trigger('change');
  629. if (this.slide >= this.total) {
  630. this.slide--;
  631. if (!this.settings.loop) {
  632. return this._end();
  633. }
  634. this.slide = 0;
  635. }
  636. this._goto(this.slide);
  637. },
  638. previous: function() {
  639. this.slide--;
  640. this.trigger('previous');
  641. this.trigger('change');
  642. if (this.slide < 0) {
  643. if (!this.settings.loop) {
  644. this.slide++;
  645. return;
  646. } else {
  647. this.slide = this.total - 1;
  648. }
  649. }
  650. this._goto(this.slide);
  651. },
  652. trigger: function(fn) {
  653. var params = [];
  654. if (fn === 'init') {
  655. params = [this.settings];
  656. } else {
  657. params = [this.slide, this.settings.slides[this.slide]];
  658. }
  659. this.$elmt.trigger('vegas' + fn, params);
  660. if (typeof this.settings[fn] === 'function') {
  661. this.settings[fn].apply(this.$elmt, params);
  662. }
  663. },
  664. options: function(key, value) {
  665. var oldSlides = this.settings.slides.slice();
  666. if (typeof key === 'object') {
  667. this.settings = $.extend({}, defaults, $.vegas.defaults, key);
  668. } else if (typeof key === 'string') {
  669. if (value === undefined) {
  670. return this.settings[key];
  671. }
  672. this.settings[key] = value;
  673. } else {
  674. return this.settings;
  675. }
  676. // In case slides have changed
  677. if (this.settings.slides !== oldSlides) {
  678. this.total = this.settings.slides.length;
  679. this.noshow = this.total < 2;
  680. this._preload();
  681. }
  682. },
  683. destroy: function() {
  684. clearTimeout(this.timeout);
  685. this.$elmt.removeClass('vegas-container');
  686. this.$elmt.find('> .vegas-slide').remove();
  687. this.$elmt.find('> .vegas-wrapper').clone(true).children().appendTo(this.$elmt);
  688. this.$elmt.find('> .vegas-wrapper').remove();
  689. if (this.settings.timer) {
  690. this.$timer.remove();
  691. }
  692. if (this.settings.overlay) {
  693. this.$overlay.remove();
  694. }
  695. this.elmt._vegas = null;
  696. }
  697. };
  698. $.fn.vegas = function(options) {
  699. var args = arguments, error = false, returns;
  700. if (options === undefined || typeof options === 'object') {
  701. return this.each(function() {
  702. if (!this._vegas) {
  703. this._vegas = new Vegas(this,options);
  704. }
  705. });
  706. } else if (typeof options === 'string') {
  707. this.each(function() {
  708. var instance = this._vegas;
  709. if (!instance) {
  710. throw new Error('No Vegas applied to this element.');
  711. }
  712. if (options[0] === '_' && options[1] === '_'){
  713. returns = instance[options.substring(2)];
  714. } else {
  715. if (typeof instance[options] === 'function' && options[0] !== '_') {
  716. returns = instance[options].apply(instance, [].slice.call(args, 1));
  717. } else {
  718. error = true;
  719. }
  720. }
  721. });
  722. if (error) {
  723. throw new Error('No method "' + options + '" in Vegas.');
  724. }
  725. return returns !== undefined ? returns : this;
  726. }
  727. }
  728. ;
  729. $.vegas = {};
  730. $.vegas.defaults = defaults;
  731. $.vegas.isVideoCompatible = function() {
  732. return !/(Android|webOS|Phone|iPad|iPod|BlackBerry|Windows Phone)/i.test(navigator.userAgent);
  733. }
  734. ;
  735. }
  736. )(window.jQuery || window.Zepto || window.m4q);
  737. $(document).ready(function() {
  738. if (typeof $.initialize == 'function'){
  739. $.initialize('[type=vegas]', function(event) {
  740. if (! window.delegate_vegas){
  741. window.delegate_vegas = true;
  742. delegate_function();
  743. }
  744. if ($(this).is(':not("[vegas]")')){
  745. $(this).vegas().attr('vegas', '');
  746. }
  747. });
  748. } else {
  749. window.init_vegas = function(){
  750. $('[type="vegas"]:not("[vegas]")').vegas().attr('vegas', '');
  751. };
  752. if ($('[type="vegas"]:not("[vegas]")').length > 0){
  753. window.init_vegas();
  754. window.delegate_vegas = true;
  755. delegate_function();
  756. }
  757. }
  758. });
  759. function delegate_function(){
  760. $("body").delegate("[type=vegas][vegas]", "mousedown", function() {
  761. var e = window.event;
  762. startX = e.clientX;
  763. window.sliding = true;
  764. });
  765. $("body").delegate("[type=vegas][vegas]", "mouseup", function() {
  766. var e = window.event;
  767. var endX = e.clientX;
  768. // 左滑
  769. if ((startX - endX) > 30) {
  770. $(this).vegas('next');
  771. }
  772. // 右滑
  773. if ((endX - startX) > 30) {
  774. $(this).vegas('previous');
  775. }
  776. window.sliding = false;
  777. });
  778. $("body").delegate("[type=vegas][vegas]", "mouseleave", function() {
  779. if (window.sliding) {
  780. var e = window.event;
  781. var endX = e.clientX;
  782. // 左滑
  783. if ((startX - endX) > 30) {
  784. $(this).vegas('next');
  785. }
  786. // 右滑
  787. if ((endX - startX) > 30) {
  788. $(this).vegas('previous');
  789. }
  790. window.sliding = false;
  791. }
  792. });
  793. $("body").delegate('[type=vegas][vegas] .vegas-prev', "click", function() {
  794. $(this).parents('[type=vegas]').vegas('previous');
  795. });
  796. $("body").delegate('[type=vegas][vegas] .vegas-next', "click", function() {
  797. $(this).parents('[type=vegas]').vegas('next');
  798. });
  799. $("body").delegate('[type=vegas][vegas] .vegas-dots .vegas-dot', "click", function() {
  800. $(this).parents('[type=vegas]').vegas('jump', $(this).index());
  801. });
  802. }