Image Lightbox

The Thesis theme comes with a built-in lightbox feature that enhances the viewing experience of images on your site. The lightbox uses the PhotoSwipe library to provide a smooth, interactive image viewing experience.

To enable the lightbox feature, add the following code snippet to your site:

<script>
window.pvs?.initLightbox?.();
</script>

Once enabled, users can click on images to view them in a fullscreen modal that allows for:

• Zooming in and out of images
• Viewing images in a distraction-free environment
• Closing the lightbox by clicking on image, using the escape key or scrolling the page

Advanced Usage

You can customize the lightbox behavior by passing configuration options to the initialization method:

<script>
window.pvs?.initLightbox?.({
    showAnimationDuration: 330,
    hideAnimationDuration: 250,
    animationEasing: 'cubic-bezier(0.16, 1, 0.3, 1)',
});
</script>

Disabling Lightbox Globally

If you’ve initialized the lightbox but want to disable it, you can do so with:

<script>
window.pvs?.disableLightbox?.();
</script>

Enabling Lightbox for Specific Posts

If you want to enable the lightbox only for specific posts, you can use the internal tag system in Ghost:

1. Log in to Ghost admin
2. Go to Posts, and open the post
3. Open the Post settings sidebar
4. Add the #lightbox tag to Tags
5. Click Publish

The lightbox will be enabled only on posts with the #lightbox internal tag.

Disabling Lightbox for Specific Posts

To disable the lightbox for certain posts when it’s enabled globally, use the #disable-lightbox internal tag:

1. Log in to Ghost admin
2. Go to Posts, and open the post
3. Open the Post settings sidebar
4. Add the #disable-lightbox tag to Tags
5. Click Publish

The lightbox will be disabled only on posts with the #disable-lightbox internal tag.

Custom CDN

You can customize the CDN sources for PhotoSwipe library files using the photoswipeUrl, photoswipeLightboxUrl, and photoswipeCSSUrl options. This allows you to use a different CDN provider or host the library yourself:

<script>
window.pvs?.initLightbox?.({
    photoswipeUrl: 'https://cdn.jsdelivr.net/npm/photoswipe@5.4/+esm',
    photoswipeLightboxUrl: 'https://cdn.jsdelivr.net/npm/photoswipe@5.4/dist/photoswipe-lightbox.esm.js',
    photoswipeCSSUrl: 'https://cdn.jsdelivr.net/npm/photoswipe@5.4/dist/photoswipe.min.css',
});
</script>