Zoom Levels
Panzoom API allows you to zoom content to any specified scale value. For your convenience, Panzoom also provides base, cover, full, max zoom levels as abbreviations.
Scalar values
Panzoom's content is initially resized to fit within the container using CSS. If the content size does not exceed the container dimensions, then it will retain its original size.
For ease of operation with zoom levels, Panzoom's initial zoom value is assumed to be 1.
Therefore, after executing zoomTo action with a value of 1, content will be scaled to initial size and will fit inside the container.
However, when executing the zoomTo action with a value of 2, content will be scaled 2 times larger than its initial size.
A special case is the maxScale option for images. It allows additional zooming, resulting in a larger image size than its original. For example, the option maxScale: 2 will allow an 800x600 image to be additionally zoomed to 1600x1200.
Naming convention
base
Content is sized to maintain its aspect ratio while fitting within the available space of the container. Other elements, such as captions, are also taken into account.
Note: minScale and maxScale options are taken into account and may have an impact.
cover
Content is sized to maintain its aspect ratio while filling the entire container. If the aspect ratio of the content does not match the aspect ratio of the container, the content will become draggable.
full
Content is scaled to its original size.
max
Content is scaled to its maximum size - original size multiplied by the value of the maxScale option. See examples section to better understand how the maxScale option affects zoom.
Click actions
These are the possible values you can pass to the clickAction, dblClickAction options and their corresponding zoom flow.
| Value | Zoom flow |
|---|---|
zoom | base → base * 2 → ...→ full |
toggleCover | base → cover → base |
toggleFull | base → full → base |
toggleMax | base → max → base |
iterateZoom | base → full → max → base |
If the click event requires custom logic that you cannot achieve with the existing options, you can also create your own using click event.
Examples
If maxScale is equal to 1, user cannot zoom more than the original size of the image.
Here maxScale is equal to 5. Since click action is the default - toggleZoom - user can click to view image at its original size, and then user can additionally zoom to five times the original image size (using toolbar button, mouse wheel, and pinch-to-zoom gesture).
In this example, click action is set to iterateZoom and maxScale is 2.5. The content will be zoomed to its original size on the first click and then 2.5 times its original size on the second click.
If you set minScale to cover, then the base scale will be affected and the content will initially be resized to fill the container.