{"_id":"vitepress-plugin-lightbox","_rev":"4-5f78032ae7d7e5b40a2b4223ced25a8a","name":"vitepress-plugin-lightbox","dist-tags":{"latest":"1.0.3"},"versions":{"1.0.0":{"name":"vitepress-plugin-lightbox","version":"1.0.0","keywords":["vitepress","lightbox","markdown","images"],"author":{"name":"BadgerHobbs"},"license":"MIT","_id":"vitepress-plugin-lightbox@1.0.0","homepage":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox#readme","bugs":{"url":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox/issues"},"dist":{"shasum":"ce16cabc6c1a1cfd24f5f23dbe466b8c7f2a0d48","tarball":"https://registry.npmjs.org/vitepress-plugin-lightbox/-/vitepress-plugin-lightbox-1.0.0.tgz","fileCount":5,"integrity":"sha512-tZcZ9QpeC1pwQLeF2WASuuM++hbtlFagFVyuv09aUz8zB5A9PRS9kpAeCh2UQCuoPvkLVfMwOe8lgy21wo1HwQ==","signatures":[{"sig":"MEQCICFJ1uwLVVhKXaLcKEcCid5G1EYq9MlZkdlcjg2ZZ7jEAiBL7q+uq/ZIGU8h7N27N+MuSXR8YPdVVgrLKatJz4bulg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5042},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"2ea1ff13b96cd21d1e23e2158dbe17066e48b27a","scripts":{"build":"tsc"},"_npmUser":{"name":"badgerhobbs","email":"andyjriggs@gmail.com"},"repository":{"url":"git+https://github.com/BadgerHobbs/vitepress-plugin-lightbox.git","type":"git"},"_npmVersion":"10.7.0","description":"Plugin for VitePress to add support for viewing images in a lightbox.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"photoswipe":"^5.4.4","medium-zoom":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.2","@types/node":"^20.11.25"},"_npmOperationalInternal":{"tmp":"tmp/vitepress-plugin-lightbox_1.0.0_1719096105942_0.3623058610331009","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"vitepress-plugin-lightbox","version":"1.0.1","keywords":["vitepress","lightbox","markdown","images"],"author":{"name":"BadgerHobbs"},"license":"MIT","_id":"vitepress-plugin-lightbox@1.0.1","homepage":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox#readme","bugs":{"url":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox/issues"},"dist":{"shasum":"3d15365712df6eb1890a5b59cefed53d39ca5928","tarball":"https://registry.npmjs.org/vitepress-plugin-lightbox/-/vitepress-plugin-lightbox-1.0.1.tgz","fileCount":5,"integrity":"sha512-UAuEMICzpaG7s36uBUnwZM0Irb/5QypcKy6TwBgH8TXPrAwQzD/UkfNXjjYoi4ieWAMyNZ2H44vbFPr4rE3j9g==","signatures":[{"sig":"MEQCIEUgLqnQNzJoizM+IZXhbUis/+ysCxUcE0cdbYI/vpTyAiBqEN1CEXgVJiHW/Uw1HOyg2WeRIszELdNJFgZw4c9w6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5643},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"d206702ebb7b097b8aa2373238cc87402c024d97","scripts":{"build":"tsc"},"_npmUser":{"name":"badgerhobbs","email":"andyjriggs@gmail.com"},"repository":{"url":"git+https://github.com/BadgerHobbs/vitepress-plugin-lightbox.git","type":"git"},"_npmVersion":"10.7.0","description":"Plugin for VitePress to add support for viewing images in a lightbox.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"photoswipe":"^5.4.4","medium-zoom":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.2","@types/node":"^20.11.25"},"_npmOperationalInternal":{"tmp":"tmp/vitepress-plugin-lightbox_1.0.1_1719438143078_0.4562582662610448","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"vitepress-plugin-lightbox","version":"1.0.2","keywords":["vitepress","lightbox","markdown","images"],"author":{"name":"BadgerHobbs"},"license":"MIT","_id":"vitepress-plugin-lightbox@1.0.2","homepage":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox#readme","bugs":{"url":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox/issues"},"dist":{"shasum":"8d6302a38d3693e6df720ae4f2499f0e715be9b7","tarball":"https://registry.npmjs.org/vitepress-plugin-lightbox/-/vitepress-plugin-lightbox-1.0.2.tgz","fileCount":5,"integrity":"sha512-CLgz6iWzhTH/Buk0y/SPRy0Ukh+X9QPD1HMAlpVcBPPpENlKwtxKUrAzqwxgh/vOz+6Q+Kw5nKfPH1yL78Rlag==","signatures":[{"sig":"MEYCIQDe5lnvym54wUMwTC8eFWFe0rGaNTfSRb2nU5SlS401MgIhANmngEwXlW9ks5IgzSuM7AavhFJ1DVVm5dzXgWRGX2rg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":5883},"main":"dist/index.js","type":"module","types":"dist/index.d.ts","gitHead":"7302ade0f4b33dbfe9342e62fa0f6abb759aca1e","scripts":{"build":"tsc"},"_npmUser":{"name":"badgerhobbs","email":"andyjriggs@gmail.com"},"repository":{"url":"git+https://github.com/BadgerHobbs/vitepress-plugin-lightbox.git","type":"git"},"_npmVersion":"10.7.0","description":"Plugin for VitePress to add support for viewing images in a lightbox.","directories":{},"_nodeVersion":"20.14.0","dependencies":{"photoswipe":"^5.4.4","medium-zoom":"^1.1.0"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.4.2","@types/node":"^20.11.25"},"_npmOperationalInternal":{"tmp":"tmp/vitepress-plugin-lightbox_1.0.2_1719438751655_0.13367652232341376","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"vitepress-plugin-lightbox","version":"1.0.3","description":"Plugin for VitePress to add support for viewing images in a lightbox.","main":"dist/index.js","types":"dist/index.d.ts","type":"module","scripts":{"build":"tsc"},"devDependencies":{"@types/node":"^20.11.25","typescript":"^5.4.2"},"repository":{"type":"git","url":"git+https://github.com/BadgerHobbs/vitepress-plugin-lightbox.git"},"keywords":["vitepress","lightbox","markdown","images"],"author":{"name":"BadgerHobbs"},"license":"MIT","bugs":{"url":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox/issues"},"homepage":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox#readme","dependencies":{"medium-zoom":"^1.1.0","photoswipe":"^5.4.4"},"_id":"vitepress-plugin-lightbox@1.0.3","gitHead":"9e59c46375e496feba4cfba433d667f94052a78f","_nodeVersion":"20.19.4","_npmVersion":"10.8.2","dist":{"integrity":"sha512-40E/ofp5Uk9X/yC5Mz/jeVAhaG51fOXqPZokLue2r28czyucini+NmfIiabNZi+1bCvLBF5GNUz5TJIyuQSJLA==","shasum":"5bcc661d1a0c7086bc3b9b242291fabc18abcba6","tarball":"https://registry.npmjs.org/vitepress-plugin-lightbox/-/vitepress-plugin-lightbox-1.0.3.tgz","fileCount":5,"unpackedSize":5888,"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEQCIG6ebz5k0qFzlu4rRaXFjzHfN+7epqdkoiRKA6qCgNwlAiAx5DapBNaQxQZGmc/j2+bEA67H+oSlvwtGHfSoqzyqYQ=="}]},"_npmUser":{"name":"badgerhobbs","email":"andyjriggs@gmail.com"},"directories":{},"maintainers":[{"name":"badgerhobbs","email":"andyjriggs@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/vitepress-plugin-lightbox_1.0.3_1756247344851_0.9964892094299398"},"_hasShrinkwrap":false}},"time":{"created":"2024-06-22T22:41:45.940Z","modified":"2025-08-26T22:29:05.238Z","1.0.0":"2024-06-22T22:41:46.161Z","1.0.1":"2024-06-26T21:42:23.226Z","1.0.2":"2024-06-26T21:52:31.795Z","1.0.3":"2025-08-26T22:29:05.046Z"},"bugs":{"url":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox/issues"},"author":{"name":"BadgerHobbs"},"license":"MIT","homepage":"https://github.com/BadgerHobbs/vitepress-plugin-lightbox#readme","keywords":["vitepress","lightbox","markdown","images"],"repository":{"type":"git","url":"git+https://github.com/BadgerHobbs/vitepress-plugin-lightbox.git"},"description":"Plugin for VitePress to add support for viewing images in a lightbox.","maintainers":[{"name":"badgerhobbs","email":"andyjriggs@gmail.com"}],"readme":"# vitepress-plugin-lightbox\n\n[![Publish to NPM](https://github.com/BadgerHobbs/vitepress-plugin-lightbox/actions/workflows/publish.yml/badge.svg)](https://github.com/BadgerHobbs/vitepress-plugin-lightbox/actions/workflows/publish.yml) [![Deploy Example](https://github.com/BadgerHobbs/vitepress-plugin-lightbox/actions/workflows/deploy-example.yml/badge.svg)](https://github.com/BadgerHobbs/vitepress-plugin-lightbox/actions/workflows/deploy-example.yml)\n\nPlugin for VitePress to add support for viewing images in lightboxes, you can check out the example site [here](https://badgerhobbs.github.io/vitepress-plugin-lightbox/). It is also available on [NPM](https://www.npmjs.com/package/vitepress-plugin-lightbox).\n\n![vitepress-plugin-lightbox](https://github.com/BadgerHobbs/vitepress-plugin-lightbox/assets/23462440/d52b5ca7-2062-407e-9e0b-ae0d85d31e2c)\n\nThis plugin is built using the [medium-zoom](https://github.com/francoischalifour/medium-zoom) package.\n\n## Installation\n\nFirst, install the plugin from NPM.\n\n```bash\nnpm install -D vitepress-plugin-lightbox\n```\n\nThen import it and update your VitePress `config.mts` file to use the plugin as shown below.\n\n```ts\nimport { defineConfig } from \"vitepress\";\n\n// Import lightbox plugin\nimport lightbox from \"vitepress-plugin-lightbox\"\n\n// https://vitepress.dev/reference/site-config\nexport default defineConfig({\n  title: \"docs\",\n  description: \"my docs\",\n  cleanUrls: true,\n  themeConfig: {\n    ...\n  },\n  markdown: {\n    config: (md) => {\n      // Use lightbox plugin\n      md.use(lightbox, {});\n    },\n  },\n});\n```\n\nNow create the `.vitepress/theme` directory, and add the following two files.\n\n`.vitepress/theme/index.ts`\n\n```ts\nimport DefaultTheme from \"vitepress/theme\";\nimport Layout from \"./Layout.vue\";\n\nexport default {\n  extends: DefaultTheme,\n  Layout,\n};\n```\n\n`.vitepress/theme/Layout.vue`\n\n```ts\n<script setup>\nimport DefaultTheme from \"vitepress/theme\";\nimport { onMounted } from \"vue\";\nimport { useRouter } from \"vitepress\";\nimport mediumZoom from \"medium-zoom\";\n\nconst { Layout } = DefaultTheme;\nconst router = useRouter();\n\n// Setup medium zoom with the desired options\nconst setupMediumZoom = () => {\n  mediumZoom(\"[data-zoomable]\", {\n    background: \"transparent\",\n  });\n};\n\n// Apply medium zoom on load\nonMounted(setupMediumZoom);\n\n// Subscribe to route changes to re-apply medium zoom effect\nrouter.onAfterRouteChange = setupMediumZoom;\n</script>\n\n<template>\n  <Layout />\n</template>\n\n<style>\n.medium-zoom-overlay {\n  backdrop-filter: blur(5rem);\n}\n\n.medium-zoom-overlay,\n.medium-zoom-image--opened {\n  z-index: 999;\n}\n</style>\n```\n\n## Usage\n\nWhen 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.\n\n```md\n![image-1.0b9fa00a.jpg](./images/image-1.0b9fa00a.jpg)\n```\n\nTo view working examples deployed within a VitePress static site instance, you can checkout the repository example deployed via GitHub pages [here](https://badgerhobbs.github.io/vitepress-plugin-lightbox/).\n\n## License\n\nThe scripts and documentation in this project are released under the [MIT License](LICENSE).\n","readmeFilename":"README.md"}