# Fluidbox Integration for Image click lightboxes

**URL:** <https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451>\
**Category:** Themes\
**Created:** [May 23, 2019, 2:51pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451 "2019-05-23T14:51:56Z")\
**Posts on this page:** 17\
**Page:** 1

<div class="post-metadata">

**Author:** ![coreysnyder](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/coreysnyder/32/3602_2.png) [@coreysnyder](https://forum.ghost.org/u/coreysnyder)\
**Post date:** [May 23, 2019, 2:51pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/1 "2019-05-23T14:51:56Z")

</div>

# What is this?

This is a [fluidbox](http://terrymun.github.io/Fluidbox/demo/index.html) integration for the [Ghost.org Blogging Platform](https://ghost.org/) 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.

## Features

- 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.

## Demo

Video Demo: [https://youtu.be/bBOP9-Rpeuk](https://youtu.be/bBOP9-Rpeuk)

Live Demo: You can see this live on my site now: [Fluidbox for Ghost Blogs](http://coreysnyder.me/test-page-for-my-gallery-fluidbox/)

## How to use

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

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

```

### Customization

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

```html
<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
    }
</script>

```

## Versioning

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.

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [May 23, 2019, 2:55pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/2 "2019-05-23T14:55:09Z")

</div>

Ummm this is amazing! 👏

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [May 23, 2019, 2:57pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/3 "2019-05-23T14:57:07Z")

</div>

@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?

---

<div class="post-metadata">

**Author:** ![coreysnyder](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/coreysnyder/32/3602_2.png) [@coreysnyder](https://forum.ghost.org/u/coreysnyder)\
**Post date:** [May 23, 2019, 3:08pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/4 "2019-05-23T15:08:03Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![John](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/john/32/29288_2.png) [@John](https://forum.ghost.org/u/John)\
**Post date:** [May 23, 2019, 4:52pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/5 "2019-05-23T16:52:55Z")

</div>

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

Something like this maybe?

> **[github:buttons](https://buttons.github.io/)**
>
> The unofficial GitHub Buttons made for developers.

---

<div class="post-metadata">

**Author:** ![webmaster](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/webmaster/32/3595_2.png) [@webmaster](https://forum.ghost.org/u/webmaster)\
**Post date:** [May 23, 2019, 5:23pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/6 "2019-05-23T17:23:35Z")

</div>

That’s sick bro!

![](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/c/cb9a5f1df05852ea7573d2354ea963eabd30604d.gif)

---

<div class="post-metadata">

**Author:** ![coreysnyder](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/coreysnyder/32/3602_2.png) [@coreysnyder](https://forum.ghost.org/u/coreysnyder)\
**Post date:** [May 23, 2019, 5:42pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/7 "2019-05-23T17:42:21Z")

</div>

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.

---

<div class="post-metadata">

**Author:** ![coreysnyder](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/coreysnyder/32/3602_2.png) [@coreysnyder](https://forum.ghost.org/u/coreysnyder)\
**Post date:** [May 23, 2019, 6:09pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/8 "2019-05-23T18:09:29Z")

</div>

I’m thinking something like this.

 ![Ghost-Fluidbox-Integration](https://us1.discourse-cdn.com/flex015/uploads/ghost2/original/2X/5/581844e66836b11f84106899dfbbbe571a3a6d07.png)

---

<div class="post-metadata">

**Author:** ![pascalandy](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/pascalandy/32/444_2.png) [@pascalandy](https://forum.ghost.org/u/pascalandy)\
**Post date:** [May 26, 2019, 8:38pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/9 "2019-05-26T20:38:44Z")

</div>

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:

```auto
<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 🙂

```auto
<!-- 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>

<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
  }
</script>

```

Cheers!

---

<div class="post-metadata">

**Author:** ![dragontattoo](https://avatars.discourse-cdn.com/v4/letter/d/f4b2a3/32.png) [@dragontattoo](https://forum.ghost.org/u/dragontattoo)\
**Post date:** [July 29, 2019, 5:55am UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/10 "2019-07-29T05:55:22Z")

</div>

I think it will work

---

<div class="post-metadata">

**Author:** ![Krishnaprasad\_K](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/krishnaprasad_k/32/4519_2.png) [@Krishnaprasad\_K](https://forum.ghost.org/u/Krishnaprasad_K)\
**Post date:** [September 16, 2019, 7:50am UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/11 "2019-09-16T07:50:47Z")

</div>

Great job…

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

---

<div class="post-metadata">

**Author:** ![stitch](https://avatars.discourse-cdn.com/v4/letter/s/c2a13f/32.png) [@stitch](https://forum.ghost.org/u/stitch)\
**Post date:** [October 21, 2019, 3:21pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/12 "2019-10-21T15:21:57Z")

</div>

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.

Thanks!

---

<div class="post-metadata">

**Author:** ![Torqu3Wr3nch](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/torqu3wr3nch/32/11937_2.png) [@Torqu3Wr3nch](https://forum.ghost.org/u/Torqu3Wr3nch)\
**Post date:** [January 11, 2020, 4:50pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/13 "2020-01-11T16:50:23Z")

</div>

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](https://github.com/coreysnyder04/fluidbox-ghost-blog-plugin/pull/7) 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>

```

with

```
<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!

-[TorqueWrench](https://engineerworkshop.com/)

---

<div class="post-metadata">

**Author:** ![moeen](https://avatars.discourse-cdn.com/v4/letter/m/c89c15/32.png) [@moeen](https://forum.ghost.org/u/moeen)\
**Post date:** [February 25, 2020, 10:20pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/14 "2020-02-25T22:20:00Z")

</div>

not workes on london theme

---

<div class="post-metadata">

**Author:** ![anon9770626](https://avatars.discourse-cdn.com/v4/letter/a/ba8739/32.png) [@anon9770626](https://forum.ghost.org/u/anon9770626)\
**Post date:** [May 6, 2021, 1:54pm UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/15 "2021-05-06T13:54:18Z")

</div>

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.

Thanks

Pace

---

<div class="post-metadata">

**Author:** ![BruceInLouisville](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/bruceinlouisville/32/40997_2.png) [@BruceInLouisville](https://forum.ghost.org/u/BruceInLouisville)\
**Post date:** [September 24, 2021, 1:45am UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/16 "2021-09-24T01:45:59Z")

</div>

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.

Thoughts?

---

<div class="post-metadata">

**Author:** ![phongvt](https://sea1.discourse-cdn.com/flex015/user_avatar/forum.ghost.org/phongvt/32/16720_2.png) [@phongvt](https://forum.ghost.org/u/phongvt)\
**Post date:** [March 3, 2022, 8:16am UTC](https://forum.ghost.org/t/fluidbox-integration-for-image-click-lightboxes/7451/17 "2022-03-03T08:16:40Z")

</div>

hello, I tried to add Fluidbox to my Ghost(Pro) site but it doesn’t work. Could you please check my site [here](https://bmw-car-club-vietnam.ghost.io/)? Thank you!