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.

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

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!