Let's get straight to the point. I am using Ghost platform and I have images in my blog post, how do I apply "lightbox" effect on those images?
As most of us probably have already known what a "lightbox" is. For those who don't, it is a javascript that allows images to overlay the current webpage easily which I find it pretty useful in many scenarios.
I have used lightbox before and I know it is very straightforward and easy to use. In this case, I know what I need to implement, and I also know that I don't want to reinvent the wheel. After some googling, I have come across fluidbox which seems to be a new and more mordern alternative of lightbox.
The use of fluidbox is pretty simple and straight forward too.
First, write these two lines in Code injection Site Header section:
<link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/fluidbox/2.0.5/css/fluidbox.min.css"></link>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/fluidbox/2.0.5/js/jquery.fluidbox.min.js"></script>
NOTE: you can grab the cdn link by googling "cdn fluidbox" like that and grab the link directly from there.
Next, we can simply put the code below in the Code injection Site Footer section:
$(function () {
$('a').fluidbox();
});
In the fluidbox documentation, what the code does is simply look for images <img> that is wrapped in by <a> element and apply the fluidbox effect.
The thing is, images in post are not automatically wrapped in by <a> element. When I try to run it, nothing really happens when I click on the image. I checked the console but no error regarding to this is displayed as well.
I thought of simply wrap a link to the image like this:
Before create link:
After create link:
[](https://s3.amazonaws.com/test/2019/04/test.JPG)
That way, $('a').fluidbox() will be able to find the <a> that wraps around the <img> and apply fluidbox effect on it.
It's simply too much of work and I am really reluctant to do so. What if I forget to apply the link to some images or if I mess up with the link url and such? Also, it is not really ideal to apply $('a') to all the images that wrapped in by <a>.
So, here's what I did to solve this.
In the Code injection Site Footer section:
<script>
var images = $('.post-content img');
// wrap images with the image links
for (i = 0; i < images.length; i++) {
$(images[i]).wrap('<a href="' + $(images[i]).attr('src') + '">');
}
// apply fluidbox on those images
$(function () {
//$('a').fluidbox();
$('.post-content img').parent().fluidbox();
})
</script>
What the code does is to look for images in the .post div class. For each image, we wrap the <a href> around the <img> element so that all of the images in the .post div satisfy the fluidbox requirement.
The very last step is to make sure all the <a> elements apply fluidbox. Here, I am using $('.post img').parent() to get the parent element <a> and then apply fluidbox. That's it!
I could have defined the class name on the newly created <a> element and then apply fluidbox to the class. That will work too, there are many ways to do that too!
Anyway, this is how I got it working on my Ghost site! You can click on the image below to see how it is!
One last thing, to change the overlay color, simply apply css background-color on .fluidbox__overlay. Mine was background-color: rgba(84, 84, 84, 0.85).
Hope this post helps!
Post was published on , last updated on .
Like the content? Support the author by paypal.me!
