Implementation:AUTOMATIC1111 Stable diffusion webui Image Viewer
| Knowledge Sources | |
|---|---|
| Domains | UI_Frontend, Image_Preview, Lightbox |
| Last Updated | 2025-05-15 00:00 GMT |
Overview
Implements a full-screen lightbox modal for viewing generated images with navigation, zoom, tiling preview, live preview, and save functionality.
Description
This JavaScript module creates and manages a lightbox-style modal overlay for viewing gallery images at full size. On DOMContentLoaded, it constructs the complete modal DOM structure including control buttons (zoom toggle, tile preview, save, live preview toggle, close), navigation arrows (previous/next), and the main modal image element. Clicking a gallery image (when js_modal_lightbox is enabled) opens the modal with the image displayed. The modal supports keyboard navigation: ArrowLeft/ArrowRight for image switching, 's' for saving, and Escape to close. The modalImageSwitch function navigates through gallery images using modular arithmetic (negmod) for wraparound. The tiling preview mode hides the img element and sets the image as a repeating CSS background. Live preview mode shows the latest generation preview in the modal during active generation. The save function delegates to the appropriate tab's save button. The module also monitors for background changes via updateOnBackgroundChange, which updates the modal image when the gallery selection changes during live preview.
Usage
Click on any gallery preview image to open the full-screen lightbox. Use arrow keys or click the navigation arrows to browse images. Press 's' to save the current image. Click the zoom button to toggle fullscreen zoom. Click the tile button to preview tiling. Click the live preview toggle to show/hide generation progress in the modal. Press Escape or click outside the image to close.
Code Reference
Source Location
- Repository: AUTOMATIC1111_Stable_diffusion_webui
- File: javascript/imageviewer.js
- Lines: 1-268
Signature
function closeModal()
function showModal(event)
function negmod(n, m)
function updateOnBackgroundChange()
function modalImageSwitch(offset)
function saveImage()
function modalSaveImage(event)
function modalNextImage(event)
function modalPrevImage(event)
function modalKeyHandler(event)
function setupImageForLightbox(e)
function modalZoomSet(modalImage, enable)
function modalZoomToggle(event)
function modalLivePreviewToggle(event)
function modalTileImageToggle(event)
Import
// Loaded automatically by the web UI as part of the javascript/ directory
// Modal DOM is created on DOMContentLoaded
I/O Contract
Inputs
| Name | Type | Required | Description |
|---|---|---|---|
| event | MouseEvent or KeyboardEvent | Yes | User interaction event (click on gallery image, keyboard navigation, etc.) |
| offset | int | Yes | Direction offset for image switching (+1 for next, -1 for previous) |
| opts.js_modal_lightbox | bool | No | Global option controlling whether the lightbox is enabled |
| opts.js_modal_lightbox_initially_zoomed | bool | No | Whether to start in zoomed mode when opening the lightbox |
| opts.js_live_preview_in_modal_lightbox | bool | No | Whether to show live generation preview in the modal |
Outputs
| Name | Type | Description |
|---|---|---|
| (side effect) | DOM | Creates and manages the #lightboxModal element with all controls and image display |
Usage Examples
// User interaction: click on a gallery image to open lightbox
// The module auto-attaches click handlers to gallery images via setupImageForLightbox
// Keyboard shortcuts in modal:
// ArrowLeft -> previous image
// ArrowRight -> next image
// s -> save current image
// Escape -> close modal
// Middle-click on gallery image opens image in new tab (browser default behavior)
// Programmatic usage (internal):
showModal(clickEvent); // Open modal with clicked image
modalImageSwitch(1); // Navigate to next image
modalImageSwitch(-1); // Navigate to previous image
modalZoomSet(modalImage, true); // Enable zoom
closeModal(); // Close the lightbox