Image Preview

By using @vuepress/plugin-photo-swipe, clicking images in pages will enter preview mode.

Disable Feature

If you don't need this feature, you can set plugins.photoSwipe: false in theme options to disable it:

.vuepress/theme.ts

import { 
hopeTheme
 } from "vuepress-theme-hope";

export default 
hopeTheme
({
  
plugins
: {
    
photoSwipe
: false,
  },
});

If you want to disable it in specific pages, you can set photoSwipe: false in the page's frontmatter.

---
photoSwipe: false
---

If you want to exclude specific images, you can add the no-view attribute to the image:

<img src="https://vuejs.org/images/logo.png" no-view />

Browse Mode

In preview mode, you can:

• Swipe left and right to preview other pictures on the page in order
• View the description of the picture
• Zoom in and zoom out the picture
• View pictures in full screen
• Download pictures
• Share pictures

Tips

• Besides clicking "×" in the upper right corner to exit the preview mode, scrolling up and down more than a certain distance will also exit preview mode
• On mobile devices, or using the PC trackpad, you can use pan and zoom gestures to pan and zoom in the preview mode

Customize Config

vuepress-theme-hope passes plugins.photoSwipe in theme options as plugin options to @vuepress/plugin-photo-swipe.

You can check the photo-swipe plugin documentation for advanced configuration.

Demo