Allow images to be zoomed in on click

[noClaps]

Is your feature request related to a problem? Please describe.

Usually when someone is reading a blog or documentation, there will be images to help explain the content better to the reader, such as screenshots. Sometimes if the screenshot itself is too small, users can click on the image to zoom in, and click on it again to zoom out.

Describe the solution you'd like

I'd like a way for images to be zoomed in on click, and on clicking the image again, zooming back out to the content.

Describe alternatives you've considered

There is medium-zoom, which was integrated into VuePress v2. There is also Lightbox.

I would have used these libraries, but I am not that good at JavaScript and using NPM, so I wouldn't know how to integrate them into my VitePress site, or if they even can be integrated.

Additional context

No response

Validations

• Follow our Code of Conduct
• Read the docs.
• Read the Contributing Guidelines.
• Check that there isn't already an issue that asks for the same feature to avoid creating a duplicate.

[brc-dd]

if they even can be integrated

Yeah sure it can be, and its quite easy too. Just run npm i medium-zoom and then you can do stuff like this:

# Hey There

![](https://images.pexels.com/photos/106118/pexels-photo-106118.jpeg){data-zoomable}

<script setup>
import { onMounted } from 'vue';
import mediumZoom from 'medium-zoom';

onMounted(() => {
  mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
});
</script>

<style>
.medium-zoom-overlay {
  z-index: 20;
}

.medium-zoom-image {
  z-index: 21;
}
</style>

Here is a demo: https://stackblitz.com/edit/vite-qdzzmm?file=docs%2Findex.md

[noClaps]

Hmm, alright, I'll try it out. Is there a way to apply this globally? One way I can think of is using the index.js file, but I don't know how to implement it that way.

Also, will this feature be added to VitePress? If not, you can close the issue.

[brc-dd]

Is there a way to apply this globally?

In next version you'll be able to add a setup function in theme (added this in #856 itself). I'll update the demo once it is available.

[hooray]

Need this feature too, looking forward to the next version

[hooray]

@noClaps At this time, you can use globally like this:

// index.js
import Theme from 'vitepress/theme'
import ZoomImg from './components/ZoomImg.vue'

export default {
    ...Theme,
    enhanceApp({ app }) {
        app.component('ZoomImg', ZoomImg)
    }
}

<!-- ZoomImg.vue -->

<script setup>
import { withBase } from 'vitepress'
import { onMounted, ref } from 'vue'
import mediumZoom from 'medium-zoom'

defineProps({
    src: String
})

const imgRef = ref(null)

onMounted(() => {
    mediumZoom(imgRef.value, { background: 'var(--vp-c-bg)' });
})
</script>

<template>
    <img ref="imgRef" :src="withBase(src)">
</template>

<style>
.medium-zoom-overlay {
    z-index: 20;
}
.medium-zoom-image {
    z-index: 21;
}
</style>

now you can use <ZoomImg src="/some-img.png" /> to replace ![](/some-img.png)

[ywmail]

@hooray I updated my theme/index.ts to import ZoomImg, it works fine in dev mode but breaks in build mode. Vitepress cannot handle the img assets in build mode, the image file doesn't be copied to the dist folder and the src of img tag doesn't be transformed.

[brc-dd]

I've updated the example, you now can simply do:

// .vitepress/theme/index.js

import DefaultTheme from 'vitepress/theme';
import { onMounted } from 'vue';
import mediumZoom from 'medium-zoom';

import './index.css';

export default {
  ...DefaultTheme,
  setup() {
    onMounted(() => {
      mediumZoom('[data-zoomable]', { background: 'var(--vp-c-bg)' });
    });
  },
};

/* .vitepress/theme/index.css */

.medium-zoom-overlay {
  z-index: 20;
}

.medium-zoom-image {
  z-index: 21;
}

Then in markdown:

![](path/to/file.jpg){data-zoomable}

If you want to enable this for all images without explicitly adding {data-zoomable}, you can change that mediumZoom call to this:

mediumZoom('.main img', { background: 'var(--vp-c-bg)' });

[ekil1100]

@brc-dd I tried this method, it is not working when comes from another route. Need to refresh page to make it work.

[brc-dd]

Ah, I'll look into that. Might need to initialise medium-zoom inside a watcher.

[Zhengqbbb]

Ah, I'll look into that. Might need to initialise medium-zoom inside a watcher.

My website's medium-zoom use wacher.

watch(
    () => router.route.path,
    () => nextTick(() => zoom.refresh()),
  )

About medium-zoom usage. Can see:
https://github.com/Zhengqbbb/cz-git/blob/5637a6006beaa7124d96a90177bb75fb33d6a764/docs/.vitepress/theme/index.ts#L26

[arcqiufeng]

Here is a demo: https://stackblitz.com/edit/vite-qdzzmm?file=docs%2Findex.md

I followed the demo and got it works. But only a little problem:

When I open my page first it doesn't work. Then I press F5 to refresh the page, then I will get the zoom function.

Why it can't work when first open the page?