/*!----------------------------------------------------------------------------- * Vegas - Fullscreen Backgrounds and Slideshows. * v2.5.4 - built 2021-01-30 * Licensed under the MIT License. * http://vegas.jaysalvat.com/ * ---------------------------------------------------------------------------- * Copyright (C) 2010-2021 Jay Salvat * http://jaysalvat.com/ * --------------------------------------------------------------------------*/ /* 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 // } // ... ] }; 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]; } 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(); 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 = $('