PhotoViewer
PhotoViewer is a JS plugin to view images just like in Windows.
If you want to support IE8, please goto Magnify.
Quick links
Documentation |
Examples
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
$ npm install photoviewer --save
Quick Start
Step 1: Include files
@use 'photoviewer';
import PhotoViewer from 'photoviewer';
or
<link href="/path/to/photoviewer.css" rel="stylesheet">
<script src="/path/to/photoviewer.js"></script>
Step 2: Initializing
The usage of photoviewer is very simple, the PhotoViewer
's constructor has 2 arguments.
- Array with objects of image info.
- Options
var items = [
{
src: 'path/to/image1.jpg',
title: 'Image Caption 1'
},
{
src: 'path/to/image2.jpg',
title: 'Image Caption 2'
}
];
var options = {
index: 0
};
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].
Financial Contributors
Become a financial contributor and help us sustain our community. [Contribute]
Individuals
Organizations
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
License
MIT License