Add a lightbox viewer for your Ghost blog in no time

I have been using Ghost as my primary blogging system for some years now. Although it does not have a rich ecosystem like WordPress or other open-source CMS, it does the job.

In Ghost, You will get used to doing everything manually, creating a search functionality using jQuery them Vue, trying out some embedded web widgets for messaging I built with Vue and CouchDB.

One thing that was annoying me for some time now, was there is no built-in image lightbox, either for single images or galleries. So, I decided to add one.

The lightbox improves the user experience by allowing a closer or second detail into the image. It is often used to display a larger clear version of an image or a video.

In contrast, it is a modal window to display images or media.

In this tutorial, I will demonstrate how to add a simple lightbox image viewer for no technical Ghost users.

What will we use?

We will use

1. jQuery: a JavaScript HTML DOM tree manipulation library.
2. Lity: a lightweight lightbox library that comes with seamless animation, and a responsive design.

As this post is meant for non-technical users, we will use the CDN versions of both libraries.

Adding Lity is pretty simple, but first, we need to make sure your theme has jQuery. If you are using the default theme (Casper), then you already have jQuery installed.

Now, let us inject our code through

Ghost admin panel -> Settings -> Code injection

First: Lity CSS, which goes to the header

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.min.css">

Second: Add Lity JavaScript library to the Site Footer section

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js" integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/lity@2.4.1/dist/lity.min.js"></script>
<script>
    $(document).ready(function () {
        $('.kg-gallery-image, .kg-image-card').each(function () {
            var img = $(this).html();
            var imgsrc = $(this).find('img').attr('src');
            $(this).replaceWith('<div class="kg-gallery-image"><a href="' + imgsrc +
                '" data-lity>' + img + '</a></div>')
        })

    });
</script>

Now, it is the time to test if it works, create a post or a page, add a single image or a gallery, and enjoy your new stylish lightbox viewer.

Resources

1. https://github.com/jsor/lity
2. https://sorgalla.com/lity/
3. https://jquery.com/
4. https://ghost.org/