Add Image Lightbox for Ghost blog
1 min read

Add Image Lightbox for Ghost blog

If your blog post are filled with chart images, like my last one, it'd be nice if the visitor can view the bigger version in a popup with a simple click.

After searching around for some time, below is the best code I came up with. To install, paste the code in your Site Footer section in Ghost Settings > Code Injection.

<script>
$('.post img ').each(function() {
    $(this).wrap("<a data-no-swup data-fslightbox href='" + this.src + "'/>");
});
</script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/fslightbox/3.0.9/index.min.js"></script>

It's using fslightbox.js for the lightbox effect, here's an official demo.