nzbin / photoviewer

🖼️ A JS plugin to view images just like in Windows.

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';

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

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

photoviewer's Issues

Problem on last image

When i open the last image, arrows (left and right) do not work and give an error on the following code:

       this.loadImg(this.groupData[index].src, function () {
          _this3._triggerHook('changed', index);
        }, function () {
          _this3._triggerHook('changed', index);
        });

Browser gives Uncaught TypeError: Cannot read property 'src' of undefined

I am using the "button way" as shown in your example and use something like:

$(document).on('click','.res img',function(){
 let a =  $(this).attr('index');
  new PhotoViewer(items, {index: a});
});

By the way it works fine with the newest jQuery version 3.4.0,

[Bug] Could not close window while loading image.

I can't click the close button when the image is loading.

When the viewer window is activated, the scroll bar of the background is frozen.

Great work.

One minor comment:
as the title suggests, when the viewer window is activated, the scroll bar of the background should still supposed to work if the wheel event is not happened within region of the activated window.

请问为什么拖动禁止不了啊

options = {
    index: $(this).index()-1,
    draggble:false,  
    resizable:false,
    movable:false,
    title:false,
    footToolbar:['zoomIn','zoomOut','prev','next','rotateRight'],
};

禁止不了拖动

请教一下react如何使用呢

Incompatible with happy-dom

Hi there! I'm using Vitest to run my tests, and for a performance boost I'm investigating rendering with happy-dom. However, when I try to run my tests, I get this error:

TypeError: Cannot set property isConnected of [object Object] which has only a getter
 ❯ new Node node_modules/happy-dom/src/nodes/node/Node.ts:57:29
 ❯ new Element node_modules/happy-dom/lib/nodes/element/Element.js:25:9
 ❯ new HTMLElement node_modules/happy-dom/lib/nodes/html-element/HTMLElement.js:17:9
 ❯ HTMLDocument.createElementNS node_modules/happy-dom/src/nodes/document/Document.ts:834:19
 ❯ HTMLDocument.createElement node_modules/happy-dom/src/nodes/document/Document.ts:803:15
 ❯ Object.<anonymous> node_modules/photoviewer/dist/photoviewer.common.js:97:22

I've seen this issue in a few libraries, including the axe-core library capricorn86/happy-dom#978 where they documented a trivial workaround.

Thanks for all your work on this library, it's awesome.

Dark mode

Hi,

First of all thanks for creating such a great plugin. I had always wanted to find something that resembles Windows photoviewer.

I have a couple of suggestion. Would you be able to introduce a dark mode that can be configured?
The other suggestion is if we can make the icons at the footer a bit bigger or make the icon and title size configurable?

Thanks

Feature Request: Preview images on bottom

Would it be possible to add a feature to list the images (thumbnails?) before and after the current (like previews) on the bottom like in the windows 10 photo viewer app?

Cannot use PhotoViewer with jquery datatable

Description

I use PhotoViewer together with jquery datatable with the expectation that the image in the datatable can be zoomed with PhotoViewer

Issue

With expectations as in the description I encountered the following problems:

Uncaught TypeError: Cannot read property 'src' of undefined
    at PhotoViewer.init (photoviewer.js:1917)
    at new PhotoViewer (photoviewer.js:1906)
    at HTMLAnchorElement.<anonymous> (<anonymous>:15:13)
    at HTMLAnchorElement.dispatch (jquery.3.2.1.min.js:3)
    at HTMLAnchorElement.q.handle (jquery.3.2.1.min.js:3)

Here are some screenshots :

but somehow it's work for some image

And this is the error one

Modal should be center w.r.t. the element in which its appended in, not w.r.t window

First of all, awesome code and awesome library! Thank you for this! But I think I found a bug.

Pls see screenshot below. There is a problem with this code. Modal should be centered inside the element in which it is appeded. Not inside the window.

RTL Bug

Hi
I use ng-matero.
In RTL mode, the Photoviewer is fixed on the right and cannot be moved with the mouse.

image title error

image path: "/libs/img/flags/est/São Paulo.png"

RESULT:

View PDF

hi, sir is there any option to view the pdf.

[email protected] 图片旋转90度后，放大缩小有问题

版本：3.5.3，
问题：预览图片时，旋转 90 度或者 270 度，会导致只能缩小，正常角度、旋转180度的情况正常。

https://nzbin.github.io/photoviewer/ 预览时可复现
解决方案：版本3.4.0 正常

ReferenceError: window is not defined

React里面使用photoviewer插件，报错，问题出在photoviewer\dist\photoviewer.common.js:25:16

Any ways to add icons to custom buttons?

Tried adding the keys of the custom buttons to icons but nothing happened.

var viewer = new PhotoViewer(items, {
  index: 0,
  footerToolbar: ['zoomIn','zoomOut','prev','fullscreen','next','actualSize','rotateRight','openInNew'],
  customButtons: {
    openInNew: {
      text: "新标签打开",
      title: "新标签打开",
      click: function (context, e) {
        window.open(context.img.src);
      }
    }
  },
  icons: {
	"openInNew": "<svg t=\"1614215430739\" class=\"icon\" viewBox=\"0 0 1024 1024\" version=\"1.1\" xmlns=\"http://www.w3.org/2000/svg\" p-id=\"4559\" width=\"16\" height=\"16\"><path d=\"M810.666667 810.666667H213.333333V213.333333h298.666667V128H213.333333a85.333333 85.333333 0 0 0-85.333333 85.333333v597.333334a85.333333 85.333333 0 0 0 85.333333 85.333333h597.333334c46.933333 0 85.333333-38.4 85.333333-85.333333v-298.666667h-85.333333v298.666667zM597.333333 128v85.333333h153.173334l-419.413334 419.413334 60.16 60.16L810.666667 273.493333V426.666667h85.333333V128h-298.666667z\" p-id=\"4560\"></path></svg>"
}});

Add custom svg icon for custom button

Would be nice to be able to add custom svg icon in the custom button in the footerToolbar ?

Option to pan images after zoom

Zoom feature becomes not much useful without being able to pan it. Would be awesome if you could provide it in future. Thanks!

pinch and zoom in mobile is not functional

Unfortunately pinch and zoom in mobile is not functional, how come it can zoom in & out with scroll but not in mobile?
Move is not working neither in mobile unfortunately

zIndex not working

Config of zIndex take no affects.

With pagination, Photoviewer is getting initialized multiple times, hence opens multiple instance of photoviewer.

I am binding images with pagination on demand call. Hence, after each page change I need to initialize photoviewer with new set of items. It looks like, after loading items on different page and initializing photoviewer, new instance of photoviewer gets initialized as well as previous instance also exists. This opens multiple instance of same image in photoviewer on clicking once on image.

I think, on initializing again, there should be an option to destroy old instance or there should be a way to update items in existing instance.

It's better to add a side space in the window for image description

Image description is a important factor for google SEO and also for personal notes.
Please consider adding this function.

Multiple Instances

Please could you tell me how to add multiple instances of photoviewer?
I can get it to work by duplicating the initialize script and changing the data-gallery name:
$('[data-gallery=photoviewer]')
$('[data-gallery=photoviewer2]')
However the site I am building will have hundreds of galleries that will be dynamically created so this is not an option.
Is there a way to restart the script if the links are within a parent div?
Any help will be greatly appreciated as I would love to use your amazing lightbox.
Many thanks
John

How to force to open with Fullscreen mode?

Hello.
How to force open with full screen mode?
I want to open it full screen on mobile devices.

Arrows Prev and Next

photoviewer-button photoviewer-button-prev
AND
photoviewer-button photoviewer-button-next are not working for me can you please solve this issus in js

photoviewer error while compiling angular

I am trying to run an angular project which has the dependency photoviewer, It used to work and recently I'm getting this error while compiling the angular project

`ERROR in ./node_modules/photoviewer/src/js/core.js 35:19
Module parse failed: Unexpected token (35:19)
File was processed with these loaders:

• ./node_modules/@angular-devkit/build-optimizer/src/build-optimizer/webpack-loader.js
  You may need an additional loader to handle the result of these loaders.
  | class PhotoViewer {
  | // Store modal instances

static instances = [];
|
| // Whether modal opened
`

I tried upgrading/downgrading the version, nothing helped, Can someone please help on this?

TIA!

Is there a way to dynamically add images after the plugin is initalized?

Hi,
Good plugin however it seems there is no way to add a image once the plugin in initialized. I tried to hook into before open and then modify the file list but that did not worked.

Pls let me know if there is a way.

replace `data-src` but can not show the photo

Hi nzbin,

Thanks for sharing.

I have meet a problem in steps2.

Way 2: Initializing as jQuery plugin

1.Using DOM structure is OK.

2. I want use this way:

<img data-gallery="jquery" data-src="big-1.jpg" src="small-1.jpg">

I have replace data-src and src with same jpeg, but I can see picture, click photo can not see it. Can you help me fix it?

Pls help check attached photo for details.

Thanks.

The key binding is supposed to be working on the "focused" window

When opening multiple instances, the key binding supposed to work on the "focused" window as in common OS.

Feature Request : Add Link to the Image in Photo viewer

It will be a good add-on feature to provide option to add a link to the image in the photoviewer template for each image.
similar to

src: src,
title: title,
link: link

error handling

How do I show an error if the image is no longer there?

Close popup When click outside and esc

How to close the photo viewer popup when clicking the ESC button and clicking the outside popup?

[Behavior] Image not centered while maximized or zoomed in.

Hi, thanks @nzbin for this great plugin.

I have submitted this issue for [Behavior] only.

Clicking on image and popup display is correct,
but when zoomed out OR maximized, image is fixed floated to right edge, not centered.
(Works correctly outside of <body> )
please help me out, or suggest override styling.

Thank you.

How to programatically change image after initialization?

After viewer is initialized, say I want to show nth image. Is there an api for this? Thanks!!