photoviewer v3.10.3
PhotoViewer
PhotoViewer is a JS plugin to view images just like in Windows.
If you want to support IE8, please goto Magnify.
Quick links
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
<!-- Core CSS file -->
<link href="/path/to/photoviewer.css" rel="stylesheet">
<!-- Core JS file -->
<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
// 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].
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
3 months ago
7 months ago
4 months ago
9 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
5 years ago
5 years ago
5 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago
6 years ago