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.
![](http://coreysnyder.me/content/images/2019/05/photo-1558429731-b85ee8dea73a.jpeg)
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
Live Demo: SCROLL DOWN 👇
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.
![](http://coreysnyder.me/content/images/2019/05/photo-1558466560-dd20f1094d36.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558470325-b28b6b7abd46.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558433916-90a36b44753f.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558470598-a5dda9640f68.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558486084-0ff4fb6de6fb.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558522319-d3128925ad6f.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558458878-36802fc5f7f5.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1556227702-b89ac3b94ff9.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1556741533-4020f1bf081c.jpeg)
![](http://coreysnyder.me/content/images/2019/05/photo-1558433916-90a36b44753f-1.jpeg)