[]
DEMOS DOCS API PRICING
FREE TRIAL
(Showing Draft Content)

Zoom

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.

zoom-icon.png

The zoom button group contains the following components:

Zoom Button Icons

Zoom Button Names

Description

zoom-out.png

Zoom Out

Lets you zoom-out the image, with default maximum value of up to 300 percent.

zoom-mode.png

Zoom mode

Lets you zoom-out the image, with default maximum value of up to 300 percent.

zoom-in.png

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