Fluidbox Integration for Image click lightboxes

What is this?

This is a fluidbox integration for the Ghost.org Blogging Platform that I’ve developed. By adding a single line to the footer section in the Ghost Admin Panel, it adds additional functionality to the blogging platform. When you click on an image, either standalone or in a gallery, it will pop a modal to reveal a larger view of that image. It is customizable via a configuration object.


  • Both stand-alone and gallery images are clickable. This doesn’t include images added via markdown mode.
  • Auto-dismiss on scroll
  • Ability to use image as back-drop
  • Ability to show captions in modal
  • Ability to navigate images with arrow keys.


Video Demo: Fluidbox Ghost Blog Integration Javascript - YouTube

Live Demo: You can see this live on my site now: Fluidbox for Ghost Blogs

How to use

Drop this line into your site-footer section in the ghost admin panel

  <script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@0.1.0/fluidbox-ghost-blog-plugin.min.js"></script>


Currently you can customize two different things by adding this above that script:

    window.fluidboxGhostConfig = {
      theme: 'image-backdrop', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
      showCaption: true, // Sets whether to capture the caption and show it below the image when expanded


Updates to Ghost Blogging Platform which change the HTML affecting images might break this integration. To combat this I will release versions which align with the versions of Ghost.


Ummm this is amazing! :clap:


@coreysnyder BTW - markup output for galleries is controlled by Ghost, rather than Casper - so this should in theory be compatible with all themes, I think?

OH Yeah I guess you’re right. It should work for all themes! I wonder, do you know how “Integrations” work. I’m curious if I could implement this as an integration with a simple UI to set the customizations. I think this would make it more accessible to other users.

If you made a customiser UI with a code generator, then we could definitely put this together as an integration :)

Something like this maybe?

That’s sick bro!

1 Like

I can certainly create something like that. I’m just trying to figure out how to get it added as an integration. I was looking over the Integrations documentation and it wasn’t clear how to package up UI elements and get them added to my integrations dashboard.

I’m thinking something like this.

1 Like

Amazing work!

A little note about the integration. At first I thought something was not working on my side as I only put this script in the footer:

<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@0.1.0/fluidbox-ghost-blog-plugin.min.js"></script>

I had to put both scripts to make it work :slight_smile:

<!-- Fluidbox Integration for Image click lightboxes
https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451 -->
<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@0.1.0/fluidbox-ghost-blog-plugin.min.js"></script>

  window.fluidboxGhostConfig = {
    theme: 'image-backdrop', // Options: light, dark, image-backdrop, hsla(262, 100%, 82%, 0.6)
    showCaption: true, // Sets whether to capture the caption and show it below the image when expanded



I think it will work

Great job…

I want to show low resolution thumbnail initially, which is linked to a higher resolution image on Fluidbox. How can do this??

Awesome job! Sooo happy you made this for those of us that are not coders. I was all over the place trying to figure out how to do this myself. You saved me a TON of time and effort and this is PERFECT.

I will say, that like pascalandy said, I had to put in both scripts to make it work, with the fluidbox-ghost-blog-plugin.min.js one on top.


Hi everyone,

There appears to be a problem with this plugin and Ghost’s bookmark cards. The plugin wipes out the thumbnail image in the bookmark card.

I was able to fix this with a minor fix to the code.

Corey, I have submitted a pull request to your repo with the fix. Would you mind reviewing it? Also, could you review jules-ch’s pull request that’s been in there since November?

Other users, if you run into this problem, in the meantime you can fix this problem by replacing:

<script async src="https://cdn.jsdelivr.net/gh/coreysnyder04/fluidbox-ghost-blog-plugin@0.1.0/fluidbox-ghost-blog-plugin.min.js"></script>


<script async src="https://cdn.jsdelivr.net/gh/Torqu3Wr3nch/fluidbox-ghost-blog-plugin@0.1.1a/fluidbox-ghost-blog-plugin.min.js"></script>

Thanks again for the plugin, Corey. I really enjoy it!


1 Like

not workes on london theme

This look superb, I just have a question about the implementation.

Is there a way to right click through lightbox images (if on a computer), or swipe if on a phone. Currently I have to click each image individually.



Does this still work with latest version of Ghost? I installed it as instructed (Krabi theme), and I get a lightbox effect on single images, but no dark background and no way to cycle through the images using arrow keys.


hello, I tried to add Fluidbox to my Ghost(Pro) site but it doesn’t work. Could you please check my site here? Thank you!