freatherlight unlinked 图片

Question

我在使用 featherlight 时遇到了一些问题，由于某种原因它无法正常工作，我正在使用 Ghost 作为平台，并且我使用 Ghost 的降价将几张图像添加到 post，以便 featherlight 正常工作我需要 link 到那些带有 class 的图像，以便将它们绑定到 featherlight，所以我使用以下 jQuery

    $(document).ready(function() {
    $("img").each(function() {
        var $this = $(this);
        var src = $this.attr('src');
        var a = $('<a/>').attr('href', src).addClass('lightbox');
        $this.wrap(a);
        });
    });

并调用 featherlight

    $("a.lightbox").featherlight({
        closeOnClick: 'anywhere',
    });

我在 Chrome 中查看了我的检查器，没有任何错误，图像被包裹在标签中，使用正确的 class:

<a href="/content/images/2015/05/IMG_0150.jpg" class="lightbox">
    <img src="/content/images/2015/05/IMG_0150.jpg" alt="Beautiful Girls">
</a>

有一件事我注意到，在标签之后我得到了 post

中每个图像的跨度 class

<span class="overlayContainer" style="top: 1603px; left: 1108.5px;"></span>

我对 JS 和 jQuery 很陌生，所以这可能是一个非常简单的修复。

Answer 1

将您的 $("a.lightbox").featherlight({closeOnClick: 'anywhere',}); 块放在 $(document).ready(function(){/* ... */}); 内。还要删除 'anywhere',

之后多余的逗号

您的代码成为

$(document).ready(function() {
    $("img").each(function() {
        var $this = $(this);
        var src = $this.attr('src');
        var a = $('<a/>').attr('href', src).addClass('lightbox');
        $this.wrap(a);
    });

    $("a.lightbox").featherlight({
        closeOnClick: 'anywhere'
    });
});

freatherlight unlinked 图片

freatherlight unlinked images

javascript

ghost-blog

featherlight.js