Zoom Stack

Zoom Stack

add a minimalistic zoom option to images

Use this stack to use the image zooming as seen on Medium. The images zoom in when clicking/tapping them, and zoom out when you click/tap again, scroll away, or press the escape key.

Demo
Click on the image of the Zoom Stack’s HUD (fig. 1) or the image of RapidWeaver’s image info pane (fig. 2) belowto the right to enlarge it. Click on the image again, scroll up or down, or press the escape key to zoom out again.
The zoom action is triggered by the alt tag containing enlarge (fig. 2).

Usage
Simply set a text string that is part of the alt tag or file name of every image you want to be zoomed; and the overlay color and opacity (fig. 1).

NB
This stack will not work on images that are a link.
Avoid using multiple copies of this stack on a page as it may lead to unpredictable results.
In rare occasions, the overlay may not show properly in Preview mode. This only happens within RapidWeaver, not in the published or exported page.

Background

This stack is based on the zoom-vanilla.js library by spinningarrow (Sahil Bajaj).

Limitations
When the visitor has JavaScript disabled in his browser, the zoom will not work.
The zoom-in and zoom-out cursors do not show in Internet Explorer (any version). Instead, a ‘normal’ pointer (pointer enlarge ) cursor will be used.
In a few themes, when an image is zoomed, the layout of the underlaying page may change. In those cases, the only solution is to set the overlay opacity to 100%.

Support
Please use this form to report all issues, questions and comments.

This stack requires the Stacks plugin by YourHead (version 3).
Do you like this stack? Please consider leaving a review in the RapidWeaver Community’s Addons section [link].
Zoom HUD (click to enlarge)
fig. 1

Image settings (click to enlarge)
fig. 2
© 2012-2017 Marathia Web Design | Contact