I need to have a lightbox image link to another page, in this case it's on tumblr as the permalink page. I tried wrapping the markup of mfp-img div in a href with "{Permalink}" (as per tumblr's api) and then "%url%", but both render exactly the same as inside the quotes, rather than the actual link to the page.
I'm quite familiar with css, but unfortunately my js is lacking. Here's the portion of the code that controls the lightbox image. Where and how should I add the href to the code?
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
}
}
});
Here is the portion I tried to edit, both with permalink and %url%, with and without quotations.
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.'
},