How to add lightbox to ghost blog

Themes
1

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:

10 Likes
2

Thanks for sharing!

1 Like
3

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
4

It really helps me a lot, thanks @moeen !

1 Like
5

What link did you use to load this from a CDN?

6

I am unable to get this to work, I get the following error in my console

Uncaught ReferenceError: $ is not defined
at (index):658

7

So this is what I got to finally work:

Add fslightbox.js to the theme assets/js folder

Add the following code to the code injection footer:

<script>
const images = document.querySelectorAll('.kg-image-card img, .kg-gallery-card img');

// Lightbox function
images.forEach(function (image) {
  var wrapper = document.createElement('a');
  wrapper.setAttribute('data-no-swup', '');
  wrapper.setAttribute('data-fslightbox', '');
  wrapper.setAttribute('href', image.src);
  wrapper.setAttribute('aria-label', 'Click for Lightbox');
  image.parentNode.insertBefore(wrapper, image.parentNode.firstChild);
  wrapper.appendChild(image);
});

refreshFsLightbox();
</script>
<script src="/assets/js/fslightbox.js">
</script>
1 Like
8

Does this work for galleries, individual images, or both?

9

This works for both. :slight_smile:

10

OMG!!! I LOVE YOU!!!

WOW!!!

This is what I’ve been looking for!!!

Two question… any way to make the lightbox dismiss when scrolling or swiping up and down?

Also, the background scrolls sometimes when you swipe… any way to lock that down so it doesn’t move?

11

I can look at it, but I only searched for this info and patched together different solution I found online.

12

I’ve actually been looking at the Ruby theme… it already has photoswipe enabled by default (a better lightbox in my opinion), but it doesn’t apply to all the images on screen.

Any idea how to add just that to code injection?