添加指向灯箱图像的超链接

时间:2016-12-14 00:13:27

标签: javascript lightbox tumblr

我需要有一个指向另一个页面的灯箱图片链接,在这种情况下,它在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.'
},

0 个答案:

没有答案