New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More →
Socket
Sign inDemoInstall
Socket
Sign inDemoInstall

imagelightbox

Package Overview
Dependencies
Maintainers
0
Versions
31
Alerts
File Explorer

Advanced tools

License
Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

imagelightbox - npm Package Compare versions

Comparing version 2.1.0 to 3.0.0

dist/imagelightbox.jquery.js
dist/imagelightbox.jquery.js.map
dist/imagelightbox.jquery.umd.cjs
dist/imagelightbox.jquery.umd.cjs.map
docs/assets/index-DYwqu8sM.js
docs/assets/index-DYwqu8sM.js.map
docs/assets/index-EqKIziwN.css
types/imagelightbox.jquery.d.ts

772

dist/imagelightbox.js

@@ -1,37 +0,36 @@

import r from "jquery";
function M(e, t, a) {
const i = t + "=" + a;
let o = "?" + i;
function q(e, n, r) {
const i = `${n}=${r}`;
let o = `?${i}`;
if (e) {
const n = new RegExp("([?&])" + t + "=[^&]*");
n.exec(e) !== null ? o = e.replace(n, "$1" + i) : o = e + "&" + i;
const t = new RegExp(`([?&])${n}=[^&]*`);
t.exec(e) !== null ? o = e.replace(t, `$1${i}`) : o = `${e}&${i}`;
}
return o;
}
function T(e) {
const t = new RegExp("[?&]" + e + "(=([^&#]*)|&|#|$)").exec(
function Q(e) {
const n = new RegExp(`[?&]${e}(=([^&#]*)|&|#|$)`).exec(
document.location.search
);
if ((t == null ? void 0 : t[2]) !== void 0)
return decodeURIComponent(t[2].replace(/\+/g, " "));
if ((n == null ? void 0 : n[2]) !== void 0)
return decodeURIComponent(n[2].replace(/\+/g, " "));
}
function D(e, t) {
let a = e;
if (a) {
const i = new RegExp("\\?" + t + "=[^&]*"), o = new RegExp("&" + t + "=[^&]*");
a = a.replace(i, "?"), a = a.replace(o, "");
function B(e, n) {
let r = e;
if (r) {
const i = new RegExp(`\\?${n}=[^&]*`), o = new RegExp(`&${n}=[^&]*`);
r = r.replace(i, "?"), r = r.replace(o, "");
}
return a;
return r;
}
var w = /* @__PURE__ */ ((e) => (e[e.Right = -1] = "Right", e[e.None = 0] = "None", e[e.Left = 1] = "Left", e))(w || {});
function $() {
let e = D(
var y = /* @__PURE__ */ ((e) => (e[e.Left = 1] = "Left", e[e.None = 0] = "None", e[e.Right = -1] = "Right", e))(y || {});
function z() {
let e = B(
document.location.search,
"imageLightboxIndex"
);
e = D(e, "imageLightboxSet"), window.history.pushState({}, "", document.location.pathname + e);
e = B(e, "imageLightboxSet"), window.history.pushState({}, "", document.location.pathname + e);
}
function Q(e, t, a) {
const i = a[e].dataset.ilb2Id ?? e.toString();
let o = M(
function K(e, n, r) {
const i = r[e].dataset.ilb2Id ?? e.toString();
let o = q(
document.location.search,

@@ -41,8 +40,8 @@ "imageLightboxIndex",

);
const n = {
const t = {
imageLightboxIndex: i,
imageLightboxSet: ""
};
t !== void 0 && (n.imageLightboxSet = t, o = M(o, "imageLightboxSet", t)), window.history.pushState(
n,
n !== void 0 && (t.imageLightboxSet = n, o = q(o, "imageLightboxSet", n)), window.history.pushState(
t,
"",

@@ -52,223 +51,266 @@ document.location.pathname + o

}
function P(e, t, a) {
if (T("imageLightboxSet") !== e)
function J(e, n, r) {
if (Q("imageLightboxSet") !== e)
return;
const i = T("imageLightboxIndex");
const i = Q("imageLightboxIndex");
if (i === void 0)
return;
let o = t.index('[data-ilb2-id="' + i + '"]');
o < 0 && (o = parseInt(i)), a(o, !0);
let o = n.findIndex((t) => t.dataset.ilb2Id === i);
o < 0 && (o = parseInt(i, 10)), r(o, !0);
}
function X(e, t, a, i, o, n, c) {
const u = e.originalEvent.state;
if (u === null) {
n(!0);
function U(e, n, r, i, o, t, s) {
const f = e.state;
if (!f || Object.keys(f).length === 0) {
t(!0);
return;
}
if (u.imageLightboxSet !== t)
if (f.imageLightboxSet !== n)
return;
const g = u.imageLightboxIndex;
if (g === void 0) {
n(!0);
const u = f.imageLightboxIndex;
if (u === void 0) {
t(!0);
return;
}
let b = a.get().findIndex((I) => I.dataset.ilb2Id === g);
if (b < 0 && (b = parseInt(g)), i === null) {
o(b, !0);
let m = r.findIndex(
(h) => h.dataset.ilb2Id === u
);
if (m < 0 && (m = parseInt(u, 10)), i === null) {
o(m, !0);
return;
}
c(
b,
b > i ? w.Right : w.Left,
s(
m,
m > i ? y.Right : y.Left,
!0
);
}
const L = r("<div/>", {
id: "ilb-container"
});
function _(e, t) {
L.removeClass("ilb-overlay"), r("body").addClass("ilb-body"), r("body").append(L), e && L.on("click.ilb7 touchend.ilb7", () => (t(), !1));
const g = document.createElement("div");
g.setAttribute("id", "ilb-container");
let N = null;
function G(e, n, r) {
g.classList.remove("ilb-overlay"), document.body.classList.add("ilb-body"), document.body.appendChild(g), n && (N = (i) => {
i.stopPropagation(), r();
}, g.addEventListener("click", N), g.addEventListener("touchend", N)), g.style.transition = `opacity ${e.toString()}ms ease`, setTimeout(() => {
g.style.opacity = "1";
}, 50);
}
function j() {
L.addClass("ilb-overlay");
function Y() {
g.classList.add("ilb-overlay");
}
function B() {
L.remove(), L.empty(), r("body").removeClass("ilb-body");
function Z() {
g.style.opacity = "0";
}
function k(e, t) {
L.trigger(e, t);
function _() {
N !== null && (g.removeEventListener("click", N), g.removeEventListener("touchend", N)), g.remove(), g.textContent = "", document.body.classList.remove("ilb-body");
}
function O() {
return L;
function E() {
return g;
}
const H = r("<div/>").attr("id", "ilb-activity-indicator").append(r("<div/>"));
function R() {
O().append(H);
const H = document.createElement("div");
H.setAttribute("id", "ilb-activity-indicator");
H.appendChild(document.createElement("div"));
function V() {
E().appendChild(H);
}
function V() {
function j() {
H.remove();
}
const W = r("<div/>", {
class: "ilb-arrow",
id: "ilb-arrow-left"
}), z = r("<div/>", {
class: "ilb-arrow",
id: "ilb-arrow-right"
const I = document.createElement("div");
I.classList.add("ilb-button", "ilb-arrow");
I.setAttribute("id", "ilb-arrow-left");
const O = document.createElement("div");
O.classList.add("ilb-button", "ilb-arrow");
O.setAttribute("id", "ilb-arrow-right");
let k = null, C = null;
function ee(e, n) {
k = (r) => {
r.stopPropagation(), e();
}, C = (r) => {
r.stopPropagation(), n();
}, I.addEventListener("click", k), I.addEventListener("touchend", k), O.addEventListener("click", C), O.addEventListener("touchend", C), E().append(I, O);
}
function te() {
I.remove(), k !== null && (I.removeEventListener("click", k), I.removeEventListener("touchend", k)), C !== null && (O.removeEventListener("click", C), O.removeEventListener("touchend", C)), k = null, C = null;
}
const L = document.createElement("caption");
L.setAttribute("id", "ilb-caption");
L.textContent = "&nbsp;";
L.addEventListener("click", (e) => {
e.stopPropagation();
});
function U(e, t) {
O().append(
W.on("click.ilb7 touchend.ilb7", () => (e(), !1)),
z.on("click.ilb7 touchend.ilb7", () => (t(), !1))
function ne(e, n) {
e !== "" ? (E().appendChild(L), L.style.transition = `opacity ${n.toString()}ms ease`, setTimeout(() => {
L.style.opacity = "1";
}, 1), L.textContent = e) : (L.style.opacity = "0", setTimeout(() => {
L.remove();
}, n));
}
const R = document.createElement("button");
R.classList.add("ilb-button");
R.setAttribute("id", "ilb-close-button");
let D = null;
function ie(e) {
D = (n) => {
n.stopPropagation(), e();
}, R.addEventListener("click", D), E().appendChild(R);
}
function oe() {
D !== null && R.removeEventListener("click", D), R.remove();
}
const ae = (
// eslint-disable-next-line compat/compat -- The prefixed version fixes the incompatibility
document.fullscreenEnabled || (document.webkitFullscreenEnabled ?? !1)
);
function re() {
return (
// eslint-disable-next-line compat/compat -- The prefixed version fixes the incompatibility
document.fullscreenElement ?? document.webkitFullscreenElement ?? null
);
}
const F = r("<div/>", {
id: "ilb-caption",
html: "&nbsp;"
const le = (e) => {
(e.requestFullscreen || e.webkitRequestFullScreen).call(e);
}, se = () => {
(document.exitFullscreen || document.webkitExitFullscreen).call(document);
};
function de() {
re() === null ? le(E()) : se();
}
const M = document.createElement("button");
M.classList.add("ilb-button");
M.setAttribute("id", "ilb-fullscreen-button");
M.innerHTML = "&#x26F6;";
M.addEventListener("click", (e) => {
e.stopPropagation(), de();
});
function G() {
O().append(F);
function ce() {
E().appendChild(M);
}
function J(e) {
e !== null ? (F.css("display", ""), F.text(e)) : F.css("display", "none");
function ue() {
M.remove();
}
const Y = r("<div/>", {
id: "ilb-close-button"
});
function Z(e) {
O().append(
Y.on("click.ilb7", () => (e(), !1))
);
}
function ee(e, t, a) {
let i = 0, o = 0, n = r('<img id="ilb-image" />').attr(
"src",
e.attr("href")
);
const c = r(
'<div class="ilb-image-container">'
).append(n);
let u;
const g = e.data("ilb2Video") !== void 0;
g && ([n, u] = a.element(
e.data("ilb2VideoId")
));
function b(d, f, h, S) {
if (t.quitOnImgClick)
return S(), !1;
const v = d.target;
return (d.pageX - v.offsetLeft) / v.width <= 1 / 3 ? f() : h(), !1;
function fe(e, n, r) {
let i = 0, o = 0, t = document.createElement("img");
t.setAttribute("id", "ilb-image"), t.setAttribute("src", e.getAttribute("href") ?? "");
const s = document.createElement("div");
s.classList.add("ilb-image-container");
let f;
const u = e.dataset.ilb2VideoId;
let m = e.dataset.ilb2Video !== void 0 && u !== void 0;
if (m) {
const c = r.get(u);
c !== void 0 ? [t, f] = c.element() : m = !1;
}
function I(d, f, h, S) {
!g && !("ontouchstart" in window) && n.on(
"click.ilb7",
(v) => b(v, f, h, S)
), n.on("touchstart.ilb7", (v) => {
i = v.originalEvent.touches[0].pageX, n.css("transition-property", "opacity");
}).on("touchmove.ilb7", (v) => {
o = v.originalEvent.touches[0].pageX - i, n.css("left", o.toString() + "px");
}).on("touchend.ilb7 touchcancel.ilb7", () => (n.css("transition-property", "left, opacity"), o > 50 ? (f(), !1) : o < -50 ? (h(), !1) : (n.css("left", "0"), !0))), d();
s.appendChild(t);
function h(c, v, b, F) {
if (m) {
const a = r.get(u);
if ((a == null ? void 0 : a.shouldAutoplay()) === !0) {
const [l, d] = a.element();
d ? l.play() : l.autoplay = !0;
}
} else
t.addEventListener("click", (a) => {
if (a.stopPropagation(), n.quitOnImgClick) {
F();
return;
}
(a.pageX - t.offsetLeft) / t.width <= 1 / 3 ? v() : b();
});
t.addEventListener("touchstart", (a) => {
i = a.touches[0].pageX, t.style.transitionProperty = "opacity";
}), t.addEventListener("touchmove", (a) => {
o = a.touches[0].pageX - i, t.style.left = `${o.toString()}px`;
}), t.addEventListener("touchend", (a) => {
a.stopPropagation(), t.style.transitionProperty = "left, opacity", o > 50 && v(), o < -50 && b(), t.style.left = "0";
}), t.addEventListener("touchcancel", (a) => {
a.stopPropagation(), t.style.transitionProperty = "left, opacity", t.style.left = "0";
}), c();
}
function C(d, f) {
O().append(c);
const h = Math.abs(100 - t.gutter);
n.css({
// eslint-disable-next-line @typescript-eslint/naming-convention -- CSS property
"max-height": h.toString() + "%",
// eslint-disable-next-line @typescript-eslint/naming-convention -- CSS property
"max-width": h.toString() + "%",
left: (-100 * d).toString() + "px",
transition: "all ease " + t.animationSpeed.toString() + "ms",
// eslint-disable-next-line @typescript-eslint/naming-convention -- CSS property
"transition-property": "left, opacity",
opacity: "0"
}), n.show(f);
function x(c, v) {
E().appendChild(s);
const b = Math.abs(100 - n.gutter);
t.style.maxHeight = `${b.toString()}%`, t.style.maxWidth = `${b.toString()}%`, t.style.left = `${(-100 * c).toString()}px`, t.style.transition = `all ease ${n.animationSpeed.toString()}ms`, setTimeout(v, 50);
}
function E(d, f) {
n.on("error.ilb7", f), u === !0 ? d() : n.on("load.ilb7", d).on("loadedmetadata.ilb7", d);
function A(c, v) {
t.addEventListener("error", v), f === !0 ? c() : (t.addEventListener("load", c), t.addEventListener("loadedmetadata", c));
}
function y(d, f, h, S) {
n.css({
left: "0",
opacity: "1"
}), setTimeout(() => {
I(d, f, h, S);
}, t.animationSpeed);
function p(c, v, b, F) {
t.style.left = "0", t.style.opacity = "1", setTimeout(() => {
h(c, v, b, F);
}, n.animationSpeed);
}
function m(d, f) {
if (d !== w.None) {
const h = parseInt(n.css("left"), 10) || 0;
n.css(
"left",
(h + 100 * d).toString() + "px"
);
function S(c, v) {
if (c !== y.None) {
const b = parseInt(t.style.left, 10) || 0;
t.style.left = `${(b + 100 * c).toString()}px`;
}
n.css("opacity", "0"), setTimeout(() => {
f();
}, t.animationSpeed);
t.style.opacity = "0", setTimeout(() => {
v();
}, n.animationSpeed);
}
function x() {
c.remove();
function $() {
s.remove();
}
return {
addToDOM: C,
startLoading: E,
transitionIn: y,
transitionOut: m,
removeFromDOM: x
addToDOM: x,
removeFromDOM: $,
startLoading: A,
transitionIn: p,
transitionOut: S
};
}
const te = document.fullscreenEnabled || (document.webkitFullscreenEnabled ?? !1);
function ie() {
const e = O().get(0), t = () => {
(e.requestFullscreen || e.webkitRequestFullScreen).call(e);
}, a = () => {
(document.exitFullscreen || document.webkitExitFullscreen).call(document);
};
!document.fullscreenElement && !document.webkitFullscreenElement ? t() : a();
let T = null;
function me(e, n, r, i) {
e.enableKeyboard && (T = (o) => {
o.key === "Escape" && (o.preventDefault(), n()), o.key === "ArrowLeft" && (o.preventDefault(), r()), o.key === "ArrowRight" && (o.preventDefault(), i());
}, document.addEventListener("keyup", T));
}
function ne(e, t, a, i) {
e.fullscreen && te && r(document).on("keyup.ilb7", (o) => o.which === 13 ? (ie(), !1) : !0), e.enableKeyboard && r(document).on("keyup.ilb7", (o) => e.quitOnEscKey && o.which === 27 ? (t(), !1) : o.which === 37 ? (a(), !1) : o.which === 39 ? (i(), !1) : !0);
function ve() {
T !== null && document.removeEventListener("keyup", T);
}
function oe() {
r(document).off("keyup.ilb7");
const w = document.createElement("div");
w.classList.add("ilb-navigation");
function W(e, n, r, i) {
for (let o = 0; o < e.length; o++) {
const t = document.createElement("button");
t.style.transition = `background-color ${i.toString()}ms ease`;
const s = () => {
const f = n();
if (t.classList.contains("ilb-navigation-active") || f === null || t.parentNode === null)
return;
const u = Array.prototype.indexOf.call(
t.parentNode.childNodes,
t
), m = u < f ? y.Left : y.Right;
r(u, m);
};
t.addEventListener("click", s), t.addEventListener("touchend", s), w.appendChild(t);
}
}
const ae = r("<a/>", {
href: "#"
}), q = r("<div/>", {
class: "ilb-navigation"
});
function K(e) {
for (let t = 0; t < e.length; t++)
q.append(ae.clone());
function X(e) {
var n, r;
for (let i = 0; i < w.children.length; i++)
(n = w.children.item(i)) == null || n.classList.remove("ilb-navigation-active");
(r = w.children.item(e)) == null || r.classList.add("ilb-navigation-active");
}
function A(e) {
q.children().removeClass("ilb-navigation-active").eq(e).addClass("ilb-navigation-active");
}
function re(e, t, a) {
q.empty(), K(e()), A(t()), O().append(q), q.on("click.ilb7 touchend.ilb7", () => !1).children().on("click.ilb7 touchend.ilb7", function() {
const i = r(this);
if (e().eq(i.index()).attr("href") === r("#ilb-image").attr("src"))
return !1;
const o = i.index() < t() ? w.Left : w.Right;
return a(i.index(), o), !1;
function ge(e, n, r, i) {
w.textContent = "", W(e, n, r, i);
const o = n();
o !== null && X(o), E().appendChild(w), w.addEventListener("click", (t) => {
t.stopPropagation();
}), w.addEventListener("touchend", (t) => {
t.stopPropagation();
});
}
function le(e, t) {
let a = e.data("ilb2Id");
a === void 0 && (a = "a" + ((1 + Math.random()) * 65536 | 0).toString(16)), e.data("ilb2VideoId", a);
const i = a, o = r(
"<video id='ilb-image' preload='metadata' data-ilb2-video-id='" + i + "'>"
);
let n = !1, c = !1, u, g;
r.each(t, (E, y) => {
switch (E) {
function pe(e, n) {
let r = e.dataset.ilb2Id;
r === void 0 && (r = `a${((1 + Math.random()) * 65536 | 0).toString(16)}`), e.dataset.ilb2VideoId = r;
const i = r, o = document.createElement("video");
o.setAttribute("id", "ilb-image"), o.preload = "metadata", o.dataset.ilb2VideoId = i;
let t = !1, s = !1;
for (const [h, x] of Object.entries(n))
switch (h) {
case "autoplay":
c = !0;
s = !0;
break;
case "height":
u = y;
break;
case "width":
g = y;
break;
case "controls":

@@ -280,214 +322,240 @@ case "loop":

case "src":
o.attr(E, y);
o.setAttribute(h, x.toString());
break;
}
}), t.sources && r.each(t.sources, (E, y) => {
let m = r("<source>");
r.each(y, (x, d) => {
m = m.attr(x, d);
}), o.append(m);
}), o.on("loadedmetadata.ilb7", () => {
n = !0;
if (n.sources)
for (const h of n.sources) {
const x = document.createElement("source");
for (const [A, p] of Object.entries(h))
x.setAttribute(A, p);
o.appendChild(x);
}
o.addEventListener("loadedmetadata", () => {
t = !0;
});
function b() {
function f() {
return i;
}
function I() {
return [g ?? o.width(), u ?? o.height()];
function u() {
return [o, t];
}
function C() {
return c && (n ? o.get(0).play() : o.attr("autoplay", "autoplay")), [o, n];
function m() {
return s;
}
return {
id: b,
dimensions: I,
element: C
element: u,
id: f,
shouldAutoplay: m
};
}
function ce() {
function be() {
const e = [];
function t(o) {
o.each((n, c) => {
const u = r(c).data("ilb2Video");
u !== void 0 && e.push(le(r(c), u));
});
function n(i) {
for (const o of i) {
const t = o.dataset.ilb2Video;
t !== void 0 && e.push(
pe(o, JSON.parse(t))
);
}
}
function a(o) {
const n = e.find((c) => c.id() === o);
if (n !== void 0)
return n.dimensions();
function r(i) {
return e.find((o) => o.id() === i);
}
function i(o) {
return e.find((c) => c.id() === o).element();
}
return {
add: t,
dimensions: a,
element: i
add: n,
get: r
};
}
function de(e, t, a) {
let i = r();
const o = ce();
let n = null, c = null;
function he(e, n, r) {
const i = [], o = be();
let t = null, s = null;
function f() {
return n;
}
function u() {
return t;
}
function g() {
return i;
}
function b() {
return n;
}
function I(l, s) {
const p = c;
p.transitionOut(l, () => {
p.removeFromDOM(), s == null || s();
function m(a, l) {
if (s === null)
return;
const d = s;
d.transitionOut(a, () => {
d.removeFromDOM(), l == null || l();
});
}
function C() {
c == null || c.transitionIn(
V,
function h() {
s == null || s.transitionIn(
j,
/* eslint-disable @typescript-eslint/no-use-before-define -- Cyclical dependencies */
d,
f,
m
$,
c,
p
);
}
function E(l) {
c == null || c.addToDOM(l, () => {
const s = i.get(n);
if (J(
s.dataset.ilb2Caption ?? r(s).find("img").attr("alt") ?? null
), C(), e.preloadNext && n + 1 < i.length) {
const p = i.eq(n + 1);
r("<img />").attr("src", p.attr("href"));
function x(a) {
s == null || s.addToDOM(a, () => {
var d;
if (t === null)
return;
const l = i[t];
if (e.caption && ne(
l.dataset.ilb2Caption ?? ((d = l.getElementsByTagName("img").item(0)) == null ? void 0 : d.alt) ?? "",
e.animationSpeed
), h(), e.preloadNext && t + 1 < i.length) {
const P = i[t + 1];
document.createElement("img").setAttribute(
"src",
P.getAttribute("href") ?? ""
);
}
k("loaded.ilb2");
E().dispatchEvent(new Event("ilb:loaded", { bubbles: !0 }));
});
}
function y(l, s) {
const p = ee(
i.eq(l),
e,
o
);
p.startLoading(
function A(a, l) {
const d = fe(i[a], e, o);
t = a, s = d, d.startLoading(
() => {
n = l, c = p, E(s);
x(l);
},
() => {
V();
j();
}
);
}
function m(l = !1) {
n !== null && (e.activity && R(), oe(), e.history && !l && $(), k("quit.ilb2"), I(w.None, () => {
n = null, c = null, B();
function p(a = !1) {
t !== null && (e.activity && V(), ve(), e.history && !a && z(), E().dispatchEvent(new Event("ilb:quit", { bubbles: !0 })), Z(), m(y.None, () => {
t = null, s = null, te(), oe(), ue(), _();
}));
}
function x(l, s, p = !1) {
n !== null && (e.history && !p && Q(l, u(), g()), e.activity && R(), A(l), I(s), y(l, s));
function S(a, l, d = !1) {
t !== null && (e.history && !d && K(a, f(), u()), e.activity && V(), X(a), m(l), A(a, l));
}
function d() {
if (n === null)
function $() {
if (t === null)
return;
let l = n - 1;
if (n === 0)
let a = t - 1;
if (t === 0) {
if (e.quitOnEnd) {
m();
p();
return;
} else
l = i.length - 1;
k("previous.ilb2", i.eq(l)), x(l, w.Left);
}
a = i.length - 1;
}
i[a].dispatchEvent(
new Event("ilb:previous", { bubbles: !0 })
), S(a, y.Left);
}
function f() {
if (n === null)
function c() {
if (t === null)
return;
let l = n + 1;
if (n === i.length - 1)
let a = t + 1;
if (t === i.length - 1) {
if (e.quitOnEnd) {
m();
p();
return;
} else
l = 0;
k("next.ilb2", i.eq(l)), x(l, w.Right);
}
a = 0;
}
i[a].dispatchEvent(
new Event("ilb:next", { bubbles: !0 })
), S(a, y.Right);
}
function h(l, s = !1) {
_(e.quitOnDocClick, m), e.activity && R(), ne(e, m, d, f), e.arrows && U(d, f), e.caption && G(), e.button && Z(m), e.navigation && re(g, b, x), e.overlay && j(), e.history && !s && Q(l, u(), g()), k("start.ilb2", i.eq(l)), y(l, w.None);
function v(a, l = !1) {
t === null && (G(e.animationSpeed, e.quitOnDocClick, p), e.activity && V(), me(e, p, $, c), e.arrows && ee($, c), e.button && ie(p), e.fullscreen && ae && ce(), e.overlay && Y(), e.history && !l && K(a, f(), u()), i[a].dispatchEvent(
new Event("ilb:start", { bubbles: !0 })
), A(a, y.None), e.navigation && ge(
u(),
() => t,
S,
e.animationSpeed
));
}
function S(l) {
const s = i.index(l);
s < 0 || h(s);
function b(a) {
const l = i.indexOf(a);
l < 0 || v(l);
}
function v(l) {
const s = l.not(i).filter(
(p, N) => N.tagName.toLowerCase() === "a" && (new RegExp(".(" + e.allowedTypes + ")$", "i").test(
N.href
) || N.dataset.ilb2Video !== void 0)
function F(a) {
const l = a.filter((d) => !i.includes(d)).filter(
(d) => d.tagName.toLowerCase() === "a" && (new RegExp(`.(${e.allowedTypes})$`, "i").test(d.href) || d.dataset.ilb2Video !== void 0)
);
o.add(s), i = i.add(s), s.on("click.ilb7", (p) => (S(r(p.delegateTarget)), !1)), K(s);
o.add(l), i.push(...l);
for (const d of l)
d.addEventListener("click", (P) => {
P.preventDefault(), P.stopPropagation(), b(d);
});
W(
l,
() => t,
S,
e.animationSpeed
);
}
return v(a), e.history && r(window).on("popstate.ilb7", (l) => {
X(l, u(), g(), b(), h, m, x);
return F(r), e.history && window.addEventListener("popstate", (a) => {
U(a, f(), u(), t, v, p, S);
}), {
set: u,
images: g,
currentIndex: b,
addImages: v,
openWithImage: S,
open: h,
close: m,
previous: d,
next: f,
change: x
addImages: F,
close: p,
images: u,
next: c,
open: v,
openWithImage: b,
previous: $,
set: f
};
}
r.fn.imageLightbox = function(e) {
const t = r.extend(
{
allowedTypes: "png|jpg|jpeg|gif",
class Ee {
constructor(n, r) {
const i = {
activity: !0,
allowedTypes: "",
animationSpeed: 250,
activity: !1,
arrows: !1,
button: !1,
arrows: !0,
button: !0,
caption: !1,
enableKeyboard: !0,
fullscreen: !0,
gutter: 10,
history: !1,
fullscreen: !1,
gutter: 10,
// percentage of client height
navigation: !1,
overlay: !1,
overlay: !0,
preloadNext: !0,
quitOnEnd: !1,
quitOnDocClick: !0,
quitOnEnd: !0,
quitOnImgClick: !1,
quitOnDocClick: !0,
quitOnEscKey: !0
},
e
), a = de(
t,
r(this).data("imagelightbox"),
r(this)
);
return this.addToImageLightbox = (i) => {
a.addImages(i);
}, this.openHistory = () => {
t.history && P(
a.set(),
a.images(),
(i, o) => {
a.open(i, o);
...r
};
this.s = he(
i,
n.length > 0 ? n[0].dataset.imagelightbox ?? "" : "",
Array.from(n)
), i.history && this.openHistory();
}
addImages(n) {
this.s.addImages(Array.from(n));
}
close() {
this.s.close();
}
next() {
this.s.next();
}
open(n) {
n !== void 0 ? this.s.openWithImage(n) : this.s.open(0);
}
openHistory() {
J(
this.s.set(),
this.s.images(),
(n, r) => {
this.s.open(n, r);
}
);
}, this.openHistory(), this.loadPreviousImage = () => {
a.previous();
}, this.loadNextImage = () => {
a.next();
}, this.quitImageLightbox = function() {
return a.close(), this;
}, this.startImageLightbox = (i) => {
i !== void 0 ? a.openWithImage(i) : a.open(0);
}, this;
}
previous() {
this.s.previous();
}
}
export {
Ee as ImageLightbox
};
//# sourceMappingURL=imagelightbox.js.map

57

package.json
{
"name": "imagelightbox",
"version": "2.1.0",
"version": "3.0.0",
"description": "Image Lightbox, Responsive and Touch‑friendly",

@@ -17,3 +17,10 @@ "homepage": "https://marekdedic.github.io/imagelightbox",

"require": "./dist/imagelightbox.umd.cjs",
"style": "./dist/imagelightbox.min.css"
"style": "./dist/imagelightbox.min.css",
"types": "./types/imagelightbox.d.ts"
},
"./jquery": {
"import": "./dist/imagelightbox.jquery.js",
"require": "./dist/imagelightbox.jquery.umd.cjs",
"style": "./dist/imagelightbox.min.css",
"types": "./types/imagelightbox.jquery.d.ts"
}

@@ -23,34 +30,33 @@ },

"dist",
"!dist/webpack-stats.json",
"!dist/webpack-stats.jquery.json",
"!dist/webpack-stats.native.json",
"docs",
"types",
"CHANGELOG.md"
"LICENSE",
"README.md"
],
"dependencies": {
"jquery": ">=1.12.4 <4.0.0"
},
"devDependencies": {
"@playwright/test": "^1.42.0",
"@eslint-community/eslint-plugin-eslint-comments": "^4.4.0",
"@eslint/js": "^9.9.1",
"@playwright/test": "^1.47.0",
"@types/jquery": "^3.3.31",
"@types/node": "^20.11.20",
"@typescript-eslint/eslint-plugin": "^7.0.1",
"@typescript-eslint/parser": "^7.0.1",
"@types/node": "^22.0.0",
"autoprefixer": "^10.4.17",
"eslint": "^8.21.0",
"eslint": "^9.9.0",
"eslint-config-prettier": "^9.0.0",
"eslint-plugin-compat": "^4.0.2",
"eslint-plugin-deprecation": "^2.0.0",
"eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-compat": "^6.0.0",
"eslint-plugin-perfectionist": "^3.2.0",
"eslint-plugin-playwright": "^1.3.1",
"eslint-plugin-prefer-arrow-functions": "^3.2.4",
"eslint-plugin-prettier": "^5.0.0",
"eslint-plugin-simple-import-sort": "^12.0.0",
"eslint-plugin-prefer-arrow-functions": "^3.4.0",
"eslint-plugin-prettier": "^5.2.1",
"globals": "^15.9.0",
"jquery": ">=1.12.4 <4.0.0",
"npm-run-all": "^4.1.5",
"nyc": "^15.1.0",
"playwright": "^1.42.0",
"nyc": "^17.0.0",
"playwright": "^1.47.0",
"playwright-test-coverage": "^1.2.12",
"postcss": "^8.4.35",
"prettier": "^3.0.0",
"rimraf": "^5.0.1",
"rollup-plugin-webpack-stats": "^0.2.4",
"rimraf": "^6.0.1",
"rollup-plugin-webpack-stats": "^1.0.1",
"stylelint": "^16.3.1",

@@ -61,2 +67,3 @@ "stylelint-config-standard": "^36.0.0",

"typescript": "^5.3.3",
"typescript-eslint": "^8.3.0",
"vite": "^5.1.4",

@@ -73,3 +80,5 @@ "vite-plugin-istanbul": "^6.0.0"

"build:docs": "vite build --config docs.vite.config.ts",
"build:lib": "vite build",
"build:lib:native": "vite build --config native.vite.config.ts",
"build:lib:jquery": "vite build --config jquery.vite.config.ts",
"build:lib": "run-p -c --aggregate-output build:lib:*",
"build": "run-p -c --aggregate-output build:*",

@@ -80,3 +89,3 @@ "start": "vite --config docs.vite.config.ts",

"lint:css": "run-p -c --aggregate-output lint:css:*",
"lint:ts:eslint": "eslint --color 'src/**/*.ts' 'tests/**/*.ts' 'types/**/*.ts' 'docs.vite.config.ts' 'playwright.config.js' 'postcss.config.js' 'vite.config.ts'",
"lint:ts:eslint": "eslint --color 'src/**/*.ts' 'tests/**/*.ts' 'types/**/*.ts' '*.config.{js,ts}'",
"lint:ts:typecheck": "tsc --noEmit",

@@ -83,0 +92,0 @@ "lint:ts": "run-p -c --aggregate-output lint:ts:*",

342

README.md

@@ -1,10 +0,10 @@

imagelightbox
=============
# imagelightbox
![NPM Version](https://img.shields.io/npm/v/imagelightbox)
![GitHub](https://img.shields.io/github/license/marekdedic/imagelightbox)
![GitHub CI](https://img.shields.io/github/actions/workflow/status/marekdedic/imagelightbox/CI.yml?logo=github)
![Codecov](https://img.shields.io/codecov/c/github/marekdedic/imagelightbox/master?logo=codecov)
![NPM downloads](https://img.shields.io/npm/dm/imagelightbox?logo=npm)
![RelativeCI](https://badges.relative-ci.com/badges/mqvYqDg4xPM2gcxviDAG?branch=master&style=flat)
[![NPM Version](https://img.shields.io/npm/v/imagelightbox?logo=npm)](https://www.npmjs.com/package/imagelightbox)
[![GitHub Actions Workflow Status](https://img.shields.io/github/actions/workflow/status/marekdedic/imagelightbox/CI.yml?branch=master&logo=github)](https://github.com/marekdedic/imagelightbox/actions)
[![Coveralls](https://img.shields.io/coverallsCoverage/github/marekdedic/imagelightbox?branch=master&logo=coveralls)](https://coveralls.io/github/marekdedic/imagelightbox)
[![NPM Downloads](https://img.shields.io/npm/dm/imagelightbox?logo=npm)](https://www.npmjs.com/package/imagelightbox)
[![NPM License](https://img.shields.io/npm/l/imagelightbox)](https://github.com/marekdedic/imagelightbox/blob/master/LICENSE)
[![RelativeCI native bundle](https://badges.relative-ci.com/badges/mqvYqDg4xPM2gcxviDAG?branch=master&style=flat)](https://app.relative-ci.com/projects/mqvYqDg4xPM2gcxviDAG)
[![RelativeCI jquery bundle](https://badges.relative-ci.com/badges/99MW2QOdJusoWoLHsKkr?branch=master&style=flat)](https://app.relative-ci.com/projects/99MW2QOdJusoWoLHsKkr)

@@ -19,203 +19,181 @@ Image Lightbox, Responsive and Touch‑friendly.

* jQuery 1.12 (earlier version not tested), feel free to use jQuery v2 or v3 if you don't need to support older browsers
* All major desktop browsers and versions as well as mobile browsers on Android, iOS and Windows Phone.
* All major desktop browsers and versions as well as mobile browsers on Android and iOS.
## How to install
```sh
$ npm install --save imagelightbox
```
After that include the `dist/imagelightbox.css` and `dist/imagelightbox.umd.cjs` files. Alternatively, you can use the `dist/imagelightbox.js` file if you are using ES6 modules.
If you prefer to use jQuery, there are also jQuery versions available in `dist/imagelightbox.jquery.umd.cjs` or `dist/imagelightbox.jquery.js`. These mostly adapt the interface of the library to work with jQuery types and emit jQuery events. These are here mostly for legacy reasons and their use is discouraged.
## How to use
````javascript
<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$( function()
{
$( selector ).imageLightbox();
});
</script>
````
```html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="node_modules/imagelightbox/dist/imagelightbox.css">
<script src="node_modules/imagelightbox/dist/imagelightbox.umd.cjs"></script>
<script>
new Imagelightbox(
document.querySelectorAll('a[data-imagelightbox="xyz"]'),
)
</script>
</head>
<body>
<a data-imagelightbox="xyz" href="image_1.jpg">
<img src="thumbnail_1.jpg" alt="Caption 1"/>
</a>
<a data-imagelightbox="xyz" href="image_2.jpg">
<img src="thumbnail_2.jpg" alt="Caption 2"/>
</a>
</body>
</html>
```
## Options
The list of options and their default values is:
You can pass an object with options to the `ImageLightbox` constructor as a second argument. The available options are:
````javascript
$( selector ).imageLightbox({
selector: 'a[data-imagelightbox]', // string;
allowedTypes: 'png|jpg|jpeg|gif', // string; use empty string to allow any file type
animationSpeed: 250, // integer;
activity: false, // bool; show activity indicator
arrows: false, // bool; show left/right arrows
button: false, // bool; show close button
caption: false, // bool; show captions
enableKeyboard: true, // bool; enable keyboard shortcuts (arrows Left/Right and Esc)
history: false, // bool; enable image permalinks and history
fullscreen: false, // bool; enable fullscreen (enter/return key)
gutter: 10, // integer; window height less height of image as a percentage
offsetY: 0, // integer; vertical offset in terms of gutter
navigation: false, // bool; show navigation
overlay: false, // bool; display the lightbox as an overlay
preloadNext: true, // bool; silently preload the next image
quitOnEnd: false, // bool; quit after viewing the last image
quitOnImgClick: false, // bool; quit when the viewed image is clicked
quitOnDocClick: true, // bool; quit when anything but the viewed image is clicked
quitOnEscKey: true // bool; quit when Esc key is pressed
});
````
| Option | Type | Default value | Description |
| ---------------- | --------- | ------------- | --- |
| `activity` | `boolean` | `true` | Whether to show an activity indicator when loading or changing the images |
| `allowedTypes` | `string` | `""` | A list of allowed file types. Use an empty string to allow any type. |
| `animationSpeed` | `number` | `250` | The duration (in milliseconds) of all animations |
| `arrows` | `boolean` | `true` | Whether to show navigation arrows |
| `button` | `boolean` | `true` | Whether to show a close button |
| `caption` | `boolean` | `false` | Whether to show image captions, if they are available |
| `enableKeyboard` | `boolean` | `true` | Whether to enable keyboard navigation (previous/next with arrows, Escape to exit) |
| `history` | `boolean` | `false` | Whether to save the current lightbox state to the browser history and add perma-linkable URLs |
| `fullscreen` | `boolean` | `true` | Whether to enable the availability to show the lightbox in fullscreen mode |
| `gutter` | `number` | `10` | The minimum amount of free space (in % relative to the window size) to always keep around the image |
| `navigation` | `boolean` | `false` | Whether to show a navigation (panel with clickable dots for each image) |
| `overlay` | `boolean` | `true` | Whether to show a dark page overlay under the image |
| `preloadNext` | `boolean` | `true` | Whether to start preloading the next image upon navigation |
| `quitOnEnd` | `boolean` | `true` | Whether to close the lightbox when navigation past the last image. Alternatively, the lightbox just loops to the first image. |
| `quitOnImgClick` | `boolean` | `false` | Whether to close the lightbox when the image is clicked. Alternatively, the previous/next image is shown based on the position of the click. Never quits on touch devices. |
| `quitOnDocClick` | `boolean` | `true` | Whether to close the lightbox when clicking outside of the image. |
## Starting lightbox with JavaScript call
## Opening the lightbox with a JavaScript call
imageLightBox can be started with *startImageLightbox()* JavaScript function call.
The lightbox can be opened with the `open()` method call.
###### Example:
````javascript
<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$( function()
{
var gallery = $( selector ).imageLightbox();
gallery.startImageLightbox();
});
</script>
````
```js
const gallery = new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="xyz"]'),
);
gallery.open();
```
###### Example: Open specific image
````javascript
<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$( function()
{
var gallery = $( selector ).imageLightbox();
var $image = $ ( image_selector );
gallery.startImageLightbox( $image );
});
</script>
````
```js
const gallery = new ImageLightbox(
document.querySelectorAll('a[data-imagelightbox="xyz"]'),
);
gallery.open(
document.querySelectorAll('a[href="image_1.jpg"]').item(0),
);
```
## Adding captions to lightbox
add an "ilb2-caption" data-attribute to the element, fallback value is the alt-attribute of the thumbnail-image
To use captions, add an "ilb2-caption" data-attribute to the element, or as a fallback value, the `alt` attribute of the thumbnail image is used.
````html
<a data-imagelightbox="x" data-ilb2-caption="caption text"
href="image.jpg">
<img src="thumbnail.jpg" alt="fallback caption"/>
</a>
````
```html
<a data-imagelightbox="xyz" data-ilb2-caption="caption text" href="image.jpg">
<img src="thumbnail.jpg" alt="Fallback caption" />
</a>
```
## Fullscreen
Simply set the `fullscreen` option to true to enable the option. If the user's browser supports the fullscreen API,
they can switch to fullscreen mode by pressing enter.
To enable fullscreen, set the `fullscreen` option to true. The user can then launch the fullscreen view by pressing the Enter key.
## Video
Video can be displayed in imagelightbox, by including a `data-ilb2-video` attribute in the link. This attribute should contain a JSON-encoded list of parameters as they would be in an HTML5 video tag. For multiple video sources, the `sources` field can be added, containing a list of similarily encoded HTML5 source tags.
Videos can be displayed in lightbox by including a `data-ilb2-video` attribute in the link. This attribute should contain a JSON-encoded list of parameters as they would be in an HTML5 video tag. For multiple video sources, the `sources` field can be added, containing a list of similarily encoded HTML5 source tags.
````html
<a data-ilb2-video='{"controls":"controls", "autoplay":"autoplay", "sources":[{"src":"images/video.m4v", "type":"video/mp4"}], "width": 1920, "height": 1080}' data-imagelightbox="x">
<img src="images/video-thumb.jpg">
</a>
````
```html
<a data-imagelightbox="xyz" data-ilb2-video='{"controls": "controls", "autoplay": "autoplay", "sources": [{"src": "images/video.m4v", "type": "video/mp4"}], "width": 1920, "height": 1080}'>
<img src="images/video-thumb.jpg">
</a>
```
## Hooks
## Custom events
Image Lightbox now triggers unique events upon start, finish, and when either the next or previous image is requested.
These events are, respectively, "start.ilb2", "quit.ilb2", "loaded.ilb2", "next.ilb2", and "previous.ilb2".
The lightbox dispatches custom events upon opening, closing, image loading, and when either the next or previous image is requested (beware that these are not dispatched when the image is changed in other ways, such as the navigation panel).
These events are, respectively, `ilb:start`, `ilb:quit`, `ilb:loaded`, `ilb:next`, and `ilb:previous`.
Usage example:
````javascript
$(document)
.on("start.ilb2", function (_, e) {
console.log("Image Lightbox has started on element: ");
console.log(e);
})
.on("next.ilb2", function (_, e) {
```js
document.addEventListener("ilb:start", (e) => {
console.log("The lightbox was started with element: ");
console.log(e.target);
});
document.addEventListener("ilb:quit", () => {
console.log("The lightbox was closed.");
});
document.addEventListener("ilb:loaded", () => {
console.log("A new image was loaded");
});
document.addEventListener("ilb:previous", (e) => {
console.log("Previous image: ");
console.log(e.target);
});
document.addEventListener("ilb:next", (e) => {
console.log("Next image: ");
console.log(e);
})
.on("previous.ilb2", function (_, e) {
console.log("Previous image: ");
console.log(e);
})
.on("quit.ilb2", function () {
console.log("Image Lightbox has quit.");
});
````
console.log(e.target);
});
```
## Using multiple sets
## Using multiple lighboxes
As of commit bf2b4db, imageLightbox supports "sets."
A set is defined by the links with a common value for the "data-imagelightbox" attribute.
Imagelightbox supports multiple independent image sets on the same page, each initialized indepently.
For example:
````html
<a data-imagelightbox="a"
href="image_1.jpg">
<img src="thumbnail_1.jpg" alt="caption"/>
</a>
<a data-imagelightbox="a"
href="image_2.jpg">
<img src="thumbnail_2.jpg" alt="caption"/>
</a>
```html
<a data-imagelightbox="a" href="image_1.jpg">
<img src="thumbnail_1.jpg" alt="caption"/>
</a>
<a data-imagelightbox="a" href="image_2.jpg">
<img src="thumbnail_2.jpg" alt="caption"/>
</a>
<a data-imagelightbox="b"
href="image_3.jpg">
<img src="thumbnail_3.jpg" alt="caption"/>
</a>
<a data-imagelightbox="b"
href="image_4.jpg">
<img src="thumbnail_4.jpg" alt="caption"/>
</a>
````
<a data-imagelightbox="b" href="image_3.jpg">
<img src="thumbnail_3.jpg" alt="caption"/>
</a>
<a data-imagelightbox="b" href="image_4.jpg">
<img src="thumbnail_4.jpg" alt="caption"/>
</a>
```
When the user clicks any of the thumbnails with a data-imagelightbox value of "a", only those images will appear in the
lightbox. The same is true when clicking an image with data-imagelightbox value of "b" and any other.
If you want unlimited gallerys call this snippet (for example: https://jsfiddle.net/7ow26fcg/):
## Adding images dynamically to lightbox
<i>(Используйте этот код вызова lightbox, если у вас на странице несколько галерей, где у каждой галереи уникальное
значение атрибута data-imagelightbox. Например data-imagelightbox="gallery_1", data-imagelightbox="gallery_2" и т.д.)</i>
More images can be added to the lightbox after it has been initialized.
````javascript
<script>
var attrs = {};
var classes = $("a[data-imagelightbox]").map(function(indx, element){
var key = $(element).attr("data-imagelightbox");
attrs[key] = true;
return attrs;
});
var attrsName = Object.keys(attrs);
###### Example:
attrsName.forEach(function(entry) {
$( "[data-imagelightbox='"+entry+"']" ).imageLightbox({
overlay: true
});
});
</script>
````
```js
const lightbox = new Imagelightbox(
document.querySelectorAll('a[data-imagelightbox="xyz"]'),
)
const newAnchor = document.createElement("a");
newAnchor.dataset.imagelightbox = "xyz";
newAnchor.href = "images/demo4.jpg";
In order to "capture" all possible sets on a give webpage, it is necessary to apply imageLightbox to
"a[data-imagelightbox]"; that is, without specifying a particular data-imagelightbox attribute value.
const newImg = document.createElement("img");
newImg.src = "images/thumb4.jpg";
newAnchor.appendChild(newImg);
## Adding images dynamically to lightbox
lightbox.addImages([newAnchor]);
```
imageLightBox allows adding more images dynamically at runtime
###### Example:
````javascript
<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
<script>
$( function()
{
var gallery = $( selector ).imageLightbox();
var image = $( '<img />' );
gallery.addToImageLightbox( image );
});
</script>
````
## Permalinks & History

@@ -225,33 +203,35 @@

In some cases, this could lead to a different image being opened, for example if new images have been added to the set, or if the order of the images has changed. To solve this issue, whenever the HTML attribute `data-ilb2-id=X` is present in the image tag, this value is used instead of the image index (this means this id has to be different for each image and mustn't change over time).
In some cases, this could lead to a different image being opened, for example if new images have been added to the set, or if the order of the images has changed. To solve this issue, whenever the HTML attribute `data-ilb2-id=X` is present in the image tag, this value is used instead of the image index (this means this id has to be different for each image and mustn't change over time to keep links working).
###### Example:
```javascript
<script src="jquery.js"></script>
<script src="imagelightbox.js"></script>
```html
<a href="image1.jpg" data-imagelightbox="images" data-ilb2-id="img1">
<img src="thumb1.jpg">
</a>
<a href="image2.jpg" data-imagelightbox="images" data-ilb2-id="img2">
<img src="thumb2.jpg">
</a>
<a href="image3.jpg" data-imagelightbox="images" data-ilb2-id="img3">
<img src="thumb3.jpg">
</a>
<a href="image1.jpg" data-imagelightbox="images" data-ilb2-id="img1"><img src="thumb1.jpg"></a>
<a href="image2.jpg" data-imagelightbox="images" data-ilb2-id="img2"><img src="thumb2.jpg"></a>
<a href="image3.jpg" data-imagelightbox="images" data-ilb2-id="img3"><img src="thumb3.jpg"></a>
<script>
$( function()
{
$('a[data-imagelightbox="images"]').imageLightbox({
history: true
});
});
new Imagelightbox(
document.querySelectorAll('a[data-imagelightbox="images"]'),
{
history: true,
},
)
</script>
```
If you want a dynamically added image to be opened after the page load, you have to call `gallery.openHistory()` on the ImageLightbox object yourself after adding the image.
If you want a dynamically add images after the page has loaded and still support direct links to them, you have to call `lightbox.openHistory()` manually on the lightbox object yourself after adding the image.
## Changelog
You can find all notable changes to this project in the [CHANGELOG.md](CHANGELOG.md).
You can find all notable changes to this project in the [GitHub releases](https://github.com/marekdedic/imagelightbox/releases).
## See also
Used by https://wordpress.org/plugins/skaut-google-drive-gallery/

34

types/imagelightbox.d.ts
interface ILBOptions {
activity: boolean;
allowedTypes: string;
animationSpeed: number;
activity: boolean;
arrows: boolean;

@@ -9,22 +9,32 @@ button: boolean;

enableKeyboard: boolean;
history: boolean;
fullscreen: boolean;
gutter: number;
history: boolean;
navigation: boolean;
overlay: boolean;
preloadNext: boolean;
quitOnDocClick: boolean;
quitOnEnd: boolean;
quitOnImgClick: boolean;
quitOnDocClick: boolean;
quitOnEscKey: boolean;
}
interface JQuery {
imageLightbox(opts?: Partial<ILBOptions>): JQuery;
addToImageLightbox(elements: JQuery): void;
openHistory(): void;
loadPreviousImage(): void;
loadNextImage(): void;
quitImageLightbox(): void;
startImageLightbox(element?: JQuery): void;
export class ImageLightbox {
public constructor(
images:
| Array<HTMLAnchorElement>
| HTMLCollectionOf<HTMLAnchorElement>
| NodeListOf<HTMLAnchorElement>,
options?: Partial<ILBOptions>,
);
public addImages(
images:
| Array<HTMLAnchorElement>
| HTMLCollectionOf<HTMLAnchorElement>
| NodeListOf<HTMLAnchorElement>,
): void;
public close(): void;
public next(): void;
public open(image?: HTMLAnchorElement): void;
public openHistory(): void;
public previous(): void;
}
CHANGELOG.md
docs/assets/index-BHglh5Mj.js
docs/assets/index-BHglh5Mj.js.map
docs/assets/index-CshSsL1n.css
dist/imagelightbox.css

Sorry, the diff of this file is not supported yet

dist/imagelightbox.js.map

Sorry, the diff of this file is not supported yet

dist/imagelightbox.umd.cjs

Sorry, the diff of this file is not supported yet

dist/imagelightbox.umd.cjs.map

Sorry, the diff of this file is not supported yet

docs/index.html

Sorry, the diff of this file is not supported yet

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

About

Packages

npm

Go

Maven

PyPI

Rubygems

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc