PhotoViewer is a JS plugin to view images just like in Windows.
If you want to support IE8, please goto Magnify.
- 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
You can install the plugin via npm
$ npm install photoviewer --save@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>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);At last, binding click event on a button element at initializing.
This project exists thanks to all the people who contribute. [Contribute].
Become a financial contributor and help us sustain our community. [Contribute]
Support this project with your organization. Your logo will show up here with a link to your website. [Contribute]
MIT License