mirror of
https://github.com/a2nt/meta-lightbox.git
synced 2024-10-22 17:05:53 +02:00
Minor bugfixtures
This commit is contained in:
Tony Air
parent
3b2a504225
commit
d19033d8dc
1054
meta-lightbox.js
1054
meta-lightbox.js
@ -7,579 +7,577 @@
|
|||||||
|
|
||||||
(function($, window, document) {
|
(function($, window, document) {
|
||||||
|
|
||||||
var pluginName = 'metaLightbox',
|
var pluginName = 'metaLightbox',
|
||||||
defaults = {
|
defaults = {
|
||||||
effect: 'fade',
|
effect: 'fade',
|
||||||
theme: 'default',
|
theme: 'default',
|
||||||
keyboardNav: true,
|
keyboardNav: true,
|
||||||
clickOverlayToClose: true,
|
clickOverlayToClose: true,
|
||||||
onInit: function() {},
|
onInit: function() {},
|
||||||
beforeShowLightbox: function() {},
|
beforeShowLightbox: function() {},
|
||||||
afterShowLightbox: function(lightbox) {},
|
afterShowLightbox: function(lightbox) {},
|
||||||
beforeHideLightbox: function() {},
|
beforeHideLightbox: function() {},
|
||||||
afterHideLightbox: function() {},
|
afterHideLightbox: function() {},
|
||||||
onPrev: function(element) {},
|
onPrev: function(element) {},
|
||||||
onNext: function(element) {},
|
onNext: function(element) {},
|
||||||
errorMessage: 'The requested content cannot be loaded. Please try again later.'
|
errorMessage: 'The requested content cannot be loaded. Please try again later.'
|
||||||
};
|
};
|
||||||
|
|
||||||
function MetaLightbox(element, options) {
|
function MetaLightbox(element, options) {
|
||||||
/*this.el = element;
|
/*this.el = element;
|
||||||
this.$el = $(this.el);*/
|
this.$el = $(this.el);*/
|
||||||
|
|
||||||
this.options = $.extend({}, defaults, options);
|
this.options = $.extend({}, defaults, options);
|
||||||
|
|
||||||
this._defaults = defaults;
|
this._defaults = defaults;
|
||||||
this._name = pluginName;
|
this._name = pluginName;
|
||||||
|
|
||||||
this.init();
|
this.init();
|
||||||
}
|
}
|
||||||
|
|
||||||
MetaLightbox.prototype = {
|
MetaLightbox.prototype = {
|
||||||
|
|
||||||
init: function() {
|
init: function() {
|
||||||
var $this = this,
|
var $this = this,
|
||||||
$html = $('html');
|
$html = $('html');
|
||||||
|
|
||||||
this.ajaxLoaded = false;
|
this.ajaxLoaded = false;
|
||||||
|
|
||||||
// make object globally accessible
|
// make object globally accessible
|
||||||
document.MetaLightbox = this;
|
document.MetaLightbox = this;
|
||||||
|
|
||||||
// Need this so we don't use CSS transitions in mobile
|
// Need this so we don't use CSS transitions in mobile
|
||||||
if (!$html.hasClass('meta-lightbox-notouch')) $html.addClass('meta-lightbox-notouch');
|
if (!$html.hasClass('meta-lightbox-notouch')) $html.addClass('meta-lightbox-notouch');
|
||||||
if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch');
|
if ('ontouchstart' in document) $html.removeClass('meta-lightbox-notouch');
|
||||||
|
|
||||||
// Setup the click
|
// Setup the click
|
||||||
$(document).on('click', '[data-toggle="lightbox"]', function(e) {
|
$(document).on('click', '[data-toggle="lightbox"]', function(e) {
|
||||||
e.preventDefault();
|
e.preventDefault();
|
||||||
e.stopPropagation();
|
e.stopPropagation();
|
||||||
|
|
||||||
$this.showLightbox(this);
|
$this.showLightbox(this);
|
||||||
return false;
|
return false;
|
||||||
|
});
|
||||||
|
|
||||||
|
// keyboardNav
|
||||||
|
if (this.options.keyboardNav) {
|
||||||
|
$('body').off('keyup').on('keyup', function(e) {
|
||||||
|
var code = (e.keyCode ? e.keyCode : e.which);
|
||||||
|
// Escape
|
||||||
|
if (code === 27) {
|
||||||
|
$this.destructLightbox();
|
||||||
|
}
|
||||||
|
// Left
|
||||||
|
if (code === 37) {
|
||||||
|
$('.meta-lightbox-prev').trigger('click');
|
||||||
|
}
|
||||||
|
// Right
|
||||||
|
if (code === 39) {
|
||||||
|
$('.meta-lightbox-next').trigger('click');
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
this.options.onInit.call(this);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
showLightbox: function(element) {
|
||||||
|
this.el = element;
|
||||||
|
this.$el = $(this.el);
|
||||||
|
|
||||||
|
var $this = this,
|
||||||
|
lightbox, content, currentLink, galleryItems;
|
||||||
|
|
||||||
|
this.options.beforeShowLightbox.call(this);
|
||||||
|
|
||||||
|
lightbox = this.constructLightbox();
|
||||||
|
if (!lightbox) return;
|
||||||
|
content = lightbox.find('.meta-lightbox-content');
|
||||||
|
if (!content) return;
|
||||||
|
currentLink = this.$el;
|
||||||
|
$('body').addClass('meta-lightbox-body-effect-' + this.options.effect);
|
||||||
|
|
||||||
|
// Add content
|
||||||
|
this.processContent(content, currentLink);
|
||||||
|
|
||||||
|
// Nav
|
||||||
|
if (this.$el.data('lightbox-gallery')) {
|
||||||
|
galleryItems = $('[data-lightbox-gallery="' + this.$el.data('lightbox-gallery') + '"]');
|
||||||
|
|
||||||
|
if (galleryItems.length === 1) {
|
||||||
|
$('.meta-lightbox-nav').hide();
|
||||||
|
} else {
|
||||||
|
$('.meta-lightbox-nav').show();
|
||||||
|
}
|
||||||
|
|
||||||
|
// Prev
|
||||||
|
$('.meta-lightbox-prev').off('click').on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var index = galleryItems.index(currentLink);
|
||||||
|
currentLink = galleryItems.eq(index - 1);
|
||||||
|
if (!$(currentLink).length) currentLink = galleryItems.last();
|
||||||
|
$this.processContent(content, currentLink);
|
||||||
|
$this.options.onPrev.call(this, [currentLink]);
|
||||||
|
});
|
||||||
|
|
||||||
|
// Next
|
||||||
|
$('.meta-lightbox-next').off('click').on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
var index = galleryItems.index(currentLink);
|
||||||
|
currentLink = galleryItems.eq(index + 1);
|
||||||
|
if (!$(currentLink).length) currentLink = galleryItems.first();
|
||||||
|
$this.processContent(content, currentLink);
|
||||||
|
$this.options.onNext.call(this, [currentLink]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
setTimeout(function() {
|
||||||
|
lightbox.addClass('meta-lightbox-open');
|
||||||
|
$this.options.afterShowLightbox.call(this, [lightbox]);
|
||||||
|
}, 1); // For CSS transitions
|
||||||
|
},
|
||||||
|
|
||||||
|
processContent: function(content, link) {
|
||||||
|
var $this = this,
|
||||||
|
href = link.attr('href'),
|
||||||
|
img, video, src, classTerm, iframe, wrap;
|
||||||
|
|
||||||
|
content.html('').addClass('meta-lightbox-loading');
|
||||||
|
|
||||||
|
// Is HiDPI?
|
||||||
|
if (this.isHidpi() && link.data('lightbox-hidpi')) {
|
||||||
|
href = link.data('lightbox-hidpi');
|
||||||
|
}
|
||||||
|
|
||||||
|
// Image
|
||||||
|
if (href.match(/\.(jpeg|jpg|gif|png)$/i) != null) {
|
||||||
|
/*if ($(window).width() < 768) {
|
||||||
|
window.open(href, '_blank');
|
||||||
|
}*/
|
||||||
|
img = $('<img>', {
|
||||||
|
src: href
|
||||||
|
});
|
||||||
|
img.on('load', function() {
|
||||||
|
var wrap = $('<div class="meta-lightbox-image"></div>'),
|
||||||
|
$content = $('.meta-lightbox-content'),
|
||||||
|
imgwrapper = $('<span class="meta-lightbox-zoom-wrapper"></span>');
|
||||||
|
|
||||||
|
imgwrapper.append(img);
|
||||||
|
wrap.append(imgwrapper);
|
||||||
|
|
||||||
|
// Vertically center images
|
||||||
|
wrap.css({
|
||||||
|
'line-height': $content.height() + 'px',
|
||||||
|
'height': $content.height() + 'px' // For Firefox
|
||||||
|
});
|
||||||
|
$(window).resize(function() {
|
||||||
|
wrap.css({
|
||||||
|
'line-height': $content.height() + 'px',
|
||||||
|
'height': $content.height() + 'px' // For Firefox
|
||||||
});
|
});
|
||||||
|
});
|
||||||
|
|
||||||
// keyboardNav
|
if (typeof imgwrapper['zoom'] !== 'undefined') {
|
||||||
if (this.options.keyboardNav) {
|
imgwrapper.zoom();
|
||||||
$('body').off('keyup').on('keyup', function(e) {
|
}
|
||||||
var code = (e.keyCode ? e.keyCode : e.which);
|
|
||||||
// Escape
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
if (code === 27) {
|
$this.contentLoaded();
|
||||||
$this.destructLightbox();
|
|
||||||
}
|
});
|
||||||
// Left
|
/*.each(function () {
|
||||||
if (code === 37) {
|
if (this.complete) $(this).load();
|
||||||
$('.meta-lightbox-prev').trigger('click');
|
});*/
|
||||||
}
|
|
||||||
// Right
|
img.on('error', function() {
|
||||||
if (code === 39) {
|
var wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
||||||
$('.meta-lightbox-next').trigger('click');
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
}
|
$this.contentLoaded();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
// Set the title
|
||||||
|
if (link.data('title')) {
|
||||||
|
$this.setTitle(link.data('title'));
|
||||||
|
} else if (link.attr('title')) {
|
||||||
|
$this.setTitle(link.attr('title'));
|
||||||
|
} else {
|
||||||
|
$('.meta-lightbox-title-wrap').html('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// google analytics
|
||||||
|
if (typeof ga === 'function') {
|
||||||
|
ga('send', 'event', 'meta', 'Image Click', href);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Video (Youtube/Vimeo)
|
||||||
|
else if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
|
||||||
|
src = '';
|
||||||
|
classTerm = 'meta-lightbox-video';
|
||||||
|
|
||||||
|
if (video[1] == 'youtube' || video[1] == 'youtu' || video[1] == 'youtube-nocookie') {
|
||||||
|
const YouTubeGetID = (url) => {
|
||||||
|
url = url.split(/(vi\/|v%3D|v=|\/v\/|youtu\.be\/|\/embed\/)/);
|
||||||
|
return undefined !== url[2] ? url[2].split(/[^0-9a-z_\-]/i)[0] : url[0];
|
||||||
|
};
|
||||||
|
|
||||||
|
src = '//www.youtube-nocookie.com/embed/' + YouTubeGetID(href);
|
||||||
|
classTerm = classTerm + 'meta-lightbox-youtube';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (video[1] == 'vimeo') {
|
||||||
|
src = '//player.vimeo.com/video/' + video[3];
|
||||||
|
classTerm = classTerm + 'meta-lightbox-vimeo';
|
||||||
|
}
|
||||||
|
|
||||||
|
if (src) {
|
||||||
|
iframe = $('<iframe>', {
|
||||||
|
src: src,
|
||||||
|
'class': classTerm,
|
||||||
|
frameborder: 0,
|
||||||
|
vspace: 0,
|
||||||
|
hspace: 0,
|
||||||
|
scrolling: 'auto'
|
||||||
|
});
|
||||||
|
content.html(iframe);
|
||||||
|
iframe.on('load', function() {
|
||||||
|
content.removeClass('meta-lightbox-loading');
|
||||||
|
$this.contentLoaded();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
// Set the title
|
||||||
|
if (link.data('title')) {
|
||||||
|
$this.setTitle(link.data('title'));
|
||||||
|
} else if (link.attr('title')) {
|
||||||
|
$this.setTitle(link.attr('title'));
|
||||||
|
} else {
|
||||||
|
$('.meta-lightbox-title-wrap').html('');
|
||||||
|
}
|
||||||
|
|
||||||
|
// google analytics
|
||||||
|
if (typeof ga === 'function') {
|
||||||
|
ga('send', 'event', 'meta', 'Video Click', video);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// Inline HTML
|
||||||
|
else if (href.substring(0, 1) == '#') {
|
||||||
|
if ($(href).length) {
|
||||||
|
wrap = $('<div class="meta-lightbox-inline" />');
|
||||||
|
wrap.append($(href).clone().show());
|
||||||
|
|
||||||
|
// Vertically center html
|
||||||
|
if (wrap.outerHeight() < content.height()) {
|
||||||
|
wrap.css({
|
||||||
|
'position': 'relative',
|
||||||
|
'top': '50%',
|
||||||
|
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
$(window).resize(function() {
|
||||||
|
if (wrap.outerHeight() < content.height()) {
|
||||||
|
wrap.css({
|
||||||
|
'position': 'relative',
|
||||||
|
'top': '50%',
|
||||||
|
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
||||||
|
});
|
||||||
}
|
}
|
||||||
|
});
|
||||||
|
|
||||||
this.options.onInit.call(this);
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
|
$this.contentLoaded();
|
||||||
|
} else {
|
||||||
|
wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
||||||
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
|
$this.contentLoaded();
|
||||||
|
}
|
||||||
|
|
||||||
},
|
$('.meta-lightbox-title-wrap').html('');
|
||||||
|
|
||||||
showLightbox: function(element) {
|
// google analytics
|
||||||
this.el = element;
|
if (typeof ga === 'function') {
|
||||||
this.$el = $(this.el);
|
ga('send', 'event', 'meta', 'inline HTML click', href);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// AJAX/iFrame (default)
|
||||||
|
else {
|
||||||
|
$.ajax({
|
||||||
|
sync: false,
|
||||||
|
async: true,
|
||||||
|
url: href,
|
||||||
|
dataType: 'html',
|
||||||
|
method: 'GET',
|
||||||
|
cache: false,
|
||||||
|
statusCode: {
|
||||||
|
404: function() {
|
||||||
|
console.log('page not found');
|
||||||
|
window.location.href = url;
|
||||||
|
},
|
||||||
|
302: function() {
|
||||||
|
console.log('redirect 302');
|
||||||
|
window.location.href = url;
|
||||||
|
}
|
||||||
|
},
|
||||||
|
error: function(jqXHR) {
|
||||||
|
console.log('AJAX request failure.' + jqXHR.statusText);
|
||||||
|
|
||||||
var $this = this,
|
var wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
||||||
lightbox, content, currentLink, galleryItems;
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
|
$this.contentLoaded();
|
||||||
|
|
||||||
this.options.beforeShowLightbox.call(this);
|
// google analytics
|
||||||
|
if (typeof ga === 'function') {
|
||||||
lightbox = this.constructLightbox();
|
ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText);
|
||||||
if (!lightbox) return;
|
}
|
||||||
content = lightbox.find('.meta-lightbox-content');
|
},
|
||||||
if (!content) return;
|
success: function(data, status, jqXHR) {
|
||||||
currentLink = this.$el;
|
try {
|
||||||
$('body').addClass('meta-lightbox-body-effect-' + this.options.effect);
|
data = $.parseJSON(data);
|
||||||
|
if (typeof(data) === 'object') {
|
||||||
// Add content
|
// Replace regions
|
||||||
this.processContent(content, currentLink);
|
if (typeof(data['regions']) === 'object' && typeof data['regions']['LayoutAjax'] !== 'undefinded') {
|
||||||
|
var wrap = $('<div class="meta-lightbox-ajax" />');
|
||||||
// Nav
|
wrap.html(data['regions']['LayoutAjax']);
|
||||||
if (this.$el.data('lightbox-gallery')) {
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
galleryItems = $('[data-lightbox-gallery="' + this.$el.data('lightbox-gallery') + '"]');
|
|
||||||
|
|
||||||
if (galleryItems.length === 1) {
|
|
||||||
$('.meta-lightbox-nav').hide();
|
|
||||||
} else {
|
|
||||||
$('.meta-lightbox-nav').show();
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// Prev
|
// trigger events
|
||||||
$('.meta-lightbox-prev').off('click').on('click', function(e) {
|
/*if (typeof (data['events']) === 'object') {
|
||||||
e.preventDefault();
|
for (var eventName in data.events) {
|
||||||
var index = galleryItems.index(currentLink);
|
$(document).trigger(eventName, [data['events'][eventName]]);
|
||||||
currentLink = galleryItems.eq(index - 1);
|
}
|
||||||
if (!$(currentLink).length) currentLink = galleryItems.last();
|
|
||||||
$this.processContent(content, currentLink);
|
|
||||||
$this.options.onPrev.call(this, [currentLink]);
|
|
||||||
});
|
|
||||||
|
|
||||||
// Next
|
|
||||||
$('.meta-lightbox-next').off('click').on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
var index = galleryItems.index(currentLink);
|
|
||||||
currentLink = galleryItems.eq(index + 1);
|
|
||||||
if (!$(currentLink).length) currentLink = galleryItems.first();
|
|
||||||
$this.processContent(content, currentLink);
|
|
||||||
$this.options.onNext.call(this, [currentLink]);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
lightbox.addClass('meta-lightbox-open');
|
|
||||||
$this.options.afterShowLightbox.call(this, [lightbox]);
|
|
||||||
}, 1); // For CSS transitions
|
|
||||||
},
|
|
||||||
|
|
||||||
processContent: function(content, link) {
|
|
||||||
var $this = this,
|
|
||||||
href = link.attr('href'),
|
|
||||||
img, video, src, classTerm, iframe, wrap;
|
|
||||||
|
|
||||||
content.html('').addClass('meta-lightbox-loading');
|
|
||||||
|
|
||||||
// Is HiDPI?
|
|
||||||
if (this.isHidpi() && link.data('lightbox-hidpi')) {
|
|
||||||
href = link.data('lightbox-hidpi');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Image
|
|
||||||
if (href.match(/\.(jpeg|jpg|gif|png)$/i) != null) {
|
|
||||||
/*if ($(window).width() < 768) {
|
|
||||||
window.open(href, '_blank');
|
|
||||||
}*/
|
}*/
|
||||||
img = $('<img>', {
|
|
||||||
src: href
|
|
||||||
});
|
|
||||||
img.on('load', function() {
|
|
||||||
var wrap = $('<div class="meta-lightbox-image"></div>'),
|
|
||||||
$content = $('.meta-lightbox-content'),
|
|
||||||
imgwrapper = $('<span class="meta-lightbox-zoom-wrapper"></span>');
|
|
||||||
|
|
||||||
imgwrapper.append(img);
|
|
||||||
wrap.append(imgwrapper);
|
|
||||||
|
|
||||||
// Vertically center images
|
|
||||||
wrap.css({
|
|
||||||
'line-height': $content.height() + 'px',
|
|
||||||
'height': $content.height() + 'px' // For Firefox
|
|
||||||
});
|
|
||||||
$(window).resize(function() {
|
|
||||||
wrap.css({
|
|
||||||
'line-height': $content.height() + 'px',
|
|
||||||
'height': $content.height() + 'px' // For Firefox
|
|
||||||
});
|
|
||||||
});
|
|
||||||
|
|
||||||
if (typeof imgwrapper['zoom'] !== 'undefined') {
|
|
||||||
imgwrapper.zoom();
|
|
||||||
}
|
|
||||||
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
|
|
||||||
});
|
|
||||||
/*.each(function () {
|
|
||||||
if (this.complete) $(this).load();
|
|
||||||
});*/
|
|
||||||
|
|
||||||
img.on('error', function() {
|
|
||||||
var wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
});
|
|
||||||
|
|
||||||
// Set the title
|
|
||||||
if (link.data('title')) {
|
|
||||||
$this.setTitle(link.data('title'));
|
|
||||||
} else if (link.attr('title')) {
|
|
||||||
$this.setTitle(link.attr('title'));
|
|
||||||
} else {
|
|
||||||
$('.meta-lightbox-title-wrap').html('');
|
|
||||||
}
|
|
||||||
|
|
||||||
// google analytics
|
|
||||||
if (typeof ga === 'function') {
|
|
||||||
ga('send', 'event', 'meta', 'Image Click', href);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Video (Youtube/Vimeo)
|
|
||||||
else if (video = href.match(/(youtube|youtube-nocookie|youtu|vimeo)\.(com|be)\/(watch\?v=([\w-]+)|([\w-]+))/)) {
|
|
||||||
src = '';
|
|
||||||
classTerm = 'meta-lightbox-video';
|
|
||||||
|
|
||||||
if (video[1] == 'youtube') {
|
|
||||||
src = '//www.youtube.com/embed/' + video[4];
|
|
||||||
classTerm = 'meta-lightbox-youtube';
|
|
||||||
}
|
|
||||||
if (video[1] == 'youtu') {
|
|
||||||
src = '//www.youtube.com/embed/' + video[3];
|
|
||||||
classTerm = 'meta-lightbox-youtube';
|
|
||||||
}
|
|
||||||
if (video[1] == 'youtube-nocookie') {
|
|
||||||
src = '//www.youtube-nocookie.com/embed/' + video[4];
|
|
||||||
classTerm = 'nivo-lightbox-youtube';
|
|
||||||
}
|
|
||||||
if (video[1] == 'vimeo') {
|
|
||||||
src = '//player.vimeo.com/video/' + video[3];
|
|
||||||
classTerm = 'meta-lightbox-vimeo';
|
|
||||||
}
|
|
||||||
|
|
||||||
if (src) {
|
|
||||||
iframe = $('<iframe>', {
|
|
||||||
src: src,
|
|
||||||
'class': classTerm,
|
|
||||||
frameborder: 0,
|
|
||||||
vspace: 0,
|
|
||||||
hspace: 0,
|
|
||||||
scrolling: 'auto'
|
|
||||||
});
|
|
||||||
content.html(iframe);
|
|
||||||
iframe.on('load', function() {
|
|
||||||
content.removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
// Set the title
|
|
||||||
if (link.data('title')) {
|
|
||||||
$this.setTitle(link.data('title'));
|
|
||||||
} else if (link.attr('title')) {
|
|
||||||
$this.setTitle(link.attr('title'));
|
|
||||||
} else {
|
|
||||||
$('.meta-lightbox-title-wrap').html('');
|
|
||||||
}
|
|
||||||
|
|
||||||
// google analytics
|
|
||||||
if (typeof ga === 'function') {
|
|
||||||
ga('send', 'event', 'meta', 'Video Click', video);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// Inline HTML
|
|
||||||
else if (href.substring(0, 1) == '#') {
|
|
||||||
if ($(href).length) {
|
|
||||||
wrap = $('<div class="meta-lightbox-inline" />');
|
|
||||||
wrap.append($(href).clone().show());
|
|
||||||
|
|
||||||
// Vertically center html
|
|
||||||
if (wrap.outerHeight() < content.height()) {
|
|
||||||
wrap.css({
|
|
||||||
'position': 'relative',
|
|
||||||
'top': '50%',
|
|
||||||
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$(window).resize(function() {
|
|
||||||
if (wrap.outerHeight() < content.height()) {
|
|
||||||
wrap.css({
|
|
||||||
'position': 'relative',
|
|
||||||
'top': '50%',
|
|
||||||
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
} else {
|
|
||||||
wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
}
|
|
||||||
|
|
||||||
$('.meta-lightbox-title-wrap').html('');
|
|
||||||
|
|
||||||
// google analytics
|
|
||||||
if (typeof ga === 'function') {
|
|
||||||
ga('send', 'event', 'meta', 'inline HTML click', href);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
// AJAX/iFrame (default)
|
|
||||||
else {
|
|
||||||
$.ajax({
|
|
||||||
sync: false,
|
|
||||||
async: true,
|
|
||||||
url: href,
|
|
||||||
dataType: 'html',
|
|
||||||
method: 'GET',
|
|
||||||
cache: false,
|
|
||||||
statusCode: {
|
|
||||||
404: function() {
|
|
||||||
console.log('page not found');
|
|
||||||
window.location.href = url;
|
|
||||||
},
|
|
||||||
302: function() {
|
|
||||||
console.log('redirect 302');
|
|
||||||
window.location.href = url;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
error: function(jqXHR) {
|
|
||||||
console.log('AJAX request failure.' + jqXHR.statusText);
|
|
||||||
|
|
||||||
var wrap = $('<div class="meta-lightbox-error"><p>' + $this.options.errorMessage + '</p></div>');
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
$this.contentLoaded();
|
|
||||||
|
|
||||||
// google analytics
|
|
||||||
if (typeof ga === 'function') {
|
|
||||||
ga('send', 'event', 'error', 'AJAX ERROR', jqXHR.statusText);
|
|
||||||
}
|
|
||||||
},
|
|
||||||
success: function(data, status, jqXHR) {
|
|
||||||
try {
|
|
||||||
data = $.parseJSON(data);
|
|
||||||
if (typeof(data) === 'object') {
|
|
||||||
// Replace regions
|
|
||||||
if (typeof(data['regions']) === 'object' && typeof data['regions']['LayoutAjax'] !== 'undefinded') {
|
|
||||||
var wrap = $('<div class="meta-lightbox-ajax" />');
|
|
||||||
wrap.html(data['regions']['LayoutAjax']);
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
}
|
|
||||||
|
|
||||||
// trigger events
|
|
||||||
/*if (typeof (data['events']) === 'object') {
|
|
||||||
for (var eventName in data.events) {
|
|
||||||
$(document).trigger(eventName, [data['events'][eventName]]);
|
|
||||||
}
|
|
||||||
}*/
|
|
||||||
|
|
||||||
|
|
||||||
var title = jqXHR.getResponseHeader('X-Title'),
|
var title = jqXHR.getResponseHeader('X-Title'),
|
||||||
link = jqXHR.getResponseHeader('X-Link');
|
link = jqXHR.getResponseHeader('X-Link');
|
||||||
|
|
||||||
if (
|
|
||||||
title && title.length &&
|
|
||||||
link && link.length &&
|
|
||||||
link !== window.location.href &&
|
|
||||||
link.substring(0, link.indexOf('#')) !== window.location.href.replace($('base').attr('href'), '/')
|
|
||||||
) {
|
|
||||||
$('.meta-lightbox-ajax').data('curr-title', document.title);
|
|
||||||
$('.meta-lightbox-ajax').data('curr-link', window.location.href);
|
|
||||||
|
|
||||||
if (typeof window.localStorage !== 'undefined' && link !== '/') {
|
|
||||||
window.localStorage.setItem('current-page', link);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
|
||||||
document.URL !== link &&
|
|
||||||
document.URL !== $('base').attr('href') + link &&
|
|
||||||
document.URL !== $('base').attr('href') + '/' + link
|
|
||||||
) {
|
|
||||||
window.history.pushState({
|
|
||||||
title: title,
|
|
||||||
page: link,
|
|
||||||
ajax: 'true'
|
|
||||||
}, title, link);
|
|
||||||
}
|
|
||||||
|
|
||||||
// update redirect urls
|
|
||||||
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
|
|
||||||
$('a').each(function () {
|
|
||||||
var $this = $(this);
|
|
||||||
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
|
|
||||||
});*/
|
|
||||||
|
|
||||||
$('.meta-lightbox-title-wrap').html('');
|
|
||||||
|
|
||||||
// google analytics
|
|
||||||
if (typeof ga === 'function') {
|
|
||||||
ga('set', {
|
|
||||||
page: link.replace($('base').attr('href'), ''),
|
|
||||||
title: title
|
|
||||||
});
|
|
||||||
ga('send', 'pageview');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
} catch (e) {
|
|
||||||
var wrap = $('<div class="meta-lightbox-ajax" />');
|
|
||||||
wrap.append(data);
|
|
||||||
content.html(wrap).removeClass('meta-lightbox-loading');
|
|
||||||
}
|
|
||||||
|
|
||||||
// Vertically center html
|
|
||||||
if (wrap.outerHeight() < content.height()) {
|
|
||||||
wrap.css({
|
|
||||||
'position': 'relative',
|
|
||||||
'top': '50%',
|
|
||||||
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
$(window).resize(function() {
|
|
||||||
if (wrap.outerHeight() < content.height()) {
|
|
||||||
wrap.css({
|
|
||||||
'position': 'relative',
|
|
||||||
'top': '50%',
|
|
||||||
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
|
||||||
});
|
|
||||||
}
|
|
||||||
});
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
$(window).resize();
|
|
||||||
|
|
||||||
window.imagesLoaded().then(function() {
|
|
||||||
$(window).resize();
|
|
||||||
});
|
|
||||||
}, 500);
|
|
||||||
|
|
||||||
$this.contentLoaded();
|
|
||||||
}
|
|
||||||
});
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setTitle: function(text) {
|
|
||||||
var titleWrap = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-title'
|
|
||||||
});
|
|
||||||
titleWrap.text(text);
|
|
||||||
$('.meta-lightbox-title-wrap').html(titleWrap);
|
|
||||||
},
|
|
||||||
|
|
||||||
contentLoaded: function() {
|
|
||||||
setTimeout(function() {
|
|
||||||
$(window).trigger('meta-lightbox-loaded');
|
|
||||||
}, 1); // For CSS transitions
|
|
||||||
|
|
||||||
setTimeout(function() {
|
|
||||||
$('body').addClass('meta-lightbox-body-effect-fade');
|
|
||||||
}, 600);
|
|
||||||
},
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
constructLightbox: function() {
|
|
||||||
var $this = this,
|
|
||||||
overlay = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-overlay meta-lightbox-theme-' + this.options.theme + ' meta-lightbox-effect-' + this.options.effect
|
|
||||||
}),
|
|
||||||
wrap = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-wrap'
|
|
||||||
}),
|
|
||||||
content = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-content'
|
|
||||||
}),
|
|
||||||
nav = $('<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a><a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span></a>'),
|
|
||||||
close = $('<a href="#" class="meta-lightbox-close fa fa-times" title="Close"><span class="sr-only">Close</span></a>'),
|
|
||||||
title = $('<div>', {
|
|
||||||
'class': 'meta-lightbox-title-wrap'
|
|
||||||
}),
|
|
||||||
isMSIE = /*@cc_on!@*/ 0,
|
|
||||||
$overlay = $('.meta-lightbox-overlay');
|
|
||||||
|
|
||||||
if ($overlay.length) return $overlay;
|
|
||||||
|
|
||||||
|
|
||||||
if (isMSIE) overlay.addClass('meta-lightbox-ie');
|
|
||||||
|
|
||||||
wrap.append(content);
|
|
||||||
wrap.append(title);
|
|
||||||
overlay.append(wrap);
|
|
||||||
overlay.append(nav);
|
|
||||||
overlay.append(close);
|
|
||||||
$('body').append(overlay);
|
|
||||||
|
|
||||||
if ($this.options.clickOverlayToClose) {
|
|
||||||
overlay.on('click', function(e) {
|
|
||||||
if (e.target === this ||
|
|
||||||
$(e.target).hasClass('meta-lightbox-content') ||
|
|
||||||
$(e.target).hasClass('meta-lightbox-image')) $this.destructLightbox();
|
|
||||||
});
|
|
||||||
}
|
|
||||||
|
|
||||||
close.on('click', function(e) {
|
|
||||||
e.preventDefault();
|
|
||||||
$this.destructLightbox();
|
|
||||||
});
|
|
||||||
|
|
||||||
return overlay;
|
|
||||||
},
|
|
||||||
|
|
||||||
destructLightbox: function() {
|
|
||||||
var $this = this,
|
|
||||||
$overlay = $('.meta-lightbox-overlay'),
|
|
||||||
isMSIE = /*@cc_on!@*/ 0;
|
|
||||||
this.options.beforeHideLightbox.call(this);
|
|
||||||
|
|
||||||
var title = $('.meta-lightbox-ajax').data('curr-title'),
|
|
||||||
link = $('.meta-lightbox-ajax').data('curr-link');
|
|
||||||
if (title && link) {
|
|
||||||
|
|
||||||
if (typeof window.localStorage !== 'undefined' && link !== '/') {
|
|
||||||
window.localStorage.setItem('current-page', link);
|
|
||||||
}
|
|
||||||
|
|
||||||
if (
|
if (
|
||||||
|
title && title.length &&
|
||||||
|
link && link.length &&
|
||||||
|
link !== window.location.href &&
|
||||||
|
link.substring(0, link.indexOf('#')) !== window.location.href.replace($('base').attr('href'), '/')
|
||||||
|
) {
|
||||||
|
$('.meta-lightbox-ajax').data('curr-title', document.title);
|
||||||
|
$('.meta-lightbox-ajax').data('curr-link', window.location.href);
|
||||||
|
|
||||||
|
if (typeof window.localStorage !== 'undefined' && link !== '/') {
|
||||||
|
window.localStorage.setItem('current-page', link);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
document.URL !== link &&
|
document.URL !== link &&
|
||||||
document.URL !== $('base').attr('href') + link &&
|
document.URL !== $('base').attr('href') + link &&
|
||||||
document.URL !== $('base').attr('href') + '/' + link
|
document.URL !== $('base').attr('href') + '/' + link
|
||||||
) {
|
) {
|
||||||
window.history.replaceState({
|
window.history.pushState({
|
||||||
title: title,
|
title: title,
|
||||||
page: link,
|
page: link,
|
||||||
ajax: 'true'
|
ajax: 'true'
|
||||||
}, title, link);
|
}, title, link);
|
||||||
|
}
|
||||||
|
|
||||||
|
// update redirect urls
|
||||||
|
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
|
||||||
|
$('a').each(function () {
|
||||||
|
var $this = $(this);
|
||||||
|
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
|
||||||
|
});*/
|
||||||
|
|
||||||
|
$('.meta-lightbox-title-wrap').html('');
|
||||||
|
|
||||||
|
// google analytics
|
||||||
|
if (typeof ga === 'function') {
|
||||||
|
ga('set', {
|
||||||
|
page: link.replace($('base').attr('href'), ''),
|
||||||
|
title: title
|
||||||
|
});
|
||||||
|
ga('send', 'pageview');
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
}
|
||||||
// update redirect urls
|
} catch (e) {
|
||||||
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
|
var wrap = $('<div class="meta-lightbox-ajax" />');
|
||||||
$('a').each(function () {
|
wrap.append(data);
|
||||||
var $this = $(this);
|
content.html(wrap).removeClass('meta-lightbox-loading');
|
||||||
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
|
|
||||||
});*/
|
|
||||||
}
|
}
|
||||||
|
|
||||||
$overlay.removeClass('meta-lightbox-open');
|
// Vertically center html
|
||||||
$('.meta-lightbox-nav').hide();
|
if (wrap.outerHeight() < content.height()) {
|
||||||
$('body').removeClass('meta-lightbox-body-effect-' + $this.options.effect);
|
wrap.css({
|
||||||
$('.meta-lightbox-content .meta-lightbox-zoom-wrapper').trigger('zoom.destroy');
|
'position': 'relative',
|
||||||
|
'top': '50%',
|
||||||
// For IE
|
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
||||||
if (isMSIE) {
|
});
|
||||||
$overlay.find('iframe').attr("src", " ");
|
|
||||||
$overlay.find('iframe').remove();
|
|
||||||
}
|
}
|
||||||
$('.meta-lightbox-prev').off('click');
|
$(window).resize(function() {
|
||||||
|
if (wrap.outerHeight() < content.height()) {
|
||||||
|
wrap.css({
|
||||||
|
'position': 'relative',
|
||||||
|
'top': '50%',
|
||||||
|
'margin-top': -(wrap.outerHeight() / 2) + 'px'
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
// Remove click handlers
|
setTimeout(function() {
|
||||||
$('.meta-lightbox-next').off('click');
|
$(window).resize();
|
||||||
|
|
||||||
// Empty content (for videos)
|
window.imagesLoaded().then(function() {
|
||||||
$('.meta-lightbox-content').empty();
|
$(window).resize();
|
||||||
|
});
|
||||||
|
}, 500);
|
||||||
|
|
||||||
$('body').removeClass('meta-lightbox-body-effect-fade');
|
$this.contentLoaded();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
this.options.afterHideLightbox.call(this);
|
setTitle: function(text) {
|
||||||
|
var titleWrap = $('<div>', {
|
||||||
|
'class': 'meta-lightbox-title'
|
||||||
|
});
|
||||||
|
titleWrap.text(text);
|
||||||
|
$('.meta-lightbox-title-wrap').html(titleWrap);
|
||||||
|
},
|
||||||
|
|
||||||
},
|
contentLoaded: function() {
|
||||||
|
setTimeout(function() {
|
||||||
|
$(window).trigger('meta-lightbox-loaded');
|
||||||
|
}, 1); // For CSS transitions
|
||||||
|
|
||||||
isHidpi: function() {
|
setTimeout(function() {
|
||||||
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
|
$('body').addClass('meta-lightbox-body-effect-fade');
|
||||||
|
}, 600);
|
||||||
|
},
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
constructLightbox: function() {
|
||||||
|
var $this = this,
|
||||||
|
overlay = $('<div>', {
|
||||||
|
'class': 'meta-lightbox-overlay meta-lightbox-theme-' + this.options.theme + ' meta-lightbox-effect-' + this.options.effect
|
||||||
|
}),
|
||||||
|
wrap = $('<div>', {
|
||||||
|
'class': 'meta-lightbox-wrap'
|
||||||
|
}),
|
||||||
|
content = $('<div>', {
|
||||||
|
'class': 'meta-lightbox-content'
|
||||||
|
}),
|
||||||
|
nav = $('<a href="#" class="meta-lightbox-nav meta-lightbox-prev"><i class="fa fa-chevron-left"></i> <span class="sr-only">Previous</span></a><a href="#" class="meta-lightbox-nav meta-lightbox-next"><i class="fa fa-chevron-right"></i> <span class="sr-only">Next</span></a>'),
|
||||||
|
close = $('<a href="#" class="meta-lightbox-close fa fa-times" title="Close"><span class="sr-only">Close</span></a>'),
|
||||||
|
title = $('<div>', {
|
||||||
|
'class': 'meta-lightbox-title-wrap'
|
||||||
|
}),
|
||||||
|
isMSIE = /*@cc_on!@*/ 0,
|
||||||
|
$overlay = $('.meta-lightbox-overlay');
|
||||||
|
|
||||||
|
if ($overlay.length) return $overlay;
|
||||||
|
|
||||||
|
|
||||||
|
if (isMSIE) overlay.addClass('meta-lightbox-ie');
|
||||||
|
|
||||||
|
wrap.append(content);
|
||||||
|
wrap.append(title);
|
||||||
|
overlay.append(wrap);
|
||||||
|
overlay.append(nav);
|
||||||
|
overlay.append(close);
|
||||||
|
$('body').append(overlay);
|
||||||
|
|
||||||
|
if ($this.options.clickOverlayToClose) {
|
||||||
|
overlay.on('click', function(e) {
|
||||||
|
if (e.target === this ||
|
||||||
|
$(e.target).hasClass('meta-lightbox-content') ||
|
||||||
|
$(e.target).hasClass('meta-lightbox-image')) $this.destructLightbox();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
close.on('click', function(e) {
|
||||||
|
e.preventDefault();
|
||||||
|
$this.destructLightbox();
|
||||||
|
});
|
||||||
|
|
||||||
|
return overlay;
|
||||||
|
},
|
||||||
|
|
||||||
|
destructLightbox: function() {
|
||||||
|
var $this = this,
|
||||||
|
$overlay = $('.meta-lightbox-overlay'),
|
||||||
|
isMSIE = /*@cc_on!@*/ 0;
|
||||||
|
this.options.beforeHideLightbox.call(this);
|
||||||
|
|
||||||
|
var title = $('.meta-lightbox-ajax').data('curr-title'),
|
||||||
|
link = $('.meta-lightbox-ajax').data('curr-link');
|
||||||
|
if (title && link) {
|
||||||
|
|
||||||
|
if (typeof window.localStorage !== 'undefined' && link !== '/') {
|
||||||
|
window.localStorage.setItem('current-page', link);
|
||||||
|
}
|
||||||
|
|
||||||
|
if (
|
||||||
|
document.URL !== link &&
|
||||||
|
document.URL !== $('base').attr('href') + link &&
|
||||||
|
document.URL !== $('base').attr('href') + '/' + link
|
||||||
|
) {
|
||||||
|
window.history.replaceState({
|
||||||
|
title: title,
|
||||||
|
page: link,
|
||||||
|
ajax: 'true'
|
||||||
|
}, title, link);
|
||||||
|
}
|
||||||
|
|
||||||
|
// update redirect urls
|
||||||
|
/*var pattern = new RegExp('\\b(redirect_uri=).*?(&|$)');
|
||||||
|
$('a').each(function () {
|
||||||
|
var $this = $(this);
|
||||||
|
$this.attr('href', $this.attr('href').replace(pattern, 'redirect_uri=' + encodeURI($('base').attr('href') + link)));
|
||||||
|
});*/
|
||||||
|
}
|
||||||
|
|
||||||
|
$overlay.removeClass('meta-lightbox-open');
|
||||||
|
$('.meta-lightbox-nav').hide();
|
||||||
|
$('body').removeClass('meta-lightbox-body-effect-' + $this.options.effect);
|
||||||
|
$('.meta-lightbox-content .meta-lightbox-zoom-wrapper').trigger('zoom.destroy');
|
||||||
|
|
||||||
|
// For IE
|
||||||
|
if (isMSIE) {
|
||||||
|
$overlay.find('iframe').attr("src", " ");
|
||||||
|
$overlay.find('iframe').remove();
|
||||||
|
}
|
||||||
|
$('.meta-lightbox-prev').off('click');
|
||||||
|
|
||||||
|
// Remove click handlers
|
||||||
|
$('.meta-lightbox-next').off('click');
|
||||||
|
|
||||||
|
// Empty content (for videos)
|
||||||
|
$('.meta-lightbox-content').empty();
|
||||||
|
|
||||||
|
$('body').removeClass('meta-lightbox-body-effect-fade');
|
||||||
|
|
||||||
|
this.options.afterHideLightbox.call(this);
|
||||||
|
|
||||||
|
},
|
||||||
|
|
||||||
|
isHidpi: function() {
|
||||||
|
var mediaQuery = "(-webkit-min-device-pixel-ratio: 1.5),\
|
||||||
(min--moz-device-pixel-ratio: 1.5),\
|
(min--moz-device-pixel-ratio: 1.5),\
|
||||||
(-o-min-device-pixel-ratio: 3/2),\
|
(-o-min-device-pixel-ratio: 3/2),\
|
||||||
(min-resolution: 1.5dppx)";
|
(min-resolution: 1.5dppx)";
|
||||||
if (window.devicePixelRatio > 1) return true;
|
if (window.devicePixelRatio > 1) return true;
|
||||||
return (window.matchMedia && window.matchMedia(mediaQuery).matches);
|
return (window.matchMedia && window.matchMedia(mediaQuery).matches);
|
||||||
}
|
}
|
||||||
|
|
||||||
};
|
};
|
||||||
|
|
||||||
$.fn[pluginName] = function(options) {
|
$.fn[pluginName] = function(options) {
|
||||||
return this.each(function() {
|
return this.each(function() {
|
||||||
if (!$.data(this, pluginName)) {
|
if (!$.data(this, pluginName)) {
|
||||||
$.data(this, pluginName, new MetaLightbox(this, options));
|
$.data(this, pluginName, new MetaLightbox(this, options));
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
$(document).metaLightbox();
|
$(document).metaLightbox();
|
||||||
|
|
||||||
})(jQuery, this, document);
|
})(jQuery, this, document);
|
||||||
|
|||||||
@ -1,5 +1,5 @@
|
|||||||
$link-color: #007bff;
|
$lightbox-link-hover-color: #007bff !default;
|
||||||
$grid-float-breakpoint-max: 576px;
|
$lightbox-breakpoint: 576px !default;
|
||||||
|
|
||||||
.meta-lightbox-theme-default.meta-lightbox-overlay {
|
.meta-lightbox-theme-default.meta-lightbox-overlay {
|
||||||
background: #666;
|
background: #666;
|
||||||
@ -27,7 +27,7 @@ $grid-float-breakpoint-max: 576px;
|
|||||||
}
|
}
|
||||||
|
|
||||||
&:hover {
|
&:hover {
|
||||||
color: $link-color;
|
color: $lightbox-link-hover-color;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
@ -45,7 +45,7 @@ $grid-float-breakpoint-max: 576px;
|
|||||||
height: 1.2em;
|
height: 1.2em;
|
||||||
|
|
||||||
&:focus {
|
&:focus {
|
||||||
color: $link-color;
|
color: $lightbox-link-hover-color;
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
background-color: rgba(0, 0, 0, 0.5);
|
background-color: rgba(0, 0, 0, 0.5);
|
||||||
}
|
}
|
||||||
@ -64,7 +64,7 @@ $grid-float-breakpoint-max: 576px;
|
|||||||
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
|
box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.4);
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (max-width: $grid-float-breakpoint-max) {
|
@media (max-width: $lightbox-breakpoint) {
|
||||||
.meta-lightbox-wrap {
|
.meta-lightbox-wrap {
|
||||||
top: 5px !important;
|
top: 5px !important;
|
||||||
bottom: 5px;
|
bottom: 5px;
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user