Fluidbox Integration for Image click lightboxes

Themes
1

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.

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

Customization

Currently you can customize two different things by adding this above that 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>

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.

11 Likes
2

Ummm this is amazing! :clap:

2 Likes
3

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

4

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.

5

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

Something like this maybe?

6

That’s sick bro!

1 Like
7

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.

8

I’m thinking something like this.

Ghost-Fluidbox-Integration
Ghost-Fluidbox-Integration.png1282×677 76.5 KB

1 Like
9

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>

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

3 Likes
10

I think it will work

11

Great job…

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

12

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!

13

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>

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

1 Like
14

not workes on london theme

15

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

16

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?

17

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!