---
title: "Custom Image Lightbox"
description: "The theme includes a built-in lightbox feature for image galleries. Learn how to use and customize this feature."
url: "https://www.priority.vision/docs/guides/custom-image-lightbox"
scope: shared
appliesTo: [Essence, Scope, Thoughts, Feed, Moment, Aspect, OnFlow, Thesis, Format]
lastUpdated: 2026-09-18
---

# Image Lightbox

The theme comes with a built-in lightbox feature that enhances the viewing experience of images on your site. The lightbox uses the [PhotoSwipe](https://photoswipe.com/) library to provide a smooth, interactive image viewing experience.

    [Code Injection](/docs/guides/custom-code-injection/) is required to add custom JS.

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

```html
<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:

```html
<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:

```html
<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
1. Go to **Posts**, and open the post
1. Open the ** Post settings** sidebar
1. Add the `#lightbox` tag to **Tags**
1. Click **Publish**

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

    Remember that internal tags starting with `#` are not visible to readers and are used only for theme features and integrations.

## 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
1. Go to **Posts**, and open the post
1. Open the ** Post settings** sidebar
1. Add the `#disable-lightbox` tag to **Tags**
1. Click **Publish**

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

    Remember that internal tags starting with `#` are not visible to readers and are used only for theme features and integrations.

### 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:

```html
<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>
```

## Documentation Index
> Fetch the complete documentation index at: https://www.priority.vision/docs/llms.txt
> Use this file to discover all available pages before exploring further.