我需要有一个指向另一个页面的灯箱图片链接,在这种情况下,它在tumblr上作为永久链接页面。我试着用" {Permalink}"在href中包装mfp-img div的标记。 (按照tumblr的api)然后"%url%",但两者的呈现方式与引号内部完全相同,而不是实际的页面链接。
我对css非常熟悉,但不幸的是我的js缺乏。这是控制灯箱图像的代码部分。我应该在何处以及如何将href添加到代码中?
a.magnificPopup.registerModule("image", {
options: {
markup: '<div class="mfp-figure"><div class="mfp-close"></div><div class="mfp-img"></div><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>',
cursor: "mfp-zoom-out-cur",
titleSrc: "title",
verticalFit: !0,
tError: '<a href="%url%">The image</a> could not be loaded.'
},
proto: {
initImage: function() {
var a = n.st.image,
c = ".image";
n.types.push("image"), x(g + c, function() {
n.currItem.type === "image" && a.cursor && s.addClass(a.cursor)
}), x(b + c, function() {
a.cursor && s.removeClass(a.cursor), r.off("resize" + j)
}), x("Resize" + c, n.resizeImage), n.isLowIE && x("AfterChange", n.resizeImage)
},
resizeImage: function() {
var a = n.currItem;
if (!a || !a.img) return;
if (n.st.image.verticalFit) {
var b = 0;
n.isLowIE && (b = parseInt(a.img.css("padding-top"), 10) + parseInt(a.img.css("padding-bottom"), 10)), a.img.css("max-height", n.wH - b)
}
},
_onImageHasSize: function(a) {
a.img && (a.hasSize = !0, N && clearInterval(N), a.isCheckingImgSize = !1, z("ImageHasSize", a), a.imgHidden && (n.content && n.content.removeClass("mfp-loading"), a.imgHidden = !1))
},
findImageSize: function(a) {
var b = 0,
c = a.img[0],
d = function(e) {
N && clearInterval(N), N = setInterval(function() {
if (c.naturalWidth > 0) {
n._onImageHasSize(a);
return
}
b > 200 && clearInterval(N), b++, b === 3 ? d(10) : b === 40 ? d(50) : b === 100 && d(500)
}, e)
};
d(1)
},
getImage: function(b, c) {
var d = 0,
e = function() {
b && (b.img[0].complete ? (b.img.off(".mfploader"), b === n.currItem && (n._onImageHasSize(b), n.updateStatus("ready")), b.hasSize = !0, b.loaded = !0, z("ImageLoadComplete")) : (d++, d < 200 ? setTimeout(e, 100) : f()))
},
f = function() {
b && (b.img.off(".mfploader"), b === n.currItem && (n._onImageHasSize(b), n.updateStatus("error", g.tError.replace("%url%", b.src))), b.hasSize = !0, b.loaded = !0, b.loadError = !0)
},
g = n.st.image,
h = c.find(".mfp-img");
if (h.length) {
var i = document.createElement("img");
i.className = "mfp-img", b.img = a(i).on("load.mfploader", e).on("error.mfploader", f), i.src = b.src, h.is("img") && (b.img = b.img.clone()), b.img[0].naturalWidth > 0 && (b.hasSize = !0)
}
return n._parseMarkup(c, {
title: O(b),
img_replaceWith: b.img
}, b), n.resizeImage(), b.hasSize ? (N && clearInterval(N), b.loadError ? (c.addClass("mfp-loading"), n.updateStatus("error", g.tError.replace("%url%", b.src))) : (c.removeClass("mfp-loading"), n.updateStatus("ready")), c) : (n.updateStatus("loading"), b.loading = !0, b.hasSize || (b.imgHidden = !0, c.addClass("mfp-loading"), n.findImageSize(b)), c)
}
}
});
var P, Q = function() {
return P === undefined && (P = document.createElement("p").style.MozTransform !== undefined), P
};
a.magnificPopup.registerModule("zoom", {
options: {
enabled: !1,
easing: "ease-in-out",
duration: 300,
opener: function(a) {
return a.is("img") ? a : a.find("img")
}
},
proto: {
initZoom: function() {
var a = n.st.zoom,
d = ".zoom";
if (!a.enabled || !n.supportsTransition) return;
var e = a.duration,
f = function(b) {
var c = b.clone().removeAttr("style").removeAttr("class").addClass("mfp-animated-image"),
d = "all " + a.duration / 1e3 + "s " + a.easing,
e = {
position: "fixed",
zIndex: 9999,
left: 0,
top: 0,
"-webkit-backface-visibility": "hidden"
},
f = "transition";
return e["-webkit-" + f] = e["-moz-" + f] = e["-o-" + f] = e[f] = d, c.css(e), c
},
g = function() {
n.content.css("visibility", "visible")
},
h, i;
x("BuildControls" + d, function() {
if (n._allowZoom()) {
clearTimeout(h), n.content.css("visibility", "hidden"), image = n._getItemToZoom();
if (!image) {
g();
return
}
i = f(image), i.css(n._getOffset()), n.wrap.append(i), h = setTimeout(function() {
i.css(n._getOffset(!0)), h = setTimeout(function() {
g(), setTimeout(function() {
i.remove(), image = i = null, z("ZoomAnimationEnded")
}, 16)
}, e)
}, 16)
}
}), x(c + d, function() {
if (n._allowZoom()) {
clearTimeout(h), n.st.removalDelay = e;
if (!image) {
image = n._getItemToZoom();
if (!image) return;
i = f(image)
}
i.css(n._getOffset(!0)), n.wrap.append(i), n.content.css("visibility", "hidden"), setTimeout(function() {
i.css(n._getOffset())
}, 16)
}
}), x(b + d, function() {
n._allowZoom() && (g(), i && i.remove())
})
},
_allowZoom: function() {
return n.currItem.type === "image"
},
_getItemToZoom: function() {
return n.currItem.hasSize ? n.currItem.img : !1
},
_getOffset: function(b) {
var c;
b ? c = n.currItem.img : c = n.st.zoom.opener(n.currItem.el || n.currItem);
var d = c.offset(),
e = parseInt(c.css("padding-top"), 10),
f = parseInt(c.css("padding-bottom"), 10);
d.top -= a(window).scrollTop() - e;
var g = {
width: c.width(),
height: (p ? c.innerHeight() : c[0].offsetHeight) - f - e
};
return Q() ? g["-moz-transform"] = g.transform = "translate(" + d.left + "px," + d.top + "px)" : (g.left = d.left, g.top = d.top), g
}
}
});
以下是我尝试编辑的部分,包括固定链接和%url%,包含和不包含引号。
a.magnificPopup.registerModule("image", {
options: {
markup: '<div class="mfp-figure"><div class="mfp-close"></div><a href="{Permalink}" target="_blank"><div class="mfp-img"></div></a><div class="mfp-bottom-bar"><div class="mfp-title"></div><div class="mfp-counter"></div></div></div>',
cursor: "mfp-zoom-out-cur",
titleSrc: "title",
verticalFit: !0,
tError: '<a href="%url%">The image</a> could not be loaded.'
},