Programming

Using Fullscreen Lightbox with Ghost

Posted on by Kenneth Ballard / 0 Comment

Add this code to the default.hbs file in your theme at the bottom before the {{ghost_foot}} helper. Don’t forget as well to include the fslightbox.js file. And to ensure the code is used only when needed, enclose both the line pulling in fslightbox.js and the below code block in the {{post}} helper.

// Lightbox: https://fslightbox.com/
// Adapted from: https://brightthemes.com/blog/ghost-image-lightbox
// Improved to make it so each gallery has its own lightbox
// unless the galleries are immediately adjacent to each other.

// Also removed using a lightbox for individual images since my
// current Ghost theme ("Edge") doesn't use a lightbox for
// individual images.

let galleries = document.querySelectorAll('.kg-gallery-card')
let galleryIdx = 0
let hasImages = false

let lastGallery = document
galleries.forEach(function (gallery)
{
    // Ghost has a limit of 9 images per gallery. So if two or more
    // galleries are placed one immediately after the other - no
    // other blocks between them - then treat the galleries as if
    // they are together.

    if(lastGallery.nextElementSibling != gallery)
        galleryIdx++

    lastGallery = gallery

    let images = gallery.querySelectorAll('img')
    images.forEach(function (image)
    {
        hasImages = true
        var wrapper = document.createElement('a')

        wrapper.setAttribute('data-no-swup', '')
        wrapper.setAttribute('data-fslightbox',
            'gallery_' + galleryIdx.toString())
        wrapper.setAttribute('href', image.src)
        wrapper.setAttribute('aria-label', 'Click for Lightbox')

        image.parentNode.insertBefore(wrapper,
            image.parentNode.firstChild)

        wrapper.appendChild(image)
    });
});

if(hasImages)
    refreshFsLightbox()
Kenneth Ballard