You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
128 lines
7.7 KiB
128 lines
7.7 KiB
/*
|
|
By André Knieriem, www.andreknieriem.de
|
|
Available for use under the MIT License
|
|
*/
|
|
!function (e, t, n) {
|
|
"use strict";
|
|
e.fn.simpleLightbox = function (i) {
|
|
var i = e.extend({
|
|
overlay: !0,
|
|
spinner: !0,
|
|
nav: !0,
|
|
navText: ["←", "→"],
|
|
captions: !0,
|
|
close: !0,
|
|
closeText: "X",
|
|
fileExt: "png|jpg|jpeg|gif",
|
|
animationSpeed: 250,
|
|
preloading: !0,
|
|
enableKeyboard: !0,
|
|
loop: !0,
|
|
docClose: !0,
|
|
swipeTolerance: 50,
|
|
className: "simple-lightbox",
|
|
widthRatio: .8,
|
|
heightRatio: .9
|
|
}, i), a = (t.navigator.pointerEnabled || t.navigator.msPointerEnabled, 0), o = e(), s = function () {
|
|
var e = n.body || n.documentElement, e = e.style;
|
|
return "" == e.WebkitTransition ? "-webkit-" : "" == e.MozTransition ? "-moz-" : "" == e.OTransition ? "-o-" : "" == e.transition ? "" : !1
|
|
}, l = !1, r = this.selector, s = s(), p = s !== !1 ? !0 : !1, c = "simplelb",
|
|
d = e("<div>").addClass("sl-overlay"), g = e("<button>").addClass("sl-close").html(i.closeText),
|
|
f = e("<div>").addClass("sl-spinner").html("<div></div>"),
|
|
u = e("<div>").addClass("sl-navigation").html('<button class="sl-prev">' + i.navText[0] + '</button><button class="sl-next">' + i.navText[1] + "</button>"),
|
|
h = !1, m = 0, v = e(), x = e("<div>").addClass("sl-caption"), b = function (t) {
|
|
return "a" == e(t).prop("tagName").toLowerCase() && new RegExp(".(" + i.fileExt + ")$", "i").test(e(t).attr("href"))
|
|
}, w = function () {
|
|
i.overlay && d.appendTo(e("body")), e("<div>").addClass("sl-wrapper").addClass(i.className).html('<div class="sl-image"></div>').appendTo("body"), v = e(".sl-image"), i.close && g.appendTo(e(".sl-wrapper")), i.nav && u.appendTo(e(".sl-wrapper")), i.spinner && f.appendTo(e(".sl-wrapper"))
|
|
}, T = function (t) {
|
|
t.trigger(e.Event("show.simplelightbox")), h = !0, m = e(r).index(t), o = e("<img/>").hide().attr("src", t.attr("href")), e(".sl-image").html(""), o.appendTo(e(".sl-image")), d.fadeIn("fast"), e(".sl-close").fadeIn("fast"), f.show(), u.fadeIn("fast"), y(), i.preloading && k(), setTimeout(function () {
|
|
t.trigger(e.Event("shown.simplelightbox"))
|
|
}, i.animationSpeed)
|
|
}, y = function (n) {
|
|
if (o.length) {
|
|
var a = new Image, s = e(t).width() * i.widthRatio, c = e(t).height() * i.heightRatio;
|
|
a.src = o.attr("src"), a.onload = function () {
|
|
var d = a.width, g = a.height;
|
|
if (d > s || g > c) {
|
|
var u = d / g > s / c ? d / s : g / c;
|
|
d /= u, g /= u
|
|
}
|
|
e(".sl-image").css({
|
|
top: (e(t).height() - g) / 2 + "px",
|
|
left: (e(t).width() - d) / 2 + "px"
|
|
}), f.hide(), o.css({width: d + "px", height: g + "px"}).fadeIn("fast"), l = !0;
|
|
var v = e(r).eq(m).find("img").prop("title");
|
|
if (1 == n || -1 == n) {
|
|
var x = {opacity: 1};
|
|
p ? (E(0, 100 * n + "px"), setTimeout(function () {
|
|
E(i.animationSpeed / 1e3, "0px"), 50
|
|
})) : x.left = parseInt(e(".sl-image").css("left")) + 100 * n + "px", e(".sl-image").animate(x, i.animationSpeed, function () {
|
|
h = !1, C(v)
|
|
})
|
|
} else h = !1, C(v)
|
|
}
|
|
}
|
|
}, C = function (t) {
|
|
"" != t && i.captions && x.text(t).hide().appendTo(e(".sl-image")).fadeIn("fast")
|
|
}, E = function (t, n) {
|
|
var i = {};
|
|
i[s + "transform"] = "translateX(" + n + ")", i[s + "transition"] = s + "transform " + t + "s linear", e(".sl-image").css(i)
|
|
}, k = function () {
|
|
var t = 0 > m + 1 ? e(r).length - 1 : m + 1 >= e(r).length - 1 ? 0 : m + 1,
|
|
n = 0 > m - 1 ? e(r).length - 1 : m - 1 >= e(r).length - 1 ? 0 : m - 1;
|
|
e("<img />").attr("src", e(r).eq(t).attr("href")).load(), e("<img />").attr("src", e(r).eq(n).attr("href")).load()
|
|
}, S = function (t) {
|
|
f.show();
|
|
var n = m + t;
|
|
if (!(h || (0 > n || n >= e(r).length) && 0 == i.loop)) {
|
|
h = !0, m = 0 > n ? e(r).length - 1 : n >= e(r).length - 1 ? 0 : n;
|
|
var s = {opacity: 0};
|
|
p ? E(i.animationSpeed / 1e3, -100 * t - a + "px") : s.left = parseInt(e(".sl-image").css("left")) + -100 * t + "px", e(".sl-image").animate(s, i.animationSpeed, function () {
|
|
setTimeout(function () {
|
|
var n = e(r).eq(m);
|
|
o.attr("src", n.attr("href")), e(".sl-caption").remove(), y(t), i.preloading && k()
|
|
}, 100)
|
|
})
|
|
}
|
|
}, I = function () {
|
|
var t = e(r).eq(m), n = !1;
|
|
t.trigger(e.Event("close.simplelightbox")), e(".sl-image img, .sl-overlay, .sl-close, .sl-navigation, .sl-image .sl-caption").fadeOut("fast", function () {
|
|
n || t.trigger(e.Event("closed.simplelightbox")), n = !0
|
|
}), o = e(), l = !1
|
|
};
|
|
w(), e(t).on("resize", y), e(n).on("click." + c, this.selector, function (t) {
|
|
if (b(this)) {
|
|
if (t.preventDefault(), h) return !1;
|
|
T(e(this))
|
|
}
|
|
}), e(n).on("click", ".sl-close", function (e) {
|
|
e.preventDefault(), l && I()
|
|
}), e(n).click(function (t) {
|
|
l && i.docClose && 0 == e(t.target).closest(".sl-image").length && 0 == e(t.target).closest(".sl-navigation").length && I()
|
|
}), e(n).on("click", ".sl-navigation button", function (t) {
|
|
t.preventDefault(), a = 0, S(e(this).hasClass("sl-next") ? 1 : -1)
|
|
}), i.enableKeyboard && e(n).on("keyup." + c, function (e) {
|
|
e.preventDefault(), a = 0;
|
|
var t = e.keyCode;
|
|
27 == t && I(), (37 == t || 39 == e.keyCode) && S(39 == e.keyCode ? 1 : -1)
|
|
});
|
|
var M = 0, D = 0, X = !1, q = 0;
|
|
return e(n).on("touchstart mousedown pointerdown MSPointerDown", ".sl-image", function (e) {
|
|
return X ? !0 : (p && (q = parseInt(v.css("left"))), X = !0, void (M = e.originalEvent.pageX || e.originalEvent.touches[0].pageX))
|
|
}).on("touchmove mousemove pointermove MSPointerMove", ".sl-image", function (e) {
|
|
return X ? (e.preventDefault(), D = e.originalEvent.pageX || e.originalEvent.touches[0].pageX, a = M - D, void (p ? E(0, -a + "px") : v.css("left", q - a + "px"))) : !0
|
|
}).on("touchend mouseup touchcancel pointerup pointercancel MSPointerUp MSPointerCancel", ".sl-image", function () {
|
|
X = !1, Math.abs(a) > i.swipeTolerance ? S(a > 0 ? 1 : -1) : p ? E(i.animationSpeed / 1e3, "0px") : v.animate({left: q + "px"}, i.animationSpeed / 2)
|
|
}), this.open = function (e) {
|
|
T(e)
|
|
}, this.next = function () {
|
|
S(1)
|
|
}, this.prev = function () {
|
|
S(-1)
|
|
}, this.close = function () {
|
|
I()
|
|
}, this.destroy = function () {
|
|
e(n).unbind("click." + c).unbind("keyup." + c), I()
|
|
}, this
|
|
}
|
|
}(jQuery, window, document); |