Ghost Lightbox - Why is it not working :-S

  • What’s your URL Currently hosting on my local system

  • What version of Ghost are you using? Ghost 4.0

  • How was Ghost installed and configured? Installed via Docker on a local Linux System

  • What Node version, database, OS & browser are you using? Using Brave and Firefox

  • What errors or information do you see in the console? None

  • What steps could someone else take to reproduce the issue you’re having? None

I have been trying to get a lightbox to work in Ghost for a little while, but I am currently unable to get this to work.

I would like my images to work like in the following link

But I have also tried the solution here

If anyone has a tried an tested method of getting a lightbox to work for post images then please respond, as its a little frustrating right now not knowing where I’m going wrong?

If you have a CDN for the link to the .js file it would also be great. My issue is that when i click an image it does zoom in, Im guessing this is standard behavior, but it only does one image at a time. I need to be able to right arrow, or swipe through images.

Have the same problem: tried all possible libraries in all possible ways, tried to follow all FAQs which I found – nothing helped, either for freshly uploaded images or for images, exported from Wordpress site.

This is the solution that worked for me, however it doesn’t work with all the themes I tried.

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>

Thank you, that helped me. I found where I made the mistake previously, maybe that will be useful. I tried to use fslightbox uploading the file to assets/js/lib folder, and even when I changed the path in config, it did not work. So I tried just to follow the manual and succeeded. Thank you once more!