Image Viewer

approved

by fengshuzi

A powerful image viewer with gallery view, zoom, slideshow and more. - This plugin has not been manually reviewed by Obsidian staff.

2 stars468 downloadsUpdated 23d agoMIT

Image Viewer - Obsidian Plugin

A powerful image viewer for Obsidian with gallery view, zoom, slideshow, EXIF display, and more. Inspired by PicView.

Features

Image Browsing

  • Browse images in any vault folder with arrow keys or mouse
  • Support for 16+ formats: JPG, PNG, GIF, WebP, SVG, AVIF, HEIC, PSD, RAW, etc.
  • Thumbnail strip at the bottom for quick navigation
  • Configurable subfolder scanning and default folder

Zoom & Pan

  • Zoom in/out with +/- keys or mouse wheel
  • Drag to pan when zoomed in
  • Zoom modes: fit to window, fill window, actual size
  • Two scroll modes: navigate between images, or zoom/pan within image

Gallery View

  • Grid gallery with configurable thumbnail size (60–200px) and columns (3–12)
  • Smooth show/hide animations

Slideshow

  • Configurable interval (1–30 seconds)
  • Loop and random order options

Image Editing

  • Rotate clockwise/counter-clockwise
  • Flip horizontal
  • Crop

EXIF & File Info

  • Display camera info, GPS coordinates, exposure settings
  • File name, path, size, dimensions, dates

File Operations

  • Rename (F2)
  • Move to trash (Delete)
  • Permanent delete (Shift+Delete)

Installation

From Obsidian Community Plugins (Recommended)

Open Obsidian Settings → Community Plugins → Browse, and search for Image Viewer or fengshuzi to install directly.

From GitHub Release

  1. Go to Releases and download main.js, manifest.json, and styles.css
  2. Create folder .obsidian/plugins/image-viewer/ in your vault
  3. Copy the downloaded files into it
  4. Restart Obsidian and enable the plugin in settings

Manual Build

cd /path/to/your/vault/.obsidian/plugins
git clone https://github.com/fengshuzi/image-viewer.git
cd image-viewer
npm install
npm run build

Usage

Open the image viewer from the command palette or ribbon icon, then browse images in your configured folder.

Keyboard Shortcuts

KeyAction
/ or A / DPrevious / Next image
Home / EndFirst / Last image
+ / -Zoom in / out
RReset zoom
Scroll LockToggle scroll mode (navigate vs. zoom)
] / [Rotate CW / CCW
FFlip horizontal
CCrop
GToggle gallery view
IToggle info panel
F5Toggle slideshow
LToggle loop
F11Fullscreen
Alt+ZHide/show UI
F2Rename file
DeleteMove to trash
Shift+DeleteDelete permanently
?Show help

Settings

  • Theme: dark / light / system
  • Background color
  • Gallery: thumbnail size, columns
  • Navigation: scroll behavior, loop, sort order (name/date/size/random)
  • Slideshow: interval, loop, random
  • Zoom: step size, default mode
  • Folder: default folder, subfolder scanning

Development

npm run dev      # Watch mode with sourcemaps
npm run build    # Production build
npm run deploy   # Build + copy to vaults
npm run release  # Build + git tag + GitHub Release

License

MIT


☕ Support the Author

If this plugin helps you, consider buying the author a coffee!

WeChat Donate

WeChat

For plugin developers

Search results and similarity scores are powered by semantic analysis of your plugin's README. If your plugin isn't appearing for searches you'd expect, try updating your README to clearly describe your plugin's purpose, features, and use cases.