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.

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

Live Demo: You can see this live on my site now: 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

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

7 Likes

Ummm this is amazing! :clap:

1 Like

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

Something like this maybe?
https://buttons.github.io/

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>

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

2 Likes

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.

Thanks!