- ANGULAR IMAGEVIEWER ZOOM PAN PDF
- ANGULAR IMAGEVIEWER ZOOM PAN INSTALL
- ANGULAR IMAGEVIEWER ZOOM PAN FULL
- ANGULAR IMAGEVIEWER ZOOM PAN DOWNLOAD
- ANGULAR IMAGEVIEWER ZOOM PAN FREE
Lower limit on how much zoom can be applied with scrollZoom enabled. This will only look good if width and height are equal. Make the lens circular instead of square.
If enabled only a small portion around the mouse cursor will actually magnify instead of the entire image area. When using scroll zoom this setting determines how big steps each scroll changes the zoom. The mode of zooming to use, these are explained in a table below.īoolean that toggles if the mouse wheel should be captured when hovering over the image to adjust magnification. 1 means we use the fullImage at its actual resolution.
ANGULAR IMAGEVIEWER ZOOM PAN FULL
The full resolution version of the image to be used when zooming. (Required) The smaller version of the image that will be shown when there's no interaction by the user. Used as the high resolution version as well. If no fullImage is provided the thumbImage will be This plugin works with both URLs to images and in-line imagesĪll settings except thumbImage are optional. NgxImageZoom is inspired by angular2-image-zoom andĮlevateZoom-plus but a pure Angular2+ implementation of State right now but it's not tested in lots of different setups yet.īreaking changes in version 0.5.0, see changelog for details.ĭemonstration of available features available here. Still in early development, more features are planned and incoming. Moving forward this library may or may not work on older versions To generate all *.js, *.d.ts and *.metadata.This version is only tested with Angular13.
Once your library is imported, you can use its components, directives and pipes in your Angular application: "./node_modules/ng2-image-viewer/imageviewer.scss" Now just add the these codes on your angular-cli.json file: "styles": [
ANGULAR IMAGEVIEWER ZOOM PAN INSTALL
To install this library, run: $ npm install iv-viewer -saveĪnd then from your Angular AppModule: import from [ It is the event triggered when you change to previous file, it emits the actual index of the array on the component It is the event triggered when you change to next file, it emits the actual index of the array on the component It is the tooltip value you want for the open in new tab button
ANGULAR IMAGEVIEWER ZOOM PAN PDF
It is the tooltip value you want for the show PDF only button
ANGULAR IMAGEVIEWER ZOOM PAN DOWNLOAD
It is the tooltip value you want for the download button It is the tooltip value you want for the fullscreen button It is the tooltip value you want for the reset zoom button It is the tooltip value you want for the rotate left button It is the tooltip value you want for the rotate right button It is the boolean that renders the tooltips above the buttons It is the color used on the hover event, when the button receive the mouse pointer It is the color used on the buttons on the options panel It is the background-color used on the footer and on the options panel It is the boolean that lets you choose if you want to load the component on the OnInit event or on the OnChanges event, It was created because i faced some trouble with the primeNG tab using the change event. It is the boolean that renders the PDF only button It is the boolean that renders the options panel at the top right corner It is the boolean that renders the fullscreen button It is the boolean that renders the download button It is the tooltip value you want for the zoom out button It is the tooltip value you want for the zoom in button It is the boolean that renders the Zoom Out Button
It is the boolean that renders the Zoom In Button It is the boolean that renders the resetZoom button It is the boolean that renders the rotate left and right buttons It is the default name used on the file to be downloaded, Ex: Image 1, Image 2 It is the array containing the base64 data, the component differs the images and the PDF files, so don't worry. It is the id of the component on the HTML, this parameter allows you to inject as many components as you wish. The component already have some input references: Name
ANGULAR IMAGEVIEWER ZOOM PAN FREE
Ng2-Image Viewer uses MIT license, so you can use it as you wish, feel free to help contributing with the code. This component uses the Image Viewer JS in it's core.