Zoom

Potion Pack addon stack

A magical little lightbox that puts your imagery center stage. Dismisses itself automatically as visitors scroll away.

  • Beautifully animated lightbox effect
  • Style and align image within your layout
  • Add a stylized Icon indicator to your zoom image
  • Choose between using a drag-and-drop or remote based image for your zoom stack
  • Dismisses itself if visitor scrolls away

Example

Since the Documentation pages are built using our new Partitions stack, which is a fixed position style stack, Zoom cannot escape the confines of the main content area. So we've built a separate examples page to show off the Zoom stack.

Using Zoom

General

Remove Base Margin
Allows you to disable the preset standard spacing that is applied to the bottom of the Zoom stack.

Image

Image Type
Choose between using a drag-and-drop image or a remote image for your Zoom stack. You'll be present with an appropriate image drop zone for drag-and-drop images or a URL link control for remote images.

Image (drag-and-drop)
Drag-and-drop your image here and the Zoom stack will do the rest.

Image (remote)
A URL chooser control for selecting a remote image from your server.

Style
Choose from two different image styles: Standard, Rounded.

Alignment
Allows you to set the justification of your image. You can set the alignment to left, center or right.

Icon Indicator

Icon Indicator
Enabling this feature will allow you to placed a styled icon on top of your image to indicate to your visitors that they can click on the image to make it larger.

Icon
Choose from a wide variety of icons for your indicator.

Icon Size
Icon indicators are the same height and width. Here you'll set that pixel size that will be applied to both.

Position
Choose where on your image you want your indicator icon to be placed. You can put it in the center of the image, or in one of the four corners.

Offset
Allows you to offset the icon in both the horizontal and vertical directions from its start position. These offset values apply to the corner positions only.

Icon Colors
Allows you to customize the color of your icon indicator and its background.

Icon Border
Adds a border around your indicator and allows you to adjust the width and color of that border.

Hover Indicators

Shadow Indicator
When in use a shadow will be applied to the thumbnail when your visitor hovers over the thumbnails, indicating it can be clicked on. You can set the shadow's size and color.

Zoom Indicator
When enabled the thumbnail will slightly zoom in a little bit when hovered over by your visitor. You're able to customize the zoom amount.

Greyscale Indicator
Your thumbnails will appear as greyscale images until hovered over. Once hovered over they'll return to their original color palette to indicate the thumbnail can be clicked.

Opacity Indicator
Your thumbnails will slightly dulled, or see-thru until hovered over. Once hovered over they'll return to 100% opacity to indicate the thumbnail can be clicked. You can adjust the amount of opacity for your thumbnail.

Advanced

Alt. Tag.
Provides you a way to add an Alt. Tag to your image. The alt tag is used in HTML to specify alternative text that is rendered when the element to which it is applied cannot be displayed. It is also used by "screen reader" software so that a person who is listening to the content of a webpage (for instance, a person who is blind) can interact with this element.

Image Sizing
This feature allows you to choose how Foundry displays your image when it comes to responsive sizing. You can choose to have the image display normally, as-is and only scale downwards when the image would otherwise begin to overflow the bounds of its parent container or you can choose one of the following:

  • Normal: Image is loaded as-is and is not scaled upwards in any way. It will scale down though to make sure it fits within the bounds of its parent stack(s).
  • Upscale to 100%: Forces the image to scale itself past its original size, enlarging itself to fill out the entire width of its parent container.
  • Max-Width: Set a maximum width for your image. The image will never scale up beyond this value but will still responsively scale downwards to ensure it fits within the bound of its parent container.
Insight
Indicators

Give your visitors a hint that the image thumbnails for your Zoom stack can be expanded into a beautiful lightbox by using the Zoom stack's various indicator styles and settings.