Zoom
A versatile, magical lightbox that puts your imagery or video embeds front a center. This lightbox tool is both versatile and stylish.
Examples
Image Lightboxes
Building beautiful image lightboxes with Zoom is super simple and very versatile. Zoom uses the Image tool for its thumbnails, so all of the features an versatility of Image get rolled into Zoom as well.
Video Lightboxes
In addition to creating image lightboxes, Zoom can also trigger video embeds as lightbox overlays. You can make use of either YouTube or Vimeo for the video embeds, and just like with the image lightboxes the Image tool is used called upon for the thumbnails.
Do you need me to elaborate? Or can we just crack on?
The Zoom tool mashes together the best features of the Zoom and Zoom Video tools from Foundry v2 along with plenty of new improvements. Zoom is significantly more powerful, and like every other tool in Foundry — re-written from the ground up.
Settings
Edit Mode
Edit Mode Title
Allows you to add a custom label to the top title bar of the tool. This lets you quickly identify what purpose you're using that tool for in your layout. This title is also visible when you've collapsed or hidden the contents of the tool in Edit Mode.
General
Include Base Margin
When enabled a preset margin will be added to the base of the tool. Foundry allows you to configure the Base Margin preset to your liking within the Control Center. The Base Margin can be configured independently at each of the 6 responsive breakpoints.
Zoom Content
Content Type
This setting allows you to choose which type of content will be displayed in the lightbox. You can opt for either an image or a video embed from eithe YouTube or Vimeo.
The section below this setting will transform quite a bit based on which of the content types you've selected. We've grouped the settings together in mode types below. Not all of these options will be visible or available for each mode.
Image & Retina Image
Here you can drag-and-drop your Image that will be displayed in the lightbox. You can optionally add a Retina Image as well for high DPI displays. While the Retina Image is optional, the normal Image is required.
A Retina image is an image that is created specifically for Retina display, or high DPI displays, such as those found on most Mac computers and iPhones. In Retina Displays, you get double the pixels in the same amount of space as you would with a traditional display.
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.
Unique ID
This is the ID of the video from YouTube that you wish to embed on this page. Note that this is not the URL for the video, but instead the ID that is created and provided by YouTube. If you're unfamiliar with where to get the ID for your YouTube video, please watch the tutorial video for the Video tool.
Poster Image
The Poster Image is used for displaying to the visitor prior to them clicking the play button. It is much easier and faster to load an image as the Poster Image placeholder for the video until it is played. Drag-and-drop your Poster Image here to add it to your self-hosted video.
Start at
Enable this feature to have your video begin playback at a specific point of your choosing. The distance, from the beginning of the video, is mesured in seconds. If you want to start at 1 minute and 32 seconds into a video for example you would use 92 seconds as the Start At time.
Auto Play
When enabled this feature causes your video to begin playing as soon as the page loads.
YouTube No Cookie Mode
When enabled this feature uses YouTube's special nocookie URL structure to prevent YouTube from using cookies for this particular video embed.
Modest Branding
This feature lets you use a YouTube player that does not show a YouTube logo.
Unique ID
This is the ID of the video from YouTube that you wish to embed on this page. Note that this is not the URL for the video, but instead the ID that is created and provided by YouTube. If you're unfamiliar with where to get the ID for your YouTube video, please watch the tutorial video for the Video tool.
Start at
Enable this feature to have your video begin playback at a specific point of your choosing. The distance, from the beginning of the video, is mesured in seconds. If you want to start at 1 minute and 32 seconds into a video for example you would use 92 seconds as the Start At time.
Preferred Quality
Signals to Vimeo the optimal quality setting. Vimeo automatically adjusts the quality based on connection speed, and other variables, and is not locked in to the Preferred Quality setting.
Auto Play
When enabled this feature causes your video to begin playing as soon as the page loads.
Do Not Track
When enabled this feature uses Vimeo's Do Not Track mode which prevents Vimeo from using cookies to track visitors for this particular video embed.
Title & Byline
Here we provide a few controls which allow you to choose what is displayed on top of your Vimeo video embed. You can opt to show or hide the Video Title and Video Byline.
These settings can only affect the video if the settings for the video itself, in your Vimeo account, are configure to allow these items to be hidden.
Loop
Allows you to have your video automatically restart after it has played all the way through. This can be very useful when using the Auto Play feature above.
Picture-in-Picture
Vimeo supports a picture-in-picture mode. This can be useful for visitors who wish to watch your videos from your site while doing other tasks. This can be especially helpful for instructional videos. Enabling this feature allows your visitor to opt to use this mode.
Poster Image
The Poster Image is used for displaying to the visitor prior to them clicking the play button. It is much easier and faster to load an image as the Poster Image placeholder for the video until it is played. Drag-and-drop your Poster Image here to add it to your self-hosted video.
Video Files: MP4, WebM, OGG
Here we have controls for linking up your self-hosted video files. The tutorial video walks your through how to use these controls as well as offers advice on converting your videos to the needed formats.
Close Button
The settings affect the button at the uppoer portion of the lightbox overlay that the visitor can click to dismiss the lightbox.
Location
Determines if the Close Button should be in the upper Left or Right corner of the lightbox overlay.
Scale on Hover
When enabled the Close Button will scale up slightly when the visitor hovers their cursor over the button.
Zoom Indicator
Enable Indicator
When enabled a visual cue will be placed on the thumbnail image. This indicator lets the visitor know that the thumbnail can be clicked on to trigger a lightbox.
Scale Indicator on Hover
When enabled the Zoom Indicator will scale up slightly when the visitor hovers their cursor over the thumbnail image. This is another cue to your visitor that this image is clickable.
Rounded Corners
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners. This setting also provides for a Circle setting as well.
Location
This setting determines where the indicator will be located. This location is relative to the thumbnail image. You can place the Indicator in the four corners of the thumbnail image or the very center of it.
The Indicator's Location will revert to the Center setting for the Small and Extra Small breakpoints due to the limited space availablity on these smaller screens and devices.
Background Sizes
Here you can set the overall size of the Zoom Indicator's background container. You're given 6 different settings here — one for each of the responsive breakpoints.
Icon Sizes
Here you can set the size of the Zoom Indicator's icon. You're given 6 different settings here — one for each of the responsive breakpoints.
Icon
Allows you to choose from several preset icon choices for the Zoom Indicator.
Styling
Rounded Corners (Lightboxed Image)
Foundry provides 5 different presets for rounded corners. These can be found throughout Foundry's various tools. You're also able to remove the roundness of the corners by setting this to none, or provide your own custom value for the border radius, or rounded corners. When using Custom mode you can set a different value on each of the four corners.
Backdrop
Here you can adjust the color of the backdrop behind the lightbox content. We've provided two color pickers, which comprise a radial gradient.
Backdrop Filters
Zoom offers 4 optional filters that will be applied to the content behind the backdrop overlay. You can choose from one or all of the following filters — Blur, Contrast, Grayscale and Saturate.
Close Button
These two color pickers allow you to set the background and icon colors for the Closer Button that is shown in the lightbox overlay.
Video Play Icon
When using video embeds a Play Icon is overliad on the video in the content of the lightbox. This setting allows you to choose the color of that icon.
Indicator Background
Here you can style the Zoom Indicator's background color. You have the ability to style the Indicator Background both in its normal and hovered over states.
Indicator Icon
Allows you to style the Zoom Indicator's Icon color. You have the ability to style the Indicator Icon both in its normal and hovered over states.
Shadow
Modal
Used to add a decorative shadow to the Modal Content, whether that be an Image or a Video Embed. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Close Button
Used to add a decorative shadow to the Close Button in the backdrop overlay. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
Zoom Indicator
Used to add a decorative shadow to the Zoom Indicator that is optionally displayed on the thumbnail image. Foundry provides a variety of preset shadow styles, as well as access to a user defined preset that you can configure in the Control Center. Additionally for one-off shadows there is also a custom shadow option where you can create a unique shadow style, setting its positioning, size, spread and color.
HTML Comment
HTML Comment
Enabling this feature adds an HTML comment to the exported code to indicate the name of the tool being used here. This is helpful to both yourself and others when troubleshooting, or inspecting the code. This is enabled by default.
Custom
This field allows you to replace the default HTML Comment with your own text.
CSS
Classes
Allows you to specify an options class, or classes, that will be added to this tool's wrapper. You can use this to apply custom styling from the Blacksmith tool, or add a Bootstrap v5 preset class to your item. If you're applying more than one class be sure that you separate each class name with a space. Do not use special characters.