Cloud Zoom (V3.1) Example: Use on responsive website

This page demonstrates two examples of how Cloud Zoom can be configured to work on responsive websites.

Using zoomSizeMode:'image' and autoInside

In version 3.1 rev 1311191400, the autoInside property was introduced. This tells Cloud Zoom to use 'inside' mode when the page width becomes less than a predefined size (in this case autoInside:550).

If you resize this page, you will see the fly-out zoom window size has be defined to match the small image size on the page (use zoomSizeMode:'image') which gives a tidy appearance.

When the page becomes less than 550 pixels wide, Cloud Zoom switches to 'inside' mode, better suited to small screens.

Using zoomPosition:'selector' and autoInside

This example uses a selector to a div element (shown here with a red border) to determine the zoom window size.

Typically, this would be a hidden div, but for the purposes of this example it has been left visible.

autoInside:500 is used to switch to 'inside' mode when the page becomes 500 pixels or less.

info