Nascent Personality Manifestation
    Have ideas to improve npm?Join in the discussion! »

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

    3.5.8 • Public • Published

    PhotoViewer

    Travis npm license Gitter Financial Contributors on Open Collective

    PhotoViewer is a JS plugin to view images just like in windows. [Examples]

    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 photoviewer --save

    Quick Start

    Step 1: Include files

    @import 'photoviewer/dist/photoviewer.css';
    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>

    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 PhotoViewer(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 photoviewer

    DownloadsWeekly Downloads

    2,077

    Version

    3.5.8

    License

    MIT

    Unpacked Size

    401 kB

    Total Files

    25

    Last publish

    Collaborators

    • avatar