Imagepdfviewer NPM

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

@import 'imagepdfviewer/dist/style/photoviewer.css';

import 'imagepdfviewer/dist/style';

add js

import ImagepdfViewer from 'imagepdfviewer';

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 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 viewer = new ImagepdfViewer(items, options);