375 行
14 KiB
JavaScript
375 行
14 KiB
JavaScript
/*
|
|
* Lightbox v2.9.0
|
|
* by Lokesh Dhakar
|
|
*
|
|
* More info:
|
|
* http://lokeshdhakar.com/projects/lightbox2/
|
|
*
|
|
* Copyright 2007, 2015 Lokesh Dhakar
|
|
* Released under the MIT license
|
|
* https://github.com/lokesh/lightbox2/blob/master/LICENSE
|
|
*/
|
|
(function (b, a) {
|
|
if (typeof define === "function" && define.amd) {
|
|
define(["jquery"], a)
|
|
} else {
|
|
if (typeof exports === "object") {
|
|
module.exports = a(require("jquery"))
|
|
} else {
|
|
b.lightbox = a(b.jQuery)
|
|
}
|
|
}
|
|
}(this, function (a) {
|
|
function b(c) {
|
|
this.album = [];
|
|
this.currentImageIndex = void 0;
|
|
this.init();
|
|
this.options = a.extend({}, this.constructor.defaults);
|
|
this.option(c)
|
|
}
|
|
|
|
b.defaults = {
|
|
albumLabel: "Image %1 of %2",
|
|
alwaysShowNavOnTouchDevices: false,
|
|
fadeDuration: 600,
|
|
fitImagesInViewport: true,
|
|
imageFadeDuration: 600,
|
|
positionFromTop: 50,
|
|
resizeDuration: 700,
|
|
showImageNumberLabel: true,
|
|
wrapAround: false,
|
|
disableScrolling: false,
|
|
sanitizeTitle: false
|
|
};
|
|
b.prototype.option = function (c) {
|
|
a.extend(this.options, c)
|
|
};
|
|
b.prototype.imageCountLabel = function (c, d) {
|
|
return this.options.albumLabel.replace(/%1/g, c).replace(/%2/g, d)
|
|
};
|
|
b.prototype.init = function () {
|
|
var c = this;
|
|
a(document).ready(function () {
|
|
c.enable();
|
|
c.build()
|
|
})
|
|
};
|
|
b.prototype.enable = function () {
|
|
var c = this;
|
|
a("body").on("click", "a[rel^=lightbox], area[rel^=lightbox], a[data-lightbox], area[data-lightbox]", function (d) {
|
|
c.start(a(d.currentTarget));
|
|
return false
|
|
})
|
|
};
|
|
b.prototype.build = function () {
|
|
var c = this;
|
|
a('<div id="lightboxOverlay" class="lightboxOverlay"></div><div id="lightbox" class="lightbox"><div class="lb-outerContainer"><div class="lb-container"><img class="lb-image" src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" /><div class="lb-nav"><a class="lb-prev" href="" ></a><a class="lb-next" href="" ></a></div><div class="lb-loader"><a class="lb-cancel"></a></div></div></div><div class="lb-dataContainer"><div class="lb-data"><div class="lb-details"><span class="lb-caption"></span><span class="lb-number"></span></div><div class="lb-closeContainer"><a class="lb-close"></a></div></div></div></div>').appendTo(a("body"));
|
|
this.$lightbox = a("#lightbox");
|
|
this.$overlay = a("#lightboxOverlay");
|
|
this.$outerContainer = this.$lightbox.find(".lb-outerContainer");
|
|
this.$container = this.$lightbox.find(".lb-container");
|
|
this.$image = this.$lightbox.find(".lb-image");
|
|
this.$nav = this.$lightbox.find(".lb-nav");
|
|
this.containerPadding = {
|
|
top: parseInt(this.$container.css("padding-top"), 10),
|
|
right: parseInt(this.$container.css("padding-right"), 10),
|
|
bottom: parseInt(this.$container.css("padding-bottom"), 10),
|
|
left: parseInt(this.$container.css("padding-left"), 10)
|
|
};
|
|
this.imageBorderWidth = {
|
|
top: parseInt(this.$image.css("border-top-width"), 10),
|
|
right: parseInt(this.$image.css("border-right-width"), 10),
|
|
bottom: parseInt(this.$image.css("border-bottom-width"), 10),
|
|
left: parseInt(this.$image.css("border-left-width"), 10)
|
|
};
|
|
this.$overlay.hide().on("click", function () {
|
|
c.end();
|
|
return false
|
|
});
|
|
this.$lightbox.hide().on("click", function (d) {
|
|
if (a(d.target).attr("id") === "lightbox") {
|
|
c.end()
|
|
}
|
|
return false
|
|
});
|
|
this.$outerContainer.on("click", function (d) {
|
|
if (a(d.target).attr("id") === "lightbox") {
|
|
c.end()
|
|
}
|
|
return false
|
|
});
|
|
this.$lightbox.find(".lb-prev").on("click", function () {
|
|
if (c.currentImageIndex === 0) {
|
|
c.changeImage(c.album.length - 1)
|
|
} else {
|
|
c.changeImage(c.currentImageIndex - 1)
|
|
}
|
|
return false
|
|
});
|
|
this.$lightbox.find(".lb-next").on("click", function () {
|
|
if (c.currentImageIndex === c.album.length - 1) {
|
|
c.changeImage(0)
|
|
} else {
|
|
c.changeImage(c.currentImageIndex + 1)
|
|
}
|
|
return false
|
|
});
|
|
this.$nav.on("mousedown", function (d) {
|
|
if (d.which === 3) {
|
|
c.$nav.css("pointer-events", "none");
|
|
c.$lightbox.one("contextmenu", function () {
|
|
setTimeout(function () {
|
|
this.$nav.css("pointer-events", "auto")
|
|
}.bind(c), 0)
|
|
})
|
|
}
|
|
});
|
|
this.$lightbox.find(".lb-loader, .lb-close").on("click", function () {
|
|
c.end();
|
|
return false
|
|
})
|
|
};
|
|
b.prototype.start = function (c) {
|
|
var n = this;
|
|
var e = a(window);
|
|
e.on("resize", a.proxy(this.sizeOverlay, this));
|
|
a("select, object, embed").css({visibility: "hidden"});
|
|
this.sizeOverlay();
|
|
this.album = [];
|
|
var k = 0;
|
|
|
|
function f(i) {
|
|
n.album.push({link: i.attr("href"), title: i.attr("data-title") || i.attr("title")})
|
|
}
|
|
|
|
var g = c.attr("data-lightbox");
|
|
var d;
|
|
if (g) {
|
|
d = a(c.prop("tagName") + '[data-lightbox="' + g + '"]');
|
|
for (var h = 0; h < d.length; h = ++h) {
|
|
f(a(d[h]));
|
|
if (d[h] === c[0]) {
|
|
k = h
|
|
}
|
|
}
|
|
} else {
|
|
if (c.attr("rel") === "lightbox") {
|
|
f(c)
|
|
} else {
|
|
d = a(c.prop("tagName") + '[rel="' + c.attr("rel") + '"]');
|
|
for (var l = 0; l < d.length; l = ++l) {
|
|
f(a(d[l]));
|
|
if (d[l] === c[0]) {
|
|
k = l
|
|
}
|
|
}
|
|
}
|
|
}
|
|
var o = e.scrollTop() + this.options.positionFromTop;
|
|
var m = e.scrollLeft();
|
|
this.$lightbox.css({top: o + "px", left: m + "px"}).fadeIn(this.options.fadeDuration);
|
|
if (this.options.disableScrolling) {
|
|
a("body").addClass("lb-disable-scrolling")
|
|
}
|
|
this.changeImage(k)
|
|
};
|
|
b.prototype.changeImage = function (d) {
|
|
var f = this;
|
|
this.disableKeyboardNav();
|
|
var c = this.$lightbox.find(".lb-image");
|
|
this.$overlay.fadeIn(this.options.fadeDuration);
|
|
a(".lb-loader").fadeIn("slow");
|
|
this.$lightbox.find(".lb-image, .lb-nav, .lb-prev, .lb-next, .lb-dataContainer, .lb-numbers, .lb-caption").hide();
|
|
this.$outerContainer.addClass("animating");
|
|
var e = new Image();
|
|
e.onload = function () {
|
|
var g;
|
|
var h;
|
|
var i;
|
|
var j;
|
|
var k;
|
|
var l;
|
|
var m;
|
|
c.attr("src", f.album[d].link);
|
|
g = a(e);
|
|
c.width(e.width);
|
|
c.height(e.height);
|
|
if (f.options.fitImagesInViewport) {
|
|
m = a(window).width();
|
|
l = a(window).height();
|
|
k = m - f.containerPadding.left - f.containerPadding.right - f.imageBorderWidth.left - f.imageBorderWidth.right - 20;
|
|
j = l - f.containerPadding.top - f.containerPadding.bottom - f.imageBorderWidth.top - f.imageBorderWidth.bottom - 120;
|
|
if (f.options.maxWidth && f.options.maxWidth < k) {
|
|
k = f.options.maxWidth
|
|
}
|
|
if (f.options.maxHeight && f.options.maxHeight < k) {
|
|
j = f.options.maxHeight
|
|
}
|
|
if ((e.width > k) || (e.height > j)) {
|
|
if ((e.width / k) > (e.height / j)) {
|
|
i = k;
|
|
h = parseInt(e.height / (e.width / i), 10);
|
|
c.width(i);
|
|
c.height(h)
|
|
} else {
|
|
h = j;
|
|
i = parseInt(e.width / (e.height / h), 10);
|
|
c.width(i);
|
|
c.height(h)
|
|
}
|
|
}
|
|
}
|
|
f.sizeContainer(c.width(), c.height())
|
|
};
|
|
e.src = this.album[d].link;
|
|
this.currentImageIndex = d
|
|
};
|
|
b.prototype.sizeOverlay = function () {
|
|
this.$overlay.width(a(document).width()).height(a(document).height())
|
|
};
|
|
b.prototype.sizeContainer = function (d, c) {
|
|
var j = this;
|
|
var h = this.$outerContainer.outerWidth();
|
|
var g = this.$outerContainer.outerHeight();
|
|
var f = d + this.containerPadding.left + this.containerPadding.right + this.imageBorderWidth.left + this.imageBorderWidth.right;
|
|
var e = c + this.containerPadding.top + this.containerPadding.bottom + this.imageBorderWidth.top + this.imageBorderWidth.bottom;
|
|
|
|
function i() {
|
|
j.$lightbox.find(".lb-dataContainer").width(f);
|
|
j.$lightbox.find(".lb-prevLink").height(e);
|
|
j.$lightbox.find(".lb-nextLink").height(e);
|
|
j.showImage()
|
|
}
|
|
|
|
if (h !== f || g !== e) {
|
|
this.$outerContainer.animate({width: f, height: e}, this.options.resizeDuration, "swing", function () {
|
|
i()
|
|
})
|
|
} else {
|
|
i()
|
|
}
|
|
};
|
|
b.prototype.showImage = function () {
|
|
this.$lightbox.find(".lb-loader").stop(true).hide();
|
|
this.$lightbox.find(".lb-image").fadeIn(this.options.imageFadeDuration);
|
|
this.updateNav();
|
|
this.updateDetails();
|
|
this.preloadNeighboringImages();
|
|
this.enableKeyboardNav()
|
|
};
|
|
b.prototype.updateNav = function () {
|
|
var c = false;
|
|
try {
|
|
document.createEvent("TouchEvent");
|
|
c = (this.options.alwaysShowNavOnTouchDevices) ? true : false
|
|
} catch (d) {
|
|
}
|
|
this.$lightbox.find(".lb-nav").show();
|
|
if (this.album.length > 1) {
|
|
if (this.options.wrapAround) {
|
|
if (c) {
|
|
this.$lightbox.find(".lb-prev, .lb-next").css("opacity", "1")
|
|
}
|
|
this.$lightbox.find(".lb-prev, .lb-next").show()
|
|
} else {
|
|
if (this.currentImageIndex > 0) {
|
|
this.$lightbox.find(".lb-prev").show();
|
|
if (c) {
|
|
this.$lightbox.find(".lb-prev").css("opacity", "1")
|
|
}
|
|
}
|
|
if (this.currentImageIndex < this.album.length - 1) {
|
|
this.$lightbox.find(".lb-next").show();
|
|
if (c) {
|
|
this.$lightbox.find(".lb-next").css("opacity", "1")
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
b.prototype.updateDetails = function () {
|
|
var e = this;
|
|
if (typeof this.album[this.currentImageIndex].title !== "undefined" && this.album[this.currentImageIndex].title !== "") {
|
|
var c = this.$lightbox.find(".lb-caption");
|
|
if (this.options.sanitizeTitle) {
|
|
c.text(this.album[this.currentImageIndex].title)
|
|
} else {
|
|
c.html(this.album[this.currentImageIndex].title)
|
|
}
|
|
c.fadeIn("fast").find("a").on("click", function (f) {
|
|
if (a(this).attr("target") !== undefined) {
|
|
window.open(a(this).attr("href"), a(this).attr("target"))
|
|
} else {
|
|
location.href = a(this).attr("href")
|
|
}
|
|
})
|
|
}
|
|
if (this.album.length > 1 && this.options.showImageNumberLabel) {
|
|
var d = this.imageCountLabel(this.currentImageIndex + 1, this.album.length);
|
|
this.$lightbox.find(".lb-number").text(d).fadeIn("fast")
|
|
} else {
|
|
this.$lightbox.find(".lb-number").hide()
|
|
}
|
|
this.$outerContainer.removeClass("animating");
|
|
this.$lightbox.find(".lb-dataContainer").fadeIn(this.options.resizeDuration, function () {
|
|
return e.sizeOverlay()
|
|
})
|
|
};
|
|
b.prototype.preloadNeighboringImages = function () {
|
|
if (this.album.length > this.currentImageIndex + 1) {
|
|
var c = new Image();
|
|
c.src = this.album[this.currentImageIndex + 1].link
|
|
}
|
|
if (this.currentImageIndex > 0) {
|
|
var d = new Image();
|
|
d.src = this.album[this.currentImageIndex - 1].link
|
|
}
|
|
};
|
|
b.prototype.enableKeyboardNav = function () {
|
|
a(document).on("keyup.keyboard", a.proxy(this.keyboardAction, this))
|
|
};
|
|
b.prototype.disableKeyboardNav = function () {
|
|
a(document).off(".keyboard")
|
|
};
|
|
b.prototype.keyboardAction = function (c) {
|
|
var f = 27;
|
|
var g = 37;
|
|
var h = 39;
|
|
var e = c.keyCode;
|
|
var d = String.fromCharCode(e).toLowerCase();
|
|
if (e === f || d.match(/x|o|c/)) {
|
|
this.end()
|
|
} else {
|
|
if (d === "p" || e === g) {
|
|
if (this.currentImageIndex !== 0) {
|
|
this.changeImage(this.currentImageIndex - 1)
|
|
} else {
|
|
if (this.options.wrapAround && this.album.length > 1) {
|
|
this.changeImage(this.album.length - 1)
|
|
}
|
|
}
|
|
} else {
|
|
if (d === "n" || e === h) {
|
|
if (this.currentImageIndex !== this.album.length - 1) {
|
|
this.changeImage(this.currentImageIndex + 1)
|
|
} else {
|
|
if (this.options.wrapAround && this.album.length > 1) {
|
|
this.changeImage(0)
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
};
|
|
b.prototype.end = function () {
|
|
this.disableKeyboardNav();
|
|
a(window).off("resize", this.sizeOverlay);
|
|
this.$lightbox.fadeOut(this.options.fadeDuration);
|
|
this.$overlay.fadeOut(this.options.fadeDuration);
|
|
a("select, object, embed").css({visibility: "visible"});
|
|
if (this.options.disableScrolling) {
|
|
a("body").removeClass("lb-disable-scrolling")
|
|
}
|
|
};
|
|
return new b()
|
|
})); |