How to add lightbox to ghost blog

I’m moeen, after this post you can put a beautiful lightbox to your gallery image in ghost blogging platform.

I used the london theme for my site as the base theme and change what I need.

ok lets dive in to the guide:

for lightbox I use fslighbox because it’s very light and only need one file and have no dependencies.

  1. first grab the js file from the link below:

Download

  1. upload the file to somewhere that you can access it in your site code,

  2. then login to you r ghost blog admin, go to the Code Injection part from the left sidebar,

  3. put code below in the site footer section of Code Injection.

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

just change YOURLINKTO to the link of your js file

  1. open a page with gallery on your site and have a good time.

you can enable lightbox to other types of images in your site by changing kg-gallery-image to the image type you want.

you can see example of the gallery in any pages of my portfolio section like the link below:

this article on my blog:

4 Likes

Thanks for sharing!

1 Like

Awesome info @moeen!
I just tried it and it worked like a charm.
One addition is that I loaded the fslightbox.js from a CDN instead of from locally.

2 Likes