[]
DsImageViewer lets you zoom-in or zoom-out the images by using zoom button group available in the toolbar.
The below image shows how zoom button group appears in the tool bar.
The zoom button group contains the following components:
Zoom Button Icons | Zoom Button Names | Description |
---|---|---|
Zoom Out | Lets you zoom-out the image, with default maximum value of up to 300 percent. | |
Zoom mode | Lets you zoom-out the image, with default maximum value of up to 300 percent. | |
Zoom In | Lets you zoom-in the image with default minimum limit of 25 percent. |
Using code
DsImageViewer provides zoom property to set zooming percentage through factor option. You can also choose whether you want to view the whole image, or you want to fit it to the width of window by specifying the mode option. The viewer also lets you customize the minimum and maximum values of zoom percentage as well as the dropdown factor values by using zoomOptions.
async function loadImageViewer() {
// intialize image viewer
var viewer = new DsImageViewer("#imageviewer", {
zoomOptions: {
minZoom: 0.05,
maxZoom: 5,
dropdownZoomFactorValues: [0.05, 0.1, 0.5, 1.5, 2, 3, 5]
}
});
// load an image
viewer.open("https://i.imgur.com/tl0ZsW7.jpeg");
// Set zoom to 70%.
viewer.zoom = { mode: 0, factor: 0.7 };
// Zoom mode - fit image to width
//viewer.zoom = {mode: 1 };
// Zoom mode - fit whole image
//viewer.zoom = {mode: 2 };
}