![\"Ruchika\"/](\"https://avatars2.githubusercontent.com/u/30324532?v=4\")
Ruchika
📖
![\"Sudhanshu](\"https://avatars1.githubusercontent.com/u/3096766?v=4\")
Sudhanshu Yadav
📖
![\"Amrit](\"https://avatars0.githubusercontent.com/u/2039539?v=4\")
Amrit Kahlon
📖
![\"10000\"/](\"https://avatars2.githubusercontent.com/u/3347256?v=4\")
10000
📖
![](\"image.png\")
\r\n```\r\n\r\n```js\r\nimport ImageViewer from \"iv-viewer\";\r\n\r\nconst image = document.querySelector(\"#image\");\r\nconst viewer = new ImageViewer(image, options); // check options section for supported options\r\n```\r\n\r\n### Options\r\n\r\n| Option | Allowed Value | Default | Description |\r\n| ---------------- | -------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |\r\n| zoomValue | number in percentage | 100 | It defines the initial zoom value of the image. |\r\n| maxZoom | number in percentage | 500 | It defines the max limit for the zoom value of the image. |\r\n| snapView | boolean | true | If true will show snap view. |\r\n| refreshOnResize | boolean | true | Defines whether to refresh the viewer on resize of window. This is available only for Container and Image mode. On FullScreen mode it will refresh on window resize by default. |\r\n| zoomOnMouseWheel | boolean | true | Defines weather to allow zoom with mouse scroll or not. |\r\n| hasZoomButtons | boolean | true | Defines weather to add zoom buttons or not |\r\n| zoomStep | number | 50 | The number of which the zoom should increase/decrease when the buttons are clicked |\r\n| listeners | object | null | multiple useful callbacks that could use in-order to get the current state of the viewer |\r\n\r\n### The Listeners\r\n\r\nThere are multiple listeners you can register with each viewer instance\r\n\r\n```js\r\nimport ImageViewer from \"iv-viewer\";\r\n\r\nconst viewer = new ImageViewer(element, {\r\n listeners: {\r\n onInit: callback(data), // called when the instance is initiated\r\n onDestroy: callback(), // called when the instance is destroyed\r\n onImageLoaded: callback(data), // called on image load\r\n onZoomChange: callback(data), // called on zoom in/out\r\n },\r\n});\r\n```\r\n\r\n### Callback Data\r\n\r\nThe data passed to each callback is very useful, it contains the current instance with more info that you can use to react to the instance state\r\n\r\n| Option | dataType | Description |\r\n| ---------- | ----------- | -------------------------------------------------------------------------- |\r\n| container | HTMLElement | The current container of the viewer |\r\n| snapView | HTMLElement | The snap view element in the viewer |\r\n| zoomValue | Number | The current zoom value |\r\n| reachedMin | boolean | A boolean value that determine if the zoom value reached the initial zoom. |\r\n| reachedMax | boolean | A boolean value that determine if the zoom value reached the maximum zoom. |\r\n| instance | ImageViewer | The current instance which contains all other info if needed |\r\n\r\n### API (ImageViewer)\r\n\r\nCreating an instance\r\n\r\n```js\r\nimport ImageViewer from \"iv-viewer\";\r\n\r\nconst viewer = new ImageViewer(element, options);\r\n```\r\n\r\nHere the first argument is the element, which can be container where viewer will be loaded, or it can be a image in which case viewer will be initialized in a image mode.\r\n\r\nYou can also pass a selector directly instead of a DOM element.\r\n\r\n```js\r\nconst viewer = new ImageViewer(\"#element\", options);\r\n```\r\n\r\nSecond argument is to provide configuration options for the ImageViewer. This argument is optional.\r\n\r\n#### Instance methods\r\n\r\n**load(imgSrc, highResImg)**\r\n\r\nLoad an image to the viewer. You can pass two different resolution of the image as first and second argument (optional). See why do you need it at [better image loading](#better-image-loading) section.\r\n\r\n```js\r\nviewer.load(\"image.png\", \"hi-res-image.png\");\r\n```\r\n\r\nNote that this is just required for the container mode, as in image mode you can just use `src` and `data-high-res-src` attribute and the image will load by itself. See [image mode](#image-mode) example\r\n\r\n**zoom(zoomValue, point)**\r\n\r\nzoomValue: A percentage value to which you want to zoom the image.\r\n\r\npoint(optional): Point {x, y} is the coordinate of the container which would act as the center for the zoom. If not defined, it will take the center of the container as the zooming point.\r\n\r\n```js\r\nviewer.zoom(300, { x: 500, y: 500 });\r\n```\r\n\r\n**resetZoom()**\r\n\r\nReset zoom to the default or provided initial zoomValue.\r\n\r\n```js\r\nviewer.resetZoom();\r\n```\r\n\r\n**refresh()**\r\n\r\nMethod to manually refresh the viewer. It will reset the zoom and pan. It will also recalculate the dimension of container, window and image in case if that is changed.\r\n\r\n```js\r\nviewer.refresh();\r\n```\r\n\r\n**destroy()**\r\n\r\nDestroys the plugin instance and unbind all events. It will also reset the container or the image(if ImageViewer is used in image mode). It returns null which you should assign to viewer variable to completely free up memory.\r\n\r\n```js\r\nviewer = viewer.destroy();\r\n```\r\n\r\n### API (FullScreenViewer)\r\n\r\nFullScreenViewer is extended from ImageViewer. So it shares the same ImageViewer api along with some FullScreenViewer API.\r\n\r\nCreating an instance\r\n\r\n```js\r\nimport { FullScreenViewer } from \"iv-viewer\";\r\n\r\nconst viewer = new FullScreenViewer(options);\r\n```\r\n\r\nUnlike ImageViewer you don't have to pass container for the viewer as it will be initialized in pre-defined full screen container.\r\n\r\nFirst argument is to provide configuration options for the FullScreenViewer. This argument is optional.\r\n\r\n#### Instance methods (FullScreenViewer)\r\n\r\nFullScreenViewer inherits all the instance method of ImageViewer. In additional to that it has following methods.\r\n\r\n**show(imgSrc, highResImg)**\r\n\r\nShow the full screen viewer with passed image on the show method. You can pass two different resolution of the image as first and second argument (optional). See why do you need it at [better image loading](#better-image-loading) section.\r\n\r\n```js\r\nviewer.show(\"image.png\", \"hi-res-image.png\");\r\n```\r\n\r\n**hide()**\r\n\r\nHide/Close the fullScreen viewer.\r\n\r\n```js\r\nviewer.hide();\r\n```\r\n\r\n### Better image loading\r\n\r\nTo improve the perceived experience, it is always recommended to show the already loaded image or the low quality image on the viewer and let the ImageViewer load high quality image in parallel.\r\n\r\nIt will also try to preview the high quality image while it's loading so it will give a progressive loading effect.\r\n\r\nImageViewer provides api to do this.\r\nContainer mode\r\n\r\n```js\r\nviewer.load(\"image.png\", \"hi-res-image.png\");\r\n```\r\n\r\nFullScreen mode\r\n\r\n```js\r\nviewer.show(\"image.png\", \"hi-res-image.png\");\r\n```\r\n\r\nImage Mode\r\n\r\n```html\r\n\r\n```\r\n\r\nIn all of the above example it will first try to display the first image and then load the second image (if passed) in parallel.\r\n\r\nThe second image is optional, which you should pass when you feel you can improve the image loading experience by first showing low quality image and then progressively update it with high quality image.\r\n\r\n### Demo\r\n\r\ncodesandbox preview link: [https://8ypwzryom0.codesandbox.io/](https://8ypwzryom0.codesandbox.io/)\r\n\r\ncodesandbox link: [https://codesandbox.io/s/8ypwzryom0](https://codesandbox.io/s/8ypwzryom0)\r\n\r\n### Like this\r\n\r\n[:star: this repo](https://github.com/s-yadav/iv-viewer)\r\n\r\n### Major updates\r\n\r\n#### v2.1.0\r\n\r\n- It's a complete rewrite of ImageViewer with no jQuery requirement in ES6.\r\n- While the options and instance method are same the way you use a ImageViewer and FullScreenView is changed. The v1 API will no longer be supported.\r\n- Published on the npm. V1 was not available on npm.\r\n- Changed the package name to iv-viewer. image-viewer name was not available on npm.\r\n- Added some listeners\r\n- Added zoom in/out buttons\r\n- Some SCSS variable for easier overrides.\r\n\r\n## Contributors ✨\r\n\r\nThanks goes to these wonderful people ([emoji key](https://allcontributors.org/docs/en/emoji-key)):\r\n\r\n\r\n\r\n\r\nRuchika 📖 | \r\n Sudhanshu Yadav 📖 | \r\n Amrit Kahlon 📖 | \r\n 10000 📖 | \r\n