Inline picture zoom for modern browsers and touch-screen devices.
This is a rewrite of the Maxi recipe. Maxi was written 12 years ago, when touch screen devices were rare and when browsers had a smaller reliable subset of common features.
Maxi2 allows for large pictures like panoramas, charts, scanned pages, engineering drawings to be embedded into a wiki page, and the visitors can zoom-in and zoom out by scrolling the mouse wheel, and by pinching on a touch screen. They can also drag the picture to move into the zoomed-in area.
Base view when the page is first opened
User has zoomed on the boat near the center of the picture
This recipe makes use of CSS transforms for which recent browsers are optimized and rely on the GPU. The quality of the resized picture is usually very good. You can zoom in and out in several levels.
- Get maxi2.zipΔ (alt. download: maxi2.zip).
- Place the file maxi2.php in your pmwiki/cookbook directory, and the directory maxi2 in your pmwiki/pub directory.
- Add to config.php such a line:
In a wiki page, use the following markup on a new line:
If you have previously used Maxi, disable it and the new recipe will be able to reuse existing markup from your pages:
Note that the new recipe ignores the small picture, it only needs the large picture.
A mobile-friendly skin with the necessary meta viewport tag will make it easier to use on a mobile device.
To do / some day / maybe
Change log / Release notes
- 20210710: Add "mouseout" event listener to stop dragging when the mouse leaves the region (in such cases the "mouseup" event didn't fire so the picture seemed locked to the mouse cursor).
- 20210707: First public release, ready to be tested.
- Recipe written and maintained by Petko.
See discussion at Maxi2-Talk?
User notes +2: If you use, used or reviewed this recipe, you can add your name. These statistics appear in the Cookbook listings and will help newcomers browsing through the wiki.