PhotoViewer

$ npm install photoviewer --save

@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>

// 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);

<a data-gallery="manual" href="big-1.jpg">
  <img src="small-1.jpg">
</a>
<a data-gallery="manual" href="big-2.jpg">
  <img src="small-2.jpg">
</a>
<a data-gallery="manual" href="big-3.jpg">
  <img src="small-3.jpg">
</a>

$('[data-gallery=manual]').click(function (e) {

  e.preventDefault();

  var items = [],
    // get index of element clicked
    options = {
      index: $(this).index()
    };

  // looping to create images array
  $('[data-gallery=manual]').each(function () {
    let src = $(this).attr('href');
    items.push({
      src: src
    });
  });

  new PhotoViewer(items, options);

});

index number 0

The images array index. If 0, it will show first image when photoviewer opened.

draggable boolean true

If ture, it allow modal dragging.

resizable boolean true

If ture, it allow modal resizing.

movable boolean true

If ture, it allow image moving.

keyboard boolean true

Make photoviewer can be controled by keyboard. The shortcut key is similar to Windows photo viewer.

• ← prev image
• → next image
• + zoom in image
• - zoom out image
• Ctrl + Alt + 0 image autual size
• Ctrl + , rotate image left
• Ctrl + . rotate image right
• Q quit the photoviewer

title boolean true

If ture, it will show image title on header.

fixedModalSize boolean false

This option will set photoviewer's size when it opened. If false, the modal initialized size will fit to image size. If true, the modal initialized size will be set with modalWidth and modalHeight.

modalWidth number 320

It's the modal min width or modal initialized width when opened.

modalHeight number 320

It's the modal min height or modal initialized height when opened.

gapThreshold number 0.02

The gap size threshold. There will have a gap if modal too large to beyond the browser. Its min value is 0, means the modal's width or height should be equal to browser window if it's too large.

ratioThreshold number 0.01

Image zoom ratio threshold.

minRatio number 0.1

The min ratio to show image. 0.1 means the image can be zoomed 0.1x from original size.

maxRatio number 16

The max ratio to show image. 16 means the image can be zoomed 16x from original size.

headerToolbar array ['maximize','close']

The buttons display in header toolbar.

footerToolbar array ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight']

The buttons display in footer toolbar.

initMaximized boolean false

If false, the modal size will be set of image size or what you set with modalWidth and modalHeight. If true, the modal size will be set maximized when initialized just like other lightbox.

initAnimation boolean true

If false, it will not have animation at plugin's initialized.

fixedModalPos boolean false

If true, the modal position will be fixed when change images.

zIndex number 1090

The modal style of z-index, it is useful with multiple instances.

dragHandle string | null

The handle of draggable. Default null which whole modal can be dragging.

multiInstances boolean true

If false, it can only open single photoviewer.

icons object

You can customize the button icon with the following key:

icons: {
  minimize: '<svg>...</svg>',
  maximize: '<svg>...</svg>',
  close: '<svg>...</svg>',
  zoomIn: '<svg>...</svg>',
  zoomOut: '<svg>...</svg>',
  prev: '<svg>...</svg>',
  next: '<svg>...</svg>',
  fullscreen: '<svg>...</svg>',
  actualSize: '<svg>...</svg>',
  rotateLeft: '<svg>...</svg>',
  rotateRight: '<svg>...</svg>',
}

i18n object

You can customize the button title with the following key:

i18n: {
  minimize: 'minimize',
  maximize: 'maximize',
  close: 'close',
  zoomIn: 'zoom-in (+)',
  zoomOut: 'zoom-out (-)',
  prev: 'prev (←)',
  next: 'next (→)',
  fullscreen: 'fullscreen',
  actualSize: 'actual-size (Ctrl+Alt+0)',
  rotateLeft: 'rotate-left (Ctrl+,)',
  rotateRight: 'rotate-right (Ctrl+.)',
}

progressiveLoading boolean true

If true, the image will be rendered progressively.

appendTo string 'body'

The DOM element which photoviewer will be added to.

customButtons object {}

new PhotoViewer(items, {
  footerToolbar: [
    ...
    'myCustomButton'
  ],
  customButtons: {
    myCustomButton: {
      text: 'custom!',
      title: 'custom!',
      click: function (context, e) {
        alert('clicked the custom button!');
      }
    }
  }
});

Each customButton entry accepts the following properties:

• text - the text to be display on the button itself.
• title - the title to be display when hover the button.
• click - a callback function that is called when the button is clicked.

positionFixed boolean true

If true, the modal css position will be set fixed otherwise it will be set absolute.

initModalPos object {}

You can set the modal position manually with value top right bottom left.

animationDuration number 400

The modal animation duration of transform on init.

animationEasing string 'ease-in-out'

The modal animation easing function.

errorMsg string | (context, index) => string ''

Error message when image could not be loaded.

Photoviewer comes with a bunch of useful events you can listen.

Using callbacks parameter on photoviewer initialization:

new PhotoViewer(items, {
  callbacks: {
    beforeOpen: function(context){
      // Will fire before modal is opened
    },
    opened: function(context){
      // Will fire after modal is opened
    },
    beforeClose: function(context){
      // Will fire before modal is closed
    },
    closed: function(context){
      // Will fire after modal is closed
    },
    beforeChange: function(context, index){
      // Will fire before image is changed
      // The argument index is the current image index of image group
    },
    changed: function(context, index){
      // Will fire after image is changed
      // The argument index is the next image index of image group
    }
  }
});

open()

Open the photoviewer. It will execute automatically on init.

close()

Close the photoviewer and remove the instance.

jump(step)

Change images according to step.

• step number - The step for changing images.

jumpTo(index)

Change to an image with the index number.

• index number - Index number of the image.

rotate(degree)

Rotate the image with a relative degree.

• degree number - Degree of the image rotation.

rotateTo(degree)

Rotate the image to an absolute degree.

• degree number - Degree of the image rotation.

zoom(ratio[, origin])

Zoom the image with a relative ratio.

• ratio number - Ratio for image zoomed.
• origin object - Origin coordinates for image zoomed.

zoomTo(ratio[, origin])

Zoom the image to an absolute ratio.

• ratio number - Ratio for image zoomed.
• origin object - Origin coordinates for image zoomed.