Zoomer Stacks

How to use Zoomer Single

The Zoomer Single displays one set of image. To do this, prepare 2 similar images, one of a regular-sized (to be displayed when the page loads) and one of a bigger size (to serve as the magnified image).

Add a new Stacks page, or open your existing Stacks page.

Drag a Zoomer Single stack onto the page.

Add the regular-sized image into the Zoomer Single stack, between the 2 orange lines.

Add the bigger image after the regular-sized image, while keeping it still within the orange lines. Do not drag onto the regular-sized image, but rather, position after the regular-sized image.

To add a caption for the image, double-click on the bigger image, and enter the image into the Alt field.

In the Options area, remember to check Show Titles.

How to use Zoomer Multiple

The Zoomer Multiple stack lets you place a few thumbnails alongside your image so that clicking each thumbnail will display the relevant image. Each set of images consists of 3 images: small (thumbnail), medium (the one shown when the page loads, or when a thumbnail is clicked), and the large image (for magnification).

Add a new Stacks page, or open your existing Stacks page.

Drag a Zoomer Multiple stack onto the page.

Add the regular-sized image into the Zoomer Multiple stack, between the 2 orange lines.

Add the medium-sized image after the regular-sized image, while keeping it still within the orange lines. Do not drag onto the regular-sized image, but rather, position after the regular-sized image.

Add the large image after the medium-sized image, while keeping it still within the orange lines. Do not drag onto the existing images, but rather, position after the regular-sized image.

These 3 images represent 1 set of images.

For the next set of images, start with a new small image, to be placed after the previous large image. This will be followed by a medium-sized image, and then a large image.

Please note that it is not recommended to have too many thumbnails as they may take up more space than the medium-sized image, spilling over.

How to set image titles

To add a caption for the image, double-click on the biggest image of each set, and enter the image into the Alt field.

Zoomer Options

Thumbnails

This section applies to Zoomer Multiple only, as Zoomer Single doesn’t support thumbnails.
Thumb. Position: This controls where the thumbnails should appear. Use left, right, bottom or top.
Thumb. Border: The border width of each thumbnail. Recommended: 0
Thumb. Border Color: Color of the thumbnails’ border color.

Lens

The lens is the zone inside your image that shows what is being magnified.

Lens Border: This controls the thickness of the lens border.

Lens Opacity: This controls how opaque the lens area is. Enter a value from 0 (fully transparent) to 1 (fully opaque).

Zoom Window

The Zoom Window is where the magnified version of the image appears.

Zoom Border : This controls how wide the zoom border is, in px. Set to 0 for no border.

Border Color : The border color.

Zoom Width : The width of the Zoom Window, in px. Set to auto if you want the Zoom Window to have the same size as the non-magnified image. Note: please ensure that there is space for the Zoom Window.

Zoom Height : The height of the Zoom Window, in px. Set to auto if you want the Zoom Window to have the same size as the non-magnified image. Note: please ensure that there is space for the Zoom Window

Position : This controls where the Zoom Window should appear. Use: inside, left or right. Note: If set to inside, be sure to set the X Offset and Y Offset to 0.

X Offset : This is for fine-tuning the position of the Zoom Window. It adjusts the Zoom Window in the horizontal direction, and accepts negative values as well.

Y Offset : This is for fine-tuning the position of the Zoom Window. It adjusts the Zoom Window in the vertical direction, and accepts negative values as well.

Smoothness : This will let you control how “drifty” the Zoom Window’s image is. Set to a higher value for more “draftiness”.

Show Titles : Displays the title of each image in the Zoom Window. Image titles are derived from the alt attribute of the images.

Title Opacity : Controls the opacity of the image titles. The value should range from 0 to 1, where 0 is fully transparent and 1 is fully opaque.

Links

Open In New Window : Tick this if you want your linked images inside Zoomer Stacks to open links in a new window/tab.