Package Exports

photoviewer
photoviewer/dist/photoviewer.css
photoviewer/src/js/photoviewer.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (photoviewer) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

PhotoViewer

photoviewer

PhotoViewer is a JS plugin to view images just like in Windows.

If you want to support IE8, please goto Magnify.

Quick links

Documentation | Examples

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

@use 'photoviewer';

import PhotoViewer from 'photoviewer';

<!-- 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's constructor has 2 arguments.

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