# fengyuanchen/viewerjs

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/fengyuanchen-viewerjs).**

8,187 stars · 1,249 forks · JavaScript · mit

## Links

- GitHub: https://github.com/fengyuanchen/viewerjs
- Homepage: https://fengyuanchen.github.io/viewerjs/
- awesome-repositories: https://awesome-repositories.com/repository/fengyuanchen-viewerjs.md

## Topics

`image` `image-viewer` `javascript` `viewer`

## Description

Viewerjs is a JavaScript image viewer library and frontend media display tool. It functions as an image gallery component and web-based manipulator for rendering images within browser interfaces.

The library enables interactive image inspection through zooming, panning, rotating, and flipping operations. It supports both full-screen modal overlays and embedded inline page rendering to accommodate different display requirements.

The project includes systems for gallery navigation, such as automated slideshows and index-based selection. It provides interface controls for keyboard-driven navigation, UI customization, and dynamic synchronization of image sources during runtime.

## Tags

### User Interface & Experience

- [Full-Screen Image Viewers](https://awesome-repositories.com/f/user-interface-experience/full-screen-image-viewers.md) — Implements a full-screen image viewer with a customizable interface for high-resolution media display. ([source](https://fengyuanchen.github.io/viewerjs))
- [Media Display Components](https://awesome-repositories.com/f/user-interface-experience/media-display-components.md) — Acts as a client-side utility for rendering images in floating overlays or embedded page layouts.
- [Image Pan and Zoom Controls](https://awesome-repositories.com/f/user-interface-experience/2d-panning-controllers/image-pan-and-zoom-controls.md) — Enables detailed image inspection through smooth zooming and coordinate-based panning. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs@main/README.md))
- [Media Galleries](https://awesome-repositories.com/f/user-interface-experience/media-galleries.md) — Provides a navigable collection of images featuring directional controls and automated playback. ([source](https://fengyuanchen.github.io/viewerjs/))
- [Image View Components](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components.md) — Provides a specialized component for displaying and navigating image collections within a user interface.
- [Image Manipulation Tools](https://awesome-repositories.com/f/user-interface-experience/ui-components/image-view-components/image-manipulation-tools.md) — Provides tools for adjusting image scale, orientation, and magnification within the browser.
- [Zoomable Image Views](https://awesome-repositories.com/f/user-interface-experience/zoomable-image-views.md) — Implements a UI component for browsing and navigating a collection of zoomable images via an overlay.
- [Slideshow Displays](https://awesome-repositories.com/f/user-interface-experience/data-display-components/slideshow-displays.md) — Includes a capability to automatically cycle through an image collection in a playback sequence. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs@main/README.md))
- [Viewport Mode Toggles](https://awesome-repositories.com/f/user-interface-experience/full-screen-viewport-layouts/responsive-layout-switches/viewport-mode-toggles.md) — Provides the ability to toggle between full-screen and inline display modes for the viewer.
- [Inline Viewer Integration](https://awesome-repositories.com/f/user-interface-experience/image-embeddings/inline-viewer-integration.md) — Allows integrating the image viewer directly into a web page layout instead of a floating overlay.
- [Keyboard Navigation](https://awesome-repositories.com/f/user-interface-experience/keyboard-navigation.md) — Enables interface control and gallery navigation through accessible keyboard shortcuts.
- [Keyboard Shortcuts](https://awesome-repositories.com/f/user-interface-experience/keyboard-shortcuts.md) — Provides configurable keyboard shortcuts for zooming, image navigation, and exiting full-screen mode. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs@main/README.md))
- [Window Display Modes](https://awesome-repositories.com/f/user-interface-experience/terminal-user-interfaces/layout-structural-components/interface-display-modes/full-screen-modes/window-display-modes.md) — Provides controls to switch between maximized full-screen and overlay viewing states. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs@main/README.md))
- [Input-to-Action Mappings](https://awesome-repositories.com/f/user-interface-experience/touch-gesture-handlers/touch-event-processors/coordinate-to-translation-mapping/input-to-action-mappings.md) — Translates mouse wheel, keyboard, and touch movements into specific image manipulation and navigation actions.

### Part of an Awesome List

- [Image Manipulation](https://awesome-repositories.com/f/awesome-lists/media/image-manipulation.md) — Provides capabilities for adjusting image magnification via manual controls, mouse wheels, and touch gestures. ([source](https://fengyuanchen.github.io/viewerjs/))
- [Index Navigation](https://awesome-repositories.com/f/awesome-lists/devtools/carousel-and-gallery/index-navigation.md) — Tracks the current image position within a collection to enable sequential navigation and playback.

### Graphics & Multimedia

- [UI-Based View Manipulators](https://awesome-repositories.com/f/graphics-multimedia/image-manipulation-modules/ui-based-view-manipulators.md) — Provides interactive tools for zooming, rotating, and flipping images within the browser interface. ([source](https://fengyuanchen.github.io/viewerjs))
- [Image Orientation Manipulators](https://awesome-repositories.com/f/graphics-multimedia/image-orientation-manipulators.md) — A feature in the project to change the orientation of an image by applying rotation degrees and horizontal or vertical flipping. ([source](https://cdn.jsdelivr.net/gh/fengyuanchen/viewerjs@main/README.md))
- [Interactive Image Viewers](https://awesome-repositories.com/f/graphics-multimedia/interactive-image-viewers.md) — Provides a component for interactively zooming, panning, rotating, and flipping high-resolution images.

### Software Engineering & Architecture

- [Overlay Rendering Architectures](https://awesome-repositories.com/f/software-engineering-architecture/overlay-rendering-architectures.md) — Implements an architectural pattern that separates the image viewing overlay from the primary page content.
- [Modal Navigation Renderers](https://awesome-repositories.com/f/software-engineering-architecture/overlay-rendering-architectures/modal-navigation-renderers.md) — Implements a rendering layer that displays images as floating modals or lightboxes over the page. ([source](https://fengyuanchen.github.io/viewerjs/))