Nonprofit Pizza Maker

    imagepdfviewer
    TypeScript icon, indicating that this package has built-in type declarations

    0.4.0 • Public • Published

    fork from PhotoViewer

    ImagepdfViewer

    Travis npm license Gitter Financial Contributors on Open Collective

    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

    Install

    npm i imagepdfviewer

    DownloadsWeekly Downloads

    1

    Version

    0.4.0

    License

    MIT

    Unpacked Size

    395 kB

    Total Files

    24

    Last publish

    Collaborators

    • dazan