Add an Image Lightbox to Ghost
There are many different ways and plugins to help create Lightbox images on your site. For this tutorial I am going to use a jQuery plugin called fluidbox because I found it to be very simple and to do exactly what I wanted without all the bells and whistles. It is currently what we use on our sites.
We changed one default setting of fluidbox, the
viewportFill. This setting changes how much of the page you want the image to fill up. The default is 0.95 (with the max being 1), but that was just too much of the screen so we changed it to 0.8. Obviously change it to whatever works best for you or remove it completely.
For other customizations you can check out their GitHub page
One other caveat is that by default, when you add an image into Ghost using markdown (
!()), it does not create a link to that image. In order for the lightbox to work, there needs to be a link around the image. The html would look like this:
<a href="/link/to/image.png"> <img src="/link/to/image.png" /> </a>
In order to get your lightbox to work, you either need to add images using html inside the post editor instead of using handlebars, or you need to wrap the image handlebars inside of a link handlebar. Like this:
[!()]() [![Image Description](/link/to/image.png)](/link/to/image.png)
Basically, what you are doing, is putting the entire
!() inside the beginning part of the
(). It is kind of hard to wrap your brain around putting handlebars inside handlebars, but that method or using regular HTML will work.