https://github.com/nzbin/photoviewer
🖼️ A JS plugin to view images just like in Windows.
https://github.com/nzbin/photoviewer
draggable fullscreen hotkeys image-gallery image-viewer lightbox modal mousewheel movable photoviewer resizable responsive rotatable zoomable
Last synced: 17 days ago
JSON representation
🖼️ A JS plugin to view images just like in Windows.
- Host: GitHub
- URL: https://github.com/nzbin/photoviewer
- Owner: nzbin
- License: mit
- Created: 2018-07-07T03:33:13.000Z (almost 7 years ago)
- Default Branch: master
- Last Pushed: 2024-09-18T03:07:38.000Z (7 months ago)
- Last Synced: 2025-03-23T07:11:44.714Z (about 1 month ago)
- Topics: draggable, fullscreen, hotkeys, image-gallery, image-viewer, lightbox, modal, mousewheel, movable, photoviewer, resizable, responsive, rotatable, zoomable
- Language: JavaScript
- Homepage: https://nzbin.github.io/photoviewer/
- Size: 2.39 MB
- Stars: 364
- Watchers: 5
- Forks: 59
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
# PhotoViewer
[](https://travis-ci.org/nzbin/photoviewer)
[](https://www.npmjs.com/package/photoviewer)
[](https://github.com/nzbin/photoviewer/blob/master/LICENSE)
[](https://gitter.im/photoviewer/community)
[](https://opencollective.com/photoviewer)
PhotoViewer is a JS plugin to view images just like in Windows.
> If you want to support IE8, please goto [Magnify](https://github.com/nzbin/magnify/).
#### Quick links
[Documentation](https://nzbin.github.io/photoviewer/) |
[Examples](https://codepen.io/collection/DYVgMQ)
## Features
- Vanilla JS
- Modal draggable
- Modal resizable
- Modal maximizable
- Image movable
- Image zoomable
- Image rotatable
- Keyboard control
- Fullscreen showing
- Multiple instances
- Browser support IE9+
- RTL support
## Installation
You can install the plugin via npm
```sh
$ npm install photoviewer --save
```
## Quick Start
### Step 1: Include files
```scss
@use 'photoviewer';
```
```js
import PhotoViewer from 'photoviewer';
```
or
```html
```
### Step 2: Initializing
The usage of photoviewer is very simple, the `PhotoViewer`'s constructor has 2 arguments.
1. Array with objects of image info.
2. Options
```js
// build images array
var items = [
{
src: 'path/to/image1.jpg', // path to image
title: 'Image Caption 1' // If you skip it, there will display the original image name(image1)
},
{
src: 'path/to/image2.jpg',
title: 'Image Caption 2'
}
];
// define options (if needed)
var options = {
// optionName: 'option value'
// for example:
index: 0 // this option means you will start at first image
};
// Initialize the plugin
var photoviewer = new PhotoViewer(items, options);
```
### Step 3: Binding Event
At last, binding click event on a button element at initializing.
## Contributors
### Code Contributors
This project exists thanks to all the people who contribute. [[Contribute](CONTRIBUTING.md)].
### Financial Contributors
Become a financial contributor and help us sustain our community. [[Contribute](https://opencollective.com/photoviewer/contribute)]
#### Individuals
#### Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [[Contribute](https://opencollective.com/photoviewer/contribute)]
## License
MIT License