fork from PhotoViewer
ImagepdfViewer
PhotoViewer is a JS plugin to view images just like in windows.
If you want to support IE8, please goto Magnify.
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 imagepdfviewer --save
Differences between photoviewer
support pdf
// source
// add a new render to pdf
...
build(imgsrc) {
// Create ImagepdfViewer HTML string
let imagepdfviewerHTML;
if(imgsrc.toLowerCase().includes('.pdf')){
imagepdfviewerHTML = this.pdfRender();
}else{
imagepdfviewerHTML = this.render();
}
}
...
pdfRender() {
const btnsTpl = {
minimize: `<button class="${NS}-button ${NS}-button-minimize" title="${this.options.i18n.minimize}">
${this.options.icons.minimize}
</button>`,
maximize: `<button class="${NS}-button ${NS}-button-maximize" title="${this.options.i18n.maximize}">
${this.options.icons.maximize}
</button>`,
close: `<button class="${NS}-button ${NS}-button-close" title="${this.options.i18n.close}">
${this.options.icons.close}
</button>`,
zoomIn: `<button class="${NS}-button ${NS}-button-zoom-in" title="${this.options.i18n.zoomIn}">
${this.options.icons.zoomIn}
</button>`,
zoomOut: `<button class="${NS}-button ${NS}-button-zoom-out" title="${this.options.i18n.zoomOut}">
${this.options.icons.zoomOut}
</button>`,
prev: `<button class="${NS}-button ${NS}-button-prev" title="${this.options.i18n.prev}">
${this.options.icons.prev}
</button>`,
next: `<button class="${NS}-button ${NS}-button-next" title="${this.options.i18n.next}">
${this.options.icons.next}
</button>`,
fullscreen: `<button class="${NS}-button ${NS}-button-fullscreen" title="${this.options.i18n.fullscreen}">
${this.options.icons.fullscreen}
</button>`,
actualSize: `<button class="${NS}-button ${NS}-button-actual-size" title="${this.options.i18n.actualSize}">
${this.options.icons.actualSize}
</button>`,
rotateLeft: `<button class="${NS}-button ${NS}-button-rotate-left" title="${this.options.i18n.rotateLeft}">
${this.options.icons.rotateLeft}
</button>`,
rotateRight: `<button class="${NS}-button ${NS}-button-rotate-right" title="${this.options.i18n.rotateRight}">
${this.options.icons.rotateRight}
</button>`
};
// ImagepdfViewer base HTML
const imagepdfviewerHTML = `<div class="${NS}-modal">
<div class="${NS}-inner">
<div class="${NS}-header">
<div class="${NS}-toolbar ${NS}-toolbar-head">
${this._createBtns(this.options.headToolbar, btnsTpl)}
</div>
${this._createTitle()}
</div>
<div class="${NS}-stage">
<iframe class="${NS}-image ${NS}-iframe" src="" alt="" />
</div>
</div>
</div>`;
return imagepdfviewerHTML;
}
...
Quick Start
Step 1: Include files
add css/ scss
;
;
add js
;
Step 2: Initializing
The usage of photoviewer is very simple, the PhotoViewer
constructor has 2 argument.
- Array with objects of image info.
- Options
// build images arrayvar 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 pluginvar viewer = 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