Obsidian Lightbox

中文文档

A Lightbox plugin for Obsidian that allows you to click and zoom images and Mermaid diagrams.

Features

• 🖼️ Image Zoom - Click images in reading view to open a Lightbox with enlarged view
• 📊 Mermaid Support - Click Mermaid diagrams to zoom them as well
• 🔍 Zoom Controls - Support for zoom in, zoom out, and reset
• 🖱️ Scroll Zoom - Use mouse wheel to quickly adjust zoom level
• ✋ Drag to Pan - Drag to view different areas when zoomed in
• ⌨️ Keyboard Shortcut - Press ESC to quickly close
• 🎨 Smooth Animations - Elegant open/close transition effects

Installation

Manual Installation

1. Download the latest release
2. Extract to Obsidian plugins directory: <vault>/.obsidian/plugins/obsidian-lightbox/
3. Restart Obsidian
4. Enable the plugin in settings

Build from Source

# Clone the repository
cd <vault>/.obsidian/plugins/
git clone https://github.com/your-repo/obsidian-lightbox.git
cd obsidian-lightbox

# Install dependencies
npm install

# Build
npm run build

Required Files

To install the plugin, you only need these 3 files in the plugin folder:

• manifest.json - Plugin metadata (required)
• main.js - Compiled plugin code (required)
• styles.css - Stylesheet (required)

Usage

1. Open any note containing images or Mermaid diagrams in Obsidian
2. Switch to Reading View
3. Click any image or Mermaid diagram
4. The Lightbox popup will display the enlarged content

Controls

Action	Description
Click image/Mermaid	Open Lightbox
Scroll up	Zoom in
Scroll down	Zoom out
Mouse drag	Pan the image
Click background	Close Lightbox
ESC key	Close Lightbox
➕ button	Zoom in 25%
➖ button	Zoom out 25%
🔄 button	Reset zoom and position
✖️ button	Close

Development

# Development mode (auto-rebuild on changes)
npm run dev

# Production build
npm run build

License

MIT