VitePress image viewer with zoom, drag, fullscreen overlay, captions and download button. Ability to change the background to transparent. Automatically enhances all images on the page. Built with Vue 3.
✨ See it in action:
👉 https://miletorix.github.io/vitepress-image-viewer/
📦 NPM Package:
👉 https://www.npmjs.com/package/@miletorix/vitepress-image-viewer
npm i @miletorix/vitepress-image-viewer// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import ImageViewerP from '@miletorix/vitepress-image-viewer' //[!code ++]
import '@miletorix/vitepress-image-viewer/style.css' //[!code ++]
export default {
extends: DefaultTheme,
enhanceApp(ctx) {
ImageViewerP(ctx.app) //[!code ++]
}
}transparentBg?: boolean - Use transparent dark overlay instead of solid background. Default is true.
autoShowThumbnails?: boolean - Automatically show thumbnails on desktop. Default is true.
// docs/.vitepress/theme/index.ts
import type { Theme } from 'vitepress'
import DefaultTheme from 'vitepress/theme'
import ImageViewerP from '@miletorix/vitepress-image-viewer' //[!code ++]
import '@miletorix/vitepress-image-viewer/style.css' //[!code ++]
export default {
extends: DefaultTheme,
enhanceApp(ctx) {
ImageViewerP(ctx.app, { //[!code ++]
transparentBg: false, //[!code ++] default is true
autoShowThumbnails: false //[!code ++] default is true
}) //[!code ++]
}
}
