FancyappsZoom Levels
Panzoom API allows you to zoom content to any specified scale value. For your convenience, Panzoom also provides fit, cover, full, max zoom levels and corresponding methods as zoomToFit, zoomToCover, etc.
Scalar values
Because Panzoom's content is initially automatically resized to fit within the container using CSS, and for ease of operation with zoom levels, Panzoom's initial zoom value is assumed to be 1.
Therefore, the result of the zoomToFit() method is equivalent to zoomTo(1). But zoomTo(2) will result in the content being 2 times larger than the initial size.
A special case is the maxScale option for images. Use this to allow 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.
Take a look at this JSFiddle example, play with the options, resize the window and watch the maxScale value adjust automatically.
Naming convention
fit
The content is scaled to maintain its aspect ratio while fitting within the free space in the container. Other elements such as captions are also taken into account.
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 click, dblClick options and their corresponding zoom flow.
| Value | Zoom flow |
|---|---|
toggleZoom | fit → full → fit |
toggleCover | fit → cover → fit |
toggleMax | fit → max → fit |
zoomToFit | any → fit |
zoomToMax | any → max |
iterateZoom | fit → full → max → fit |
If you need custom logic that you can't achieve with the existing options, you can also create your own click handler, see this JSFiddle example.
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.