vitepress-plugin-lightbox
v1.0.2
Published
Plugin for VitePress to add support for viewing images in a lightbox.
Downloads
57,420
Maintainers
Readme
vitepress-plugin-lightbox
Plugin for VitePress to add support for viewing images in lightboxes, you can check out the example site here. It is also available on NPM.
This plugin is built using the medium-zoom package.
Installation
First, install the plugin from NPM.
npm install -D vitepress-plugin-lightbox
Then import it and update your VitePress config.mts
file to use the plugin as shown below.
import { defineConfig } from "vitepress";
// Import lightbox plugin
import lightbox from "vitepress-plugin-lightbox"
// https://vitepress.dev/reference/site-config
export default defineConfig({
title: "docs",
description: "my docs",
cleanUrls: true,
themeConfig: {
...
},
markdown: {
config: (md) => {
// Use lightbox plugin
md.use(lightbox, {});
},
},
});
Now create the .vitepress/theme
directory, and add the following two files.
.vitepress/theme/index.ts
import DefaultTheme from "vitepress/theme";
import Layout from "./Layout.vue";
export default {
extends: DefaultTheme,
Layout,
};
.vitepress/theme/Layout.vue
<script setup>
import DefaultTheme from "vitepress/theme";
import { onMounted } from "vue";
import { useRouter } from "vitepress";
import mediumZoom from "medium-zoom";
const { Layout } = DefaultTheme;
const router = useRouter();
// Setup medium zoom with the desired options
const setupMediumZoom = () => {
mediumZoom("[data-zoomable]", {
background: "transparent",
});
};
// Apply medium zoom on load
onMounted(setupMediumZoom);
// Subscribe to route changes to re-apply medium zoom effect
router.onAfterRouteChanged = setupMediumZoom;
</script>
<template>
<Layout />
</template>
<style>
.medium-zoom-overlay {
backdrop-filter: blur(5rem);
}
.medium-zoom-overlay,
.medium-zoom-image--opened {
z-index: 999;
}
</style>
Usage
When you add images to your markdown files, like the example below, they are now can automatically be clicked to view in a lightbox. See the /example
directory within the repository for a full working example of how to use the plugin with VitePress.
![image-1.0b9fa00a.jpg](./images/image-1.0b9fa00a.jpg)
To view working examples deployed within a VitePress static site instance, you can checkout the repository example deployed via GitHub pages here.
License
The scripts and documentation in this project are released under the MIT License.