mirror of https://github.com/ColorlibHQ/AdminLTE
added ekko-lightbox plugin
- updated package.json - updated build/npm/Plugins.js - updated pages/gallery.htmlpull/2220/head
REJack
parent
56682c498f
commit
51579d5324
|
|
@ -374,6 +374,11 @@ const Plugins = [
|
|||
from: 'node_modules/filterizr/dist',
|
||||
to: 'plugins/filterizr/'
|
||||
},
|
||||
// ekko-lightbox
|
||||
{
|
||||
from: 'node_modules/ekko-lightbox/dist',
|
||||
to: 'plugins/ekko-lightbox/'
|
||||
},
|
||||
|
||||
// AdminLTE Dist
|
||||
{
|
||||
|
|
|
|||
|
|
@ -5778,6 +5778,11 @@
|
|||
"integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=",
|
||||
"dev": true
|
||||
},
|
||||
"ekko-lightbox": {
|
||||
"version": "5.3.0",
|
||||
"resolved": "https://registry.npmjs.org/ekko-lightbox/-/ekko-lightbox-5.3.0.tgz",
|
||||
"integrity": "sha512-mbacwySuVD3Ad6F2hTkjSTvJt59bcVv2l/TmBerp4xZnLak8tPtA4AScUn4DL42c1ksTiAO6sGhJZ52P/1Qgew=="
|
||||
},
|
||||
"electron-to-chromium": {
|
||||
"version": "1.3.243",
|
||||
"resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.243.tgz",
|
||||
|
|
|
|||
|
|
@ -72,6 +72,7 @@
|
|||
"datatables.net-scroller-bs4": "^2.0.0",
|
||||
"datatables.net-select-bs4": "^1.3.0",
|
||||
"daterangepicker": "^3.0.5",
|
||||
"ekko-lightbox": "^5.3.0",
|
||||
"fastclick": "^1.0.6",
|
||||
"filterizr": "^2.2.3",
|
||||
"flag-icon-css": "^3.3.0",
|
||||
|
|
|
|||
|
|
@ -8,6 +8,8 @@
|
|||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<!-- Font Awesome -->
|
||||
<link rel="stylesheet" href="../plugins/fontawesome-free/css/all.min.css">
|
||||
<!-- Ekko Lightbox -->
|
||||
<link rel="stylesheet" href="../plugins/ekko-lightbox/ekko-lightbox.css">
|
||||
<!-- Ionicons -->
|
||||
<link rel="stylesheet" href="https://code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css">
|
||||
<!-- Theme style -->
|
||||
|
|
@ -626,10 +628,12 @@
|
|||
<!-- Main content -->
|
||||
<section class="content">
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-12">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
FilterizR Gallery
|
||||
FilterizR Gallery with Ekko Lightbox
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
|
|
@ -655,48 +659,147 @@
|
|||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div class="filter-container p-0">
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
<div class="filter-container p-0 row">
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="white sample">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=1" data-toggle="lightbox" data-title="sample 1 - white">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="black sample">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=2" data-toggle="lightbox" data-title="sample 2 - black">
|
||||
<img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="red sample">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3" data-toggle="lightbox" data-title="sample 3 - red">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="4" data-sort="red sample">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4" data-toggle="lightbox" data-title="sample 4 - red">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="5" data-sort="black sample">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=5" data-toggle="lightbox" data-title="sample 5 - black">
|
||||
<img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="6" data-sort="white sample">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=6" data-toggle="lightbox" data-title="sample 6 - white">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="7" data-sort="white sample">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=7" data-toggle="lightbox" data-title="sample 7 - white">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="8" data-sort="black sample">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=8" data-toggle="lightbox" data-title="sample 8 - black">
|
||||
<img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="3" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample" data-sort="red sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="9" data-sort="red sample">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9" data-toggle="lightbox" data-title="sample 9 - red">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="10" data-sort="white sample">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=10" data-toggle="lightbox" data-title="sample 10 - white">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="1" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample" data-sort="white sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="11" data-sort="white sample">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=11" data-toggle="lightbox" data-title="sample 11 - white">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="filtr-item col-sm-2" data-category="2" data-sort="value">
|
||||
<img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample" data-sort="black sample" />
|
||||
<div class="filtr-item col-sm-2" data-category="12" data-sort="black sample">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=12" data-toggle="lightbox" data-title="sample 12 - black">
|
||||
<img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-12">
|
||||
<div class="card card-primary">
|
||||
<div class="card-header">
|
||||
<div class="card-title">
|
||||
Ekko Lightbox
|
||||
</div>
|
||||
</div>
|
||||
<div class="card-body">
|
||||
<div class="row">
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=1" data-toggle="lightbox" data-title="sample 1 - white" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=1" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=2" data-toggle="lightbox" data-title="sample 2 - black" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/000000?text=2" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=3" data-toggle="lightbox" data-title="sample 3 - red" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=3" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=4" data-toggle="lightbox" data-title="sample 4 - red" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=4" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=5" data-toggle="lightbox" data-title="sample 5 - black" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/000000?text=5" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=6" data-toggle="lightbox" data-title="sample 6 - white" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=6" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=7" data-toggle="lightbox" data-title="sample 7 - white" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=7" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=8" data-toggle="lightbox" data-title="sample 8 - black" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/000000?text=8" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FF0000/FFFFFF.png?text=9" data-toggle="lightbox" data-title="sample 9 - red" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FF0000/FFFFFF?text=9" class="img-fluid mb-2" alt="red sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=10" data-toggle="lightbox" data-title="sample 10 - white" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=10" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/FFFFFF.png?text=11" data-toggle="lightbox" data-title="sample 11 - white" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/FFFFFF?text=11" class="img-fluid mb-2" alt="white sample"/>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-sm-2">
|
||||
<a href="https://via.placeholder.com/1200/000000.png?text=12" data-toggle="lightbox" data-title="sample 12 - black" data-gallery="gallery">
|
||||
<img src="https://via.placeholder.com/300/000000?text=12" class="img-fluid mb-2" alt="black sample"/>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div><!-- /.container-fluid -->
|
||||
</section>
|
||||
<!-- /.content -->
|
||||
|
|
@ -725,6 +828,8 @@
|
|||
<script src="../plugins/bootstrap/js/bootstrap.bundle.min.js"></script>
|
||||
<!-- jQuery UI -->
|
||||
<script src="../plugins/jquery-ui/jquery-ui.min.js"></script>
|
||||
<!-- Ekko Lightbox -->
|
||||
<script src="../plugins/ekko-lightbox/ekko-lightbox.min.js"></script>
|
||||
<!-- AdminLTE App -->
|
||||
<script src="../dist/js/adminlte.min.js"></script>
|
||||
<!-- AdminLTE for demo purposes -->
|
||||
|
|
@ -734,6 +839,13 @@
|
|||
<!-- Page specific script -->
|
||||
<script>
|
||||
$(function () {
|
||||
$(document).on('click', '[data-toggle="lightbox"]', function(event) {
|
||||
event.preventDefault();
|
||||
$(this).ekkoLightbox({
|
||||
alwaysShowClose: true
|
||||
});
|
||||
});
|
||||
|
||||
$('.filter-container').filterizr({gutterPixels: 3});
|
||||
$('.btn[data-filter]').on('click', function() {
|
||||
$('.btn[data-filter]').removeClass('active');
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,668 @@
|
|||
/*!
|
||||
* Lightbox for Bootstrap by @ashleydw
|
||||
* https://github.com/ashleydw/lightbox
|
||||
*
|
||||
* License: https://github.com/ashleydw/lightbox/blob/master/LICENSE
|
||||
*/
|
||||
+function ($) {
|
||||
|
||||
'use strict';
|
||||
|
||||
var _createClass = (function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ('value' in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; })();
|
||||
|
||||
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError('Cannot call a class as a function'); } }
|
||||
|
||||
var Lightbox = (function ($) {
|
||||
|
||||
var NAME = 'ekkoLightbox';
|
||||
var JQUERY_NO_CONFLICT = $.fn[NAME];
|
||||
|
||||
var Default = {
|
||||
title: '',
|
||||
footer: '',
|
||||
maxWidth: 9999,
|
||||
maxHeight: 9999,
|
||||
showArrows: true, //display the left / right arrows or not
|
||||
wrapping: true, //if true, gallery loops infinitely
|
||||
type: null, //force the lightbox into image / youtube mode. if null, or not image|youtube|vimeo; detect it
|
||||
alwaysShowClose: false, //always show the close button, even if there is no title
|
||||
loadingMessage: '<div class="ekko-lightbox-loader"><div><div></div><div></div></div></div>', // http://tobiasahlin.com/spinkit/
|
||||
leftArrow: '<span>❮</span>',
|
||||
rightArrow: '<span>❯</span>',
|
||||
strings: {
|
||||
close: 'Close',
|
||||
fail: 'Failed to load image:',
|
||||
type: 'Could not detect remote target type. Force the type using data-type'
|
||||
},
|
||||
doc: document, // if in an iframe can specify top.document
|
||||
onShow: function onShow() {},
|
||||
onShown: function onShown() {},
|
||||
onHide: function onHide() {},
|
||||
onHidden: function onHidden() {},
|
||||
onNavigate: function onNavigate() {},
|
||||
onContentLoaded: function onContentLoaded() {}
|
||||
};
|
||||
|
||||
var Lightbox = (function () {
|
||||
_createClass(Lightbox, null, [{
|
||||
key: 'Default',
|
||||
|
||||
/**
|
||||
Class properties:
|
||||
_$element: null -> the <a> element currently being displayed
|
||||
_$modal: The bootstrap modal generated
|
||||
_$modalDialog: The .modal-dialog
|
||||
_$modalContent: The .modal-content
|
||||
_$modalBody: The .modal-body
|
||||
_$modalHeader: The .modal-header
|
||||
_$modalFooter: The .modal-footer
|
||||
_$lightboxContainerOne: Container of the first lightbox element
|
||||
_$lightboxContainerTwo: Container of the second lightbox element
|
||||
_$lightboxBody: First element in the container
|
||||
_$modalArrows: The overlayed arrows container
|
||||
_$galleryItems: Other <a>'s available for this gallery
|
||||
_galleryName: Name of the current data('gallery') showing
|
||||
_galleryIndex: The current index of the _$galleryItems being shown
|
||||
_config: {} the options for the modal
|
||||
_modalId: unique id for the current lightbox
|
||||
_padding / _border: CSS properties for the modal container; these are used to calculate the available space for the content
|
||||
*/
|
||||
|
||||
get: function get() {
|
||||
return Default;
|
||||
}
|
||||
}]);
|
||||
|
||||
function Lightbox($element, config) {
|
||||
var _this = this;
|
||||
|
||||
_classCallCheck(this, Lightbox);
|
||||
|
||||
this._config = $.extend({}, Default, config);
|
||||
this._$modalArrows = null;
|
||||
this._galleryIndex = 0;
|
||||
this._galleryName = null;
|
||||
this._padding = null;
|
||||
this._border = null;
|
||||
this._titleIsShown = false;
|
||||
this._footerIsShown = false;
|
||||
this._wantedWidth = 0;
|
||||
this._wantedHeight = 0;
|
||||
this._touchstartX = 0;
|
||||
this._touchendX = 0;
|
||||
|
||||
this._modalId = 'ekkoLightbox-' + Math.floor(Math.random() * 1000 + 1);
|
||||
this._$element = $element instanceof jQuery ? $element : $($element);
|
||||
|
||||
this._isBootstrap3 = $.fn.modal.Constructor.VERSION[0] == 3;
|
||||
|
||||
var h4 = '<h4 class="modal-title">' + (this._config.title || " ") + '</h4>';
|
||||
var btn = '<button type="button" class="close" data-dismiss="modal" aria-label="' + this._config.strings.close + '"><span aria-hidden="true">×</span></button>';
|
||||
|
||||
var header = '<div class="modal-header' + (this._config.title || this._config.alwaysShowClose ? '' : ' hide') + '">' + (this._isBootstrap3 ? btn + h4 : h4 + btn) + '</div>';
|
||||
var footer = '<div class="modal-footer' + (this._config.footer ? '' : ' hide') + '">' + (this._config.footer || " ") + '</div>';
|
||||
var body = '<div class="modal-body"><div class="ekko-lightbox-container"><div class="ekko-lightbox-item fade in show"></div><div class="ekko-lightbox-item fade"></div></div></div>';
|
||||
var dialog = '<div class="modal-dialog" role="document"><div class="modal-content">' + header + body + footer + '</div></div>';
|
||||
$(this._config.doc.body).append('<div id="' + this._modalId + '" class="ekko-lightbox modal fade" tabindex="-1" tabindex="-1" role="dialog" aria-hidden="true">' + dialog + '</div>');
|
||||
|
||||
this._$modal = $('#' + this._modalId, this._config.doc);
|
||||
this._$modalDialog = this._$modal.find('.modal-dialog').first();
|
||||
this._$modalContent = this._$modal.find('.modal-content').first();
|
||||
this._$modalBody = this._$modal.find('.modal-body').first();
|
||||
this._$modalHeader = this._$modal.find('.modal-header').first();
|
||||
this._$modalFooter = this._$modal.find('.modal-footer').first();
|
||||
|
||||
this._$lightboxContainer = this._$modalBody.find('.ekko-lightbox-container').first();
|
||||
this._$lightboxBodyOne = this._$lightboxContainer.find('> div:first-child').first();
|
||||
this._$lightboxBodyTwo = this._$lightboxContainer.find('> div:last-child').first();
|
||||
|
||||
this._border = this._calculateBorders();
|
||||
this._padding = this._calculatePadding();
|
||||
|
||||
this._galleryName = this._$element.data('gallery');
|
||||
if (this._galleryName) {
|
||||
this._$galleryItems = $(document.body).find('*[data-gallery="' + this._galleryName + '"]');
|
||||
this._galleryIndex = this._$galleryItems.index(this._$element);
|
||||
$(document).on('keydown.ekkoLightbox', this._navigationalBinder.bind(this));
|
||||
|
||||
// add the directional arrows to the modal
|
||||
if (this._config.showArrows && this._$galleryItems.length > 1) {
|
||||
this._$lightboxContainer.append('<div class="ekko-lightbox-nav-overlay"><a href="#">' + this._config.leftArrow + '</a><a href="#">' + this._config.rightArrow + '</a></div>');
|
||||
this._$modalArrows = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay').first();
|
||||
this._$lightboxContainer.on('click', 'a:first-child', function (event) {
|
||||
event.preventDefault();
|
||||
return _this.navigateLeft();
|
||||
});
|
||||
this._$lightboxContainer.on('click', 'a:last-child', function (event) {
|
||||
event.preventDefault();
|
||||
return _this.navigateRight();
|
||||
});
|
||||
this.updateNavigation();
|
||||
}
|
||||
}
|
||||
|
||||
this._$modal.on('show.bs.modal', this._config.onShow.bind(this)).on('shown.bs.modal', function () {
|
||||
_this._toggleLoading(true);
|
||||
_this._handle();
|
||||
return _this._config.onShown.call(_this);
|
||||
}).on('hide.bs.modal', this._config.onHide.bind(this)).on('hidden.bs.modal', function () {
|
||||
if (_this._galleryName) {
|
||||
$(document).off('keydown.ekkoLightbox');
|
||||
$(window).off('resize.ekkoLightbox');
|
||||
}
|
||||
_this._$modal.remove();
|
||||
return _this._config.onHidden.call(_this);
|
||||
}).modal(this._config);
|
||||
|
||||
$(window).on('resize.ekkoLightbox', function () {
|
||||
_this._resize(_this._wantedWidth, _this._wantedHeight);
|
||||
});
|
||||
this._$lightboxContainer.on('touchstart', function () {
|
||||
_this._touchstartX = event.changedTouches[0].screenX;
|
||||
}).on('touchend', function () {
|
||||
_this._touchendX = event.changedTouches[0].screenX;
|
||||
_this._swipeGesure();
|
||||
});
|
||||
}
|
||||
|
||||
_createClass(Lightbox, [{
|
||||
key: 'element',
|
||||
value: function element() {
|
||||
return this._$element;
|
||||
}
|
||||
}, {
|
||||
key: 'modal',
|
||||
value: function modal() {
|
||||
return this._$modal;
|
||||
}
|
||||
}, {
|
||||
key: 'navigateTo',
|
||||
value: function navigateTo(index) {
|
||||
|
||||
if (index < 0 || index > this._$galleryItems.length - 1) return this;
|
||||
|
||||
this._galleryIndex = index;
|
||||
|
||||
this.updateNavigation();
|
||||
|
||||
this._$element = $(this._$galleryItems.get(this._galleryIndex));
|
||||
this._handle();
|
||||
}
|
||||
}, {
|
||||
key: 'navigateLeft',
|
||||
value: function navigateLeft() {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
if (this._$galleryItems.length === 1) return;
|
||||
|
||||
if (this._galleryIndex === 0) {
|
||||
if (this._config.wrapping) this._galleryIndex = this._$galleryItems.length - 1;else return;
|
||||
} else //circular
|
||||
this._galleryIndex--;
|
||||
|
||||
this._config.onNavigate.call(this, 'left', this._galleryIndex);
|
||||
return this.navigateTo(this._galleryIndex);
|
||||
}
|
||||
}, {
|
||||
key: 'navigateRight',
|
||||
value: function navigateRight() {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
if (this._$galleryItems.length === 1) return;
|
||||
|
||||
if (this._galleryIndex === this._$galleryItems.length - 1) {
|
||||
if (this._config.wrapping) this._galleryIndex = 0;else return;
|
||||
} else //circular
|
||||
this._galleryIndex++;
|
||||
|
||||
this._config.onNavigate.call(this, 'right', this._galleryIndex);
|
||||
return this.navigateTo(this._galleryIndex);
|
||||
}
|
||||
}, {
|
||||
key: 'updateNavigation',
|
||||
value: function updateNavigation() {
|
||||
if (!this._config.wrapping) {
|
||||
var $nav = this._$lightboxContainer.find('div.ekko-lightbox-nav-overlay');
|
||||
if (this._galleryIndex === 0) $nav.find('a:first-child').addClass('disabled');else $nav.find('a:first-child').removeClass('disabled');
|
||||
|
||||
if (this._galleryIndex === this._$galleryItems.length - 1) $nav.find('a:last-child').addClass('disabled');else $nav.find('a:last-child').removeClass('disabled');
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: 'close',
|
||||
value: function close() {
|
||||
return this._$modal.modal('hide');
|
||||
}
|
||||
|
||||
// helper private methods
|
||||
}, {
|
||||
key: '_navigationalBinder',
|
||||
value: function _navigationalBinder(event) {
|
||||
event = event || window.event;
|
||||
if (event.keyCode === 39) return this.navigateRight();
|
||||
if (event.keyCode === 37) return this.navigateLeft();
|
||||
}
|
||||
|
||||
// type detection private methods
|
||||
}, {
|
||||
key: '_detectRemoteType',
|
||||
value: function _detectRemoteType(src, type) {
|
||||
|
||||
type = type || false;
|
||||
|
||||
if (!type && this._isImage(src)) type = 'image';
|
||||
if (!type && this._getYoutubeId(src)) type = 'youtube';
|
||||
if (!type && this._getVimeoId(src)) type = 'vimeo';
|
||||
if (!type && this._getInstagramId(src)) type = 'instagram';
|
||||
|
||||
if (!type || ['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(type) < 0) type = 'url';
|
||||
|
||||
return type;
|
||||
}
|
||||
}, {
|
||||
key: '_isImage',
|
||||
value: function _isImage(string) {
|
||||
return string && string.match(/(^data:image\/.*,)|(\.(jp(e|g|eg)|gif|png|bmp|webp|svg)((\?|#).*)?$)/i);
|
||||
}
|
||||
}, {
|
||||
key: '_containerToUse',
|
||||
value: function _containerToUse() {
|
||||
var _this2 = this;
|
||||
|
||||
// if currently showing an image, fade it out and remove
|
||||
var $toUse = this._$lightboxBodyTwo;
|
||||
var $current = this._$lightboxBodyOne;
|
||||
|
||||
if (this._$lightboxBodyTwo.hasClass('in')) {
|
||||
$toUse = this._$lightboxBodyOne;
|
||||
$current = this._$lightboxBodyTwo;
|
||||
}
|
||||
|
||||
$current.removeClass('in show');
|
||||
setTimeout(function () {
|
||||
if (!_this2._$lightboxBodyTwo.hasClass('in')) _this2._$lightboxBodyTwo.empty();
|
||||
if (!_this2._$lightboxBodyOne.hasClass('in')) _this2._$lightboxBodyOne.empty();
|
||||
}, 500);
|
||||
|
||||
$toUse.addClass('in show');
|
||||
return $toUse;
|
||||
}
|
||||
}, {
|
||||
key: '_handle',
|
||||
value: function _handle() {
|
||||
|
||||
var $toUse = this._containerToUse();
|
||||
this._updateTitleAndFooter();
|
||||
|
||||
var currentRemote = this._$element.attr('data-remote') || this._$element.attr('href');
|
||||
var currentType = this._detectRemoteType(currentRemote, this._$element.attr('data-type') || false);
|
||||
|
||||
if (['image', 'youtube', 'vimeo', 'instagram', 'video', 'url'].indexOf(currentType) < 0) return this._error(this._config.strings.type);
|
||||
|
||||
switch (currentType) {
|
||||
case 'image':
|
||||
this._preloadImage(currentRemote, $toUse);
|
||||
this._preloadImageByIndex(this._galleryIndex, 3);
|
||||
break;
|
||||
case 'youtube':
|
||||
this._showYoutubeVideo(currentRemote, $toUse);
|
||||
break;
|
||||
case 'vimeo':
|
||||
this._showVimeoVideo(this._getVimeoId(currentRemote), $toUse);
|
||||
break;
|
||||
case 'instagram':
|
||||
this._showInstagramVideo(this._getInstagramId(currentRemote), $toUse);
|
||||
break;
|
||||
case 'video':
|
||||
this._showHtml5Video(currentRemote, $toUse);
|
||||
break;
|
||||
default:
|
||||
// url
|
||||
this._loadRemoteContent(currentRemote, $toUse);
|
||||
break;
|
||||
}
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_getYoutubeId',
|
||||
value: function _getYoutubeId(string) {
|
||||
if (!string) return false;
|
||||
var matches = string.match(/^.*(youtu.be\/|v\/|u\/\w\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/);
|
||||
return matches && matches[2].length === 11 ? matches[2] : false;
|
||||
}
|
||||
}, {
|
||||
key: '_getVimeoId',
|
||||
value: function _getVimeoId(string) {
|
||||
return string && string.indexOf('vimeo') > 0 ? string : false;
|
||||
}
|
||||
}, {
|
||||
key: '_getInstagramId',
|
||||
value: function _getInstagramId(string) {
|
||||
return string && string.indexOf('instagram') > 0 ? string : false;
|
||||
}
|
||||
|
||||
// layout private methods
|
||||
}, {
|
||||
key: '_toggleLoading',
|
||||
value: function _toggleLoading(show) {
|
||||
show = show || false;
|
||||
if (show) {
|
||||
this._$modalDialog.css('display', 'none');
|
||||
this._$modal.removeClass('in show');
|
||||
$('.modal-backdrop').append(this._config.loadingMessage);
|
||||
} else {
|
||||
this._$modalDialog.css('display', 'block');
|
||||
this._$modal.addClass('in show');
|
||||
$('.modal-backdrop').find('.ekko-lightbox-loader').remove();
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_calculateBorders',
|
||||
value: function _calculateBorders() {
|
||||
return {
|
||||
top: this._totalCssByAttribute('border-top-width'),
|
||||
right: this._totalCssByAttribute('border-right-width'),
|
||||
bottom: this._totalCssByAttribute('border-bottom-width'),
|
||||
left: this._totalCssByAttribute('border-left-width')
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: '_calculatePadding',
|
||||
value: function _calculatePadding() {
|
||||
return {
|
||||
top: this._totalCssByAttribute('padding-top'),
|
||||
right: this._totalCssByAttribute('padding-right'),
|
||||
bottom: this._totalCssByAttribute('padding-bottom'),
|
||||
left: this._totalCssByAttribute('padding-left')
|
||||
};
|
||||
}
|
||||
}, {
|
||||
key: '_totalCssByAttribute',
|
||||
value: function _totalCssByAttribute(attribute) {
|
||||
return parseInt(this._$modalDialog.css(attribute), 10) + parseInt(this._$modalContent.css(attribute), 10) + parseInt(this._$modalBody.css(attribute), 10);
|
||||
}
|
||||
}, {
|
||||
key: '_updateTitleAndFooter',
|
||||
value: function _updateTitleAndFooter() {
|
||||
var title = this._$element.data('title') || "";
|
||||
var caption = this._$element.data('footer') || "";
|
||||
|
||||
this._titleIsShown = false;
|
||||
if (title || this._config.alwaysShowClose) {
|
||||
this._titleIsShown = true;
|
||||
this._$modalHeader.css('display', '').find('.modal-title').html(title || " ");
|
||||
} else this._$modalHeader.css('display', 'none');
|
||||
|
||||
this._footerIsShown = false;
|
||||
if (caption) {
|
||||
this._footerIsShown = true;
|
||||
this._$modalFooter.css('display', '').html(caption);
|
||||
} else this._$modalFooter.css('display', 'none');
|
||||
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showYoutubeVideo',
|
||||
value: function _showYoutubeVideo(remote, $containerForElement) {
|
||||
var id = this._getYoutubeId(remote);
|
||||
var query = remote.indexOf('&') > 0 ? remote.substr(remote.indexOf('&')) : '';
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
return this._showVideoIframe('//www.youtube.com/embed/' + id + '?badge=0&autoplay=1&html5=1' + query, width, height, $containerForElement);
|
||||
}
|
||||
}, {
|
||||
key: '_showVimeoVideo',
|
||||
value: function _showVimeoVideo(id, $containerForElement) {
|
||||
var width = this._$element.data('width') || 500;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
return this._showVideoIframe(id + '?autoplay=1', width, height, $containerForElement);
|
||||
}
|
||||
}, {
|
||||
key: '_showInstagramVideo',
|
||||
value: function _showInstagramVideo(id, $containerForElement) {
|
||||
// instagram load their content into iframe's so this can be put straight into the element
|
||||
var width = this._$element.data('width') || 612;
|
||||
var height = width + 80;
|
||||
id = id.substr(-1) !== '/' ? id + '/' : id; // ensure id has trailing slash
|
||||
$containerForElement.html('<iframe width="' + width + '" height="' + height + '" src="' + id + 'embed/" frameborder="0" allowfullscreen></iframe>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) //hide the arrows when showing video
|
||||
this._$modalArrows.css('display', 'none');
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showVideoIframe',
|
||||
value: function _showVideoIframe(url, width, height, $containerForElement) {
|
||||
// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
|
||||
height = height || width; // default to square
|
||||
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><iframe width="' + width + '" height="' + height + '" src="' + url + '" frameborder="0" allowfullscreen class="embed-responsive-item"></iframe></div>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_showHtml5Video',
|
||||
value: function _showHtml5Video(url, $containerForElement) {
|
||||
// should be used for videos only. for remote content use loadRemoteContent (data-type=url)
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || width / (560 / 315);
|
||||
$containerForElement.html('<div class="embed-responsive embed-responsive-16by9"><video width="' + width + '" height="' + height + '" src="' + url + '" preload="auto" autoplay controls class="embed-responsive-item"></video></div>');
|
||||
this._resize(width, height);
|
||||
this._config.onContentLoaded.call(this);
|
||||
if (this._$modalArrows) this._$modalArrows.css('display', 'none'); //hide the arrows when showing video
|
||||
this._toggleLoading(false);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_loadRemoteContent',
|
||||
value: function _loadRemoteContent(url, $containerForElement) {
|
||||
var _this3 = this;
|
||||
|
||||
var width = this._$element.data('width') || 560;
|
||||
var height = this._$element.data('height') || 560;
|
||||
|
||||
var disableExternalCheck = this._$element.data('disableExternalCheck') || false;
|
||||
this._toggleLoading(false);
|
||||
|
||||
// external urls are loading into an iframe
|
||||
// local ajax can be loaded into the container itself
|
||||
if (!disableExternalCheck && !this._isExternal(url)) {
|
||||
$containerForElement.load(url, $.proxy(function () {
|
||||
return _this3._$element.trigger('loaded.bs.modal');l;
|
||||
}));
|
||||
} else {
|
||||
$containerForElement.html('<iframe src="' + url + '" frameborder="0" allowfullscreen></iframe>');
|
||||
this._config.onContentLoaded.call(this);
|
||||
}
|
||||
|
||||
if (this._$modalArrows) //hide the arrows when remote content
|
||||
this._$modalArrows.css('display', 'none');
|
||||
|
||||
this._resize(width, height);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_isExternal',
|
||||
value: function _isExternal(url) {
|
||||
var match = url.match(/^([^:\/?#]+:)?(?:\/\/([^\/?#]*))?([^?#]+)?(\?[^#]*)?(#.*)?/);
|
||||
if (typeof match[1] === "string" && match[1].length > 0 && match[1].toLowerCase() !== location.protocol) return true;
|
||||
|
||||
if (typeof match[2] === "string" && match[2].length > 0 && match[2].replace(new RegExp(':(' + ({
|
||||
"http:": 80,
|
||||
"https:": 443
|
||||
})[location.protocol] + ')?$'), "") !== location.host) return true;
|
||||
|
||||
return false;
|
||||
}
|
||||
}, {
|
||||
key: '_error',
|
||||
value: function _error(message) {
|
||||
console.error(message);
|
||||
this._containerToUse().html(message);
|
||||
this._resize(300, 300);
|
||||
return this;
|
||||
}
|
||||
}, {
|
||||
key: '_preloadImageByIndex',
|
||||
value: function _preloadImageByIndex(startIndex, numberOfTimes) {
|
||||
|
||||
if (!this._$galleryItems) return;
|
||||
|
||||
var next = $(this._$galleryItems.get(startIndex), false);
|
||||
if (typeof next == 'undefined') return;
|
||||
|
||||
var src = next.attr('data-remote') || next.attr('href');
|
||||
if (next.attr('data-type') === 'image' || this._isImage(src)) this._preloadImage(src, false);
|
||||
|
||||
if (numberOfTimes > 0) return this._preloadImageByIndex(startIndex + 1, numberOfTimes - 1);
|
||||
}
|
||||
}, {
|
||||
key: '_preloadImage',
|
||||
value: function _preloadImage(src, $containerForImage) {
|
||||
var _this4 = this;
|
||||
|
||||
$containerForImage = $containerForImage || false;
|
||||
|
||||
var img = new Image();
|
||||
if ($containerForImage) {
|
||||
(function () {
|
||||
|
||||
// if loading takes > 200ms show a loader
|
||||
var loadingTimeout = setTimeout(function () {
|
||||
$containerForImage.append(_this4._config.loadingMessage);
|
||||
}, 200);
|
||||
|
||||
img.onload = function () {
|
||||
if (loadingTimeout) clearTimeout(loadingTimeout);
|
||||
loadingTimeout = null;
|
||||
var image = $('<img />');
|
||||
image.attr('src', img.src);
|
||||
image.addClass('img-fluid');
|
||||
|
||||
// backward compatibility for bootstrap v3
|
||||
image.css('width', '100%');
|
||||
|
||||
$containerForImage.html(image);
|
||||
if (_this4._$modalArrows) _this4._$modalArrows.css('display', ''); // remove display to default to css property
|
||||
|
||||
_this4._resize(img.width, img.height);
|
||||
_this4._toggleLoading(false);
|
||||
return _this4._config.onContentLoaded.call(_this4);
|
||||
};
|
||||
img.onerror = function () {
|
||||
_this4._toggleLoading(false);
|
||||
return _this4._error(_this4._config.strings.fail + (' ' + src));
|
||||
};
|
||||
})();
|
||||
}
|
||||
|
||||
img.src = src;
|
||||
return img;
|
||||
}
|
||||
}, {
|
||||
key: '_swipeGesure',
|
||||
value: function _swipeGesure() {
|
||||
if (this._touchendX < this._touchstartX) {
|
||||
return this.navigateRight();
|
||||
}
|
||||
if (this._touchendX > this._touchstartX) {
|
||||
return this.navigateLeft();
|
||||
}
|
||||
}
|
||||
}, {
|
||||
key: '_resize',
|
||||
value: function _resize(width, height) {
|
||||
|
||||
height = height || width;
|
||||
this._wantedWidth = width;
|
||||
this._wantedHeight = height;
|
||||
|
||||
var imageAspecRatio = width / height;
|
||||
|
||||
// if width > the available space, scale down the expected width and height
|
||||
var widthBorderAndPadding = this._padding.left + this._padding.right + this._border.left + this._border.right;
|
||||
|
||||
// force 10px margin if window size > 575px
|
||||
var addMargin = this._config.doc.body.clientWidth > 575 ? 20 : 0;
|
||||
var discountMargin = this._config.doc.body.clientWidth > 575 ? 0 : 20;
|
||||
|
||||
var maxWidth = Math.min(width + widthBorderAndPadding, this._config.doc.body.clientWidth - addMargin, this._config.maxWidth);
|
||||
|
||||
if (width + widthBorderAndPadding > maxWidth) {
|
||||
height = (maxWidth - widthBorderAndPadding - discountMargin) / imageAspecRatio;
|
||||
width = maxWidth;
|
||||
} else width = width + widthBorderAndPadding;
|
||||
|
||||
var headerHeight = 0,
|
||||
footerHeight = 0;
|
||||
|
||||
// as the resize is performed the modal is show, the calculate might fail
|
||||
// if so, default to the default sizes
|
||||
if (this._footerIsShown) footerHeight = this._$modalFooter.outerHeight(true) || 55;
|
||||
|
||||
if (this._titleIsShown) headerHeight = this._$modalHeader.outerHeight(true) || 67;
|
||||
|
||||
var borderPadding = this._padding.top + this._padding.bottom + this._border.bottom + this._border.top;
|
||||
|
||||
//calculated each time as resizing the window can cause them to change due to Bootstraps fluid margins
|
||||
var margins = parseFloat(this._$modalDialog.css('margin-top')) + parseFloat(this._$modalDialog.css('margin-bottom'));
|
||||
|
||||
var maxHeight = Math.min(height, $(window).height() - borderPadding - margins - headerHeight - footerHeight, this._config.maxHeight - borderPadding - headerHeight - footerHeight);
|
||||
|
||||
if (height > maxHeight) {
|
||||
// if height > the available height, scale down the width
|
||||
width = Math.ceil(maxHeight * imageAspecRatio) + widthBorderAndPadding;
|
||||
}
|
||||
|
||||
this._$lightboxContainer.css('height', maxHeight);
|
||||
this._$modalDialog.css('flex', 1).css('maxWidth', width);
|
||||
|
||||
var modal = this._$modal.data('bs.modal');
|
||||
if (modal) {
|
||||
// v4 method is mistakenly protected
|
||||
try {
|
||||
modal._handleUpdate();
|
||||
} catch (Exception) {
|
||||
modal.handleUpdate();
|
||||
}
|
||||
}
|
||||
return this;
|
||||
}
|
||||
}], [{
|
||||
key: '_jQueryInterface',
|
||||
value: function _jQueryInterface(config) {
|
||||
var _this5 = this;
|
||||
|
||||
config = config || {};
|
||||
return this.each(function () {
|
||||
var $this = $(_this5);
|
||||
var _config = $.extend({}, Lightbox.Default, $this.data(), typeof config === 'object' && config);
|
||||
|
||||
new Lightbox(_this5, _config);
|
||||
});
|
||||
}
|
||||
}]);
|
||||
|
||||
return Lightbox;
|
||||
})();
|
||||
|
||||
$.fn[NAME] = Lightbox._jQueryInterface;
|
||||
$.fn[NAME].Constructor = Lightbox;
|
||||
$.fn[NAME].noConflict = function () {
|
||||
$.fn[NAME] = JQUERY_NO_CONFLICT;
|
||||
return Lightbox._jQueryInterface;
|
||||
};
|
||||
|
||||
return Lightbox;
|
||||
})(jQuery);
|
||||
//# sourceMappingURL=ekko-lightbox.js.map
|
||||
|
||||
}(jQuery);
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
Loading…
Reference in New Issue