javascript - freatherlight unlinked 图片

Question

我在使用 featherlight 时遇到了一些问题，由于某种原因它无法正常工作，我正在使用 Ghost 作为平台并且我使用 Ghost 的 Markdown 将几张图片添加到帖子中，为了使 featherlight 正常工作我需要这些图片的链接用一个类来绑定(bind)它们 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 中查看我的检查器，没有任何错误，图像被包裹在标签中，使用正确的类:

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

我注意到一件事，在标签之后我得到了帖子中每个图像的跨度类

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

我是 JS 和 jQuery 的新手，所以这可能是一个非常简单的修复。

Answer 1

把你的 $("a.lightbox").featherlight({closeOnClick: 'anywhere',}); block 放在 $(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'
    });
});