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.

1. Array with objects of image info.
2. 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);

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