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/[email protected]/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/[email protected]/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/





Install CouchDB using Docker and Docker-compose

. What is CouchDB?CouchDB is an open-source NoSQL document database that stores data in JSON-based format and offers HTTP-ready REST-API  out of the box. It can be used as a database backend for web, mobile, or even desktop apps. In contra.......Read more...

Fix Vue Error: component has been registered but not used

Here is how to fix the infamous Vue error, which you may need while experimenting and learning with Vue, not in production. Here is your ESlint configuration in package.json : "eslintConfig": { "root": true, "env": { "node".......Read more...

How to Compile and Run your First Java Program

Java is one of the most powerful and popular programming languages. Even with several niche languages available now, Java has retained its leading position among developers. If you have decided to learn Java, it's definitely a good choice t.......Read more...

Penpot: an open-source Prototyping and design platform for teams

Penpot is a free, open-source web-based design and prototyping application for teams. It works with open web standards as it uses SVG (Scalable Vector Graphics) format. Penpot can be installed on a remote server or the local machine with he.......Read more...

Capture Webcam Video and Audio with Meteor

Meteor is a unique open-source multi-platform full-stack JavaScript platform. To put all these in one sentence may not seem that unique, but comparing it to other JavaScript frameworks and platforms it offers unique more than building web.......Read more...