123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205 |
- /*! lg-autoplay - v1.0.2 - 2017-01-22
- * http://sachinchoolur.github.io/lightGallery
- * Copyright (c) 2017 Sachin N; Licensed GPLv3 */
- (function (root, factory) {
- if (typeof define === 'function' && define.amd) {
- // AMD. Register as an anonymous module unless amdModuleId is set
- define(['jquery'], function (a0) {
- return (factory(a0));
- });
- } else if (typeof exports === 'object') {
- // Node. Does not work with strict CommonJS, but
- // only CommonJS-like environments that support module.exports,
- // like Node.
- module.exports = factory(require('jquery'));
- } else {
- factory(jQuery);
- }
- }(this, function ($) {
- (function() {
- 'use strict';
- var defaults = {
- autoplay: false,
- pause: 5000,
- progressBar: true,
- fourceAutoplay: false,
- autoplayControls: true,
- appendAutoplayControlsTo: '.lg-toolbar'
- };
- /**
- * Creates the autoplay plugin.
- * @param {object} element - lightGallery element
- */
- var Autoplay = function(element) {
- this.core = $(element).data('lightGallery');
- this.$el = $(element);
- // Execute only if items are above 1
- if (this.core.$items.length < 2) {
- return false;
- }
- this.core.s = $.extend({}, defaults, this.core.s);
- this.interval = false;
- // Identify if slide happened from autoplay
- this.fromAuto = true;
- // Identify if autoplay canceled from touch/drag
- this.canceledOnTouch = false;
- // save fourceautoplay value
- this.fourceAutoplayTemp = this.core.s.fourceAutoplay;
- // do not allow progress bar if browser does not support css3 transitions
- if (!this.core.doCss()) {
- this.core.s.progressBar = false;
- }
- this.init();
- return this;
- };
- Autoplay.prototype.init = function() {
- var _this = this;
- // append autoplay controls
- if (_this.core.s.autoplayControls) {
- _this.controls();
- }
- // Create progress bar
- if (_this.core.s.progressBar) {
- _this.core.$outer.find('.lg').append('<div class="lg-progress-bar"><div class="lg-progress"></div></div>');
- }
- // set progress
- _this.progress();
- // Start autoplay
- if (_this.core.s.autoplay) {
- _this.startlAuto();
- }
- // cancel interval on touchstart and dragstart
- _this.$el.on('onDragstart.lg.tm touchstart.lg.tm', function() {
- if (_this.interval) {
- _this.cancelAuto();
- _this.canceledOnTouch = true;
- }
- });
- // restore autoplay if autoplay canceled from touchstart / dragstart
- _this.$el.on('onDragend.lg.tm touchend.lg.tm onSlideClick.lg.tm', function() {
- if (!_this.interval && _this.canceledOnTouch) {
- _this.startlAuto();
- _this.canceledOnTouch = false;
- }
- });
- };
- Autoplay.prototype.progress = function() {
- var _this = this;
- var _$progressBar;
- var _$progress;
- _this.$el.on('onBeforeSlide.lg.tm', function() {
- // start progress bar animation
- if (_this.core.s.progressBar && _this.fromAuto) {
- _$progressBar = _this.core.$outer.find('.lg-progress-bar');
- _$progress = _this.core.$outer.find('.lg-progress');
- if (_this.interval) {
- _$progress.removeAttr('style');
- _$progressBar.removeClass('lg-start');
- setTimeout(function() {
- _$progress.css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
- _$progressBar.addClass('lg-start');
- }, 20);
- }
- }
- // Remove setinterval if slide is triggered manually and fourceautoplay is false
- if (!_this.fromAuto && !_this.core.s.fourceAutoplay) {
- _this.cancelAuto();
- }
- _this.fromAuto = false;
- });
- };
- // Manage autoplay via play/stop buttons
- Autoplay.prototype.controls = function() {
- var _this = this;
- var _html = '<span class="lg-autoplay-button lg-icon"></span>';
- // Append autoplay controls
- $(this.core.s.appendAutoplayControlsTo).append(_html);
- _this.core.$outer.find('.lg-autoplay-button').on('click.lg', function() {
- if ($(_this.core.$outer).hasClass('lg-show-autoplay')) {
- _this.cancelAuto();
- _this.core.s.fourceAutoplay = false;
- } else {
- if (!_this.interval) {
- _this.startlAuto();
- _this.core.s.fourceAutoplay = _this.fourceAutoplayTemp;
- }
- }
- });
- };
- // Autostart gallery
- Autoplay.prototype.startlAuto = function() {
- var _this = this;
- _this.core.$outer.find('.lg-progress').css('transition', 'width ' + (_this.core.s.speed + _this.core.s.pause) + 'ms ease 0s');
- _this.core.$outer.addClass('lg-show-autoplay');
- _this.core.$outer.find('.lg-progress-bar').addClass('lg-start');
- _this.interval = setInterval(function() {
- if (_this.core.index + 1 < _this.core.$items.length) {
- _this.core.index++;
- } else {
- _this.core.index = 0;
- }
- _this.fromAuto = true;
- _this.core.slide(_this.core.index, false, false, 'next');
- }, _this.core.s.speed + _this.core.s.pause);
- };
- // cancel Autostart
- Autoplay.prototype.cancelAuto = function() {
- clearInterval(this.interval);
- this.interval = false;
- this.core.$outer.find('.lg-progress').removeAttr('style');
- this.core.$outer.removeClass('lg-show-autoplay');
- this.core.$outer.find('.lg-progress-bar').removeClass('lg-start');
- };
- Autoplay.prototype.destroy = function() {
- this.cancelAuto();
- this.core.$outer.find('.lg-progress-bar').remove();
- };
- $.fn.lightGallery.modules.autoplay = Autoplay;
- })();
- }));
|