freatherlight unlinked images

Question

I am having some troubles with featherlight, for some reason it won't work, I am using Ghost as a platform and I have several images added to a post using Ghost's markdown, for featherlight to work I need link to those images with a class in order to bind them featherlight, so I am using the following 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);
        });
    });

and calling featherlight

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

I look at my inspector in Chrome and have no errors and the images are wrapped in tags just fine with the proper 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>

One thing I noticed that right after the tag I get a span class for each of the image in the post

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

I am very new to JS and jQuery so this might be a very simple fix.

Answer 1

put your $("a.lightbox").featherlight({closeOnClick: 'anywhere',}); block inside $(document).ready(function(){/* ... */});. Also remove the extra comma after 'anywhere',

Your code beocomes

$(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'
    });
});