Guide

This plugin will make the pictures in the body of the page enter the preview mode when clicked.

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.

Image Selection

By default, the plugin will select images according to the default theme's selector. If you are using a third-party theme, you can set one or more CSS selectors to the selector option.

Customize PhotoSwipe Options

You can pass options to photo-swipe by importing and calling definePhotoSwipeOptions in client config file:

// .vuepress/client.ts
import { defineClientConfig } from "@vuepress/client";
import { definePhotoSwipeOptions } from "vuepress-plugin-photo-swipe/client";

definePhotoSwipeOptions({
  // photoswipe options here
});

export default defineClientConfig({
  // ...
});

Operation Delay

If your theme adds animations when switching pages, you may need to delay when photo-swipe re-finds page images. You can configure this delay via the delay option, the default value is 800 (in milliseconds).

Locale Customization

You can add new locale config or modify existing ones through locales option.

import { defineUserConfig } from "vuepress";
import { photoSwipePlugin } from "vuepress-plugin-photo-swipe";

export default defineUserConfig({
  locales: {
    "/": {
      // this is a supported language
      lang: "en-US",
    },
    "/xx/": {
      // the plugin does not support this language
      lang: "mm-NN",
    },
  },

  plugins: [
    photoSwipePlugin({
      locales: {
        "/": {
          // Override share label text
          share: "Share with friends",
        },

        "/xx/": {
          // Complete locale config for `mm-NN` language here
        },
      },
    }),
  ],
});

For specific options, see Config → Locale Settings.