How to add lightbox to ghost blog

I'm moeen, after this post you can put a beautiful lightbox to your gallery image in ghost blogging platform.

I used the london theme for my site as the base theme and change what I need.

ok lets dive in to the guide:

for lightbox I use fslighbox because it's very light and only need one file and have no dependencies.

first grab the js file from the link below:

Download

2. upload the file to somewhere that you can access it in your site code,

3. then login to you r ghost blog admin, go to the Code Injection part from the left sidebar,

4. put code below in the site footer section of Code Injection.

<script>
$('.kg-gallery-image img ').each(function() {
    $(this).wrap("<a data-no-swup data-fslightbox href='" + this.src + "'/>");
});
</script>
<script src="YOURLINKTO/fslightbox.js">
</script>

just change YOURLINKTO to the link of your js file

5. open a page with gallery on your site and have a good time.

you can enable lightbox to other types of images in your site by changing kg-gallery-image to the image type you want.

you can see example of the gallery in any pages of my portfolio section like the link below: