ngx-image-view
v1.0.9
Published
The universal element/image viewer component.
Downloads
24
Readme
ngx-image-view
The universal element/image viewer component.
Compatible with desktop and mobile touch devices.
- Zooming
- Dragging
Installation
yarn add ngx-image-view
npm i -S ngx-image-view
Import in your module:
import { NgxImageViewModule } from 'ngx-image-view';
@NgModule({
imports: [NgxImageViewModule]
...
Examples
Full screen image viewer
Panning and zooming will be applied to all elements inside the lib-ngx-image-view
tag.
To prevent for example dragging for one element, use the api property to
configure the element.
<style>
body {
padding: 0;
margin: 0;
}
.view {
width: 100%;
height: 100vh;
box-sizing: border-box;
background: black;
}
</style>
<lib-ngx-image-view class="view">
<img data-allow-drag-preview="false"
src="https://images.unsplash.com/photo-1510708932124-fed7feb9e1d9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&q=80">
</lib-ngx-image-view>
API
[triggerReset]
Resets the zooming/position for all elements on value change.
<lib-ngx-image-view [triggerReset]="updatingValue">
data-fit-to-parent
Limits the element to have minimal the container height
default: true
<img src="..." data-fit-to-parent="true">
data-limit-to-natural
Limits the max-size of the element to its natural size.
Usually useful for images
which should stop scaling at 1px = 1px
.default: true
<img src="..." data-limit-to-natural="true">
data-zoom-to-center
Stay centered if width
gets smaller than container width
.
If you want to have exact on-cursor-point zooming, even for images
smaller than the container, you need to disable this, but
consider the side-effect: The element might move aside while
zooming and width/height is still smaller than your box.default: true
<img src="..." data-zoom-to-center="true">
data-allow-zoom
Enable/disable zooming: default: true
When disabled, the element can not be zoomed.
<img src="..." data-allow-zoom="true">
data-allow-drag
Enable/disable dragging: default: true
When disabled, the element can not be dragged. But it still can
be zoomed. The zooming follows the mouse cursor.
<img src="..." data-allow-drag="true">
data-allow-drag-preview
Enable/disable dragging the preview: default: true
Preview means:
element.width === container.width
for landscape elementselement.height === container.height
for portrait elements
<img src="..." data-allow-drag-preview="false">