Documentation
Foundry
Addons
Other

Pop Up Gallery

Base Foundry stack | New in Foundry v2

Create gorgeous image galleries that expand from a single stack of thumbnail images. Pop Up Gallery provides a great way to include a feature rich gallery for your visitors in a very stylish package.

  • Animated thumbnail images
  • Drga-and-drop image support
  • Ability to batch import images
  • Highly configurable gallery
  • Stylish thumbnail badges

Example


Using Pop Up Gallery v2

Batch Import

Enabling this feature allows the Pop Up Gallery to automatically import a folder of images from your server and auto generate the gallery from them.

This feature is a bit more advanced so we highly encourage you to watch the tutorial video above where we not only walk you through the basics of the stack, but we also show you how to use this batch import feature and talk about how to process your images for the batch process.

Folder Name
This is name you'd like to have given to your image folder. The stack will automatically create the folder the first time you visit the page if it doesn't already exist. When it does so it will also create a thumbnails folder inside of that images folder.

By using different image folder names you can have multiple galleries on your site. Again, we encourage you to watch the video above where we cover how Batch Import works, how the folders are named and where they're placed, as all of this is important in making sure this feature can find the image files for your gallery.

Thumbnail

Border Size
Determines how large the border is around your thumbnail images in your photo thumbnail stack. You can set a different border size at each of the three responsive breakpoints.

Border Color
Choose the color of the border that is placed around your thumbnail images.

Thumbnail Animation

Animation
Pop Up Gallery offers several different animation styles to choose from for your thumbnails. These animations occur when the visitor hovers over the stack thumbnail images for that particular Pop Up Gallery. Below is a list of the different thumbnail animation types:

  • Fan
  • Scale
  • Shockwave
  • Playing Cards
  • Spread Diagonal (Up & Right)
  • Spread Diagonal (Down & Left)
  • Spread (Left to Right)
  • Spread (Right to Left)
  • Spread (Bottom to Top)
  • Spread (Top to Bottom)
  • None

Rotation & Distance
The Rotation and Distance settings allow you to customize the animations. Each animation uses these settings differently. The stack will show a message after choosing an animation letting you know which settings will affect that particular animation. You can changes these settings at each of the three breakpoints.

Gallery

Transition Style
This setting allows you to customize how your images transition from one to the other when viewed in the gallery. The following transitions are offered:

  • Slide
  • Fade
  • Zoom In
  • Zoom In - Big
  • Zoom Out
  • Zoom Out - Big
  • Zoom In - Out
  • Soft Zoom
  • Scale Up
  • Slide Circular
  • Slide Circular - Vertical
  • Slide Vertical
  • Slide Vertical - Growth
  • Slide Skew
  • Slide Skew 2
  • Slide Skew- Y-Axis
  • Slide Skew- Y-Axis 2
  • Slide Slide and Skew
  • Slide Slide and Skew 2
  • Slide Slide and Skew - Cross
  • Slide Slide and Skew - Cross 2
  • Slide Slide and Skew - Vertical
  • Slide Slide and Skew - Vertical 2
  • Slide Slide and Skew - Vert. Cross
  • Slide Slide and Skew - Vert. Cross 2
  • Lollipop
  • Lollipop 2
  • Rotate
  • Rotate 2
  • Tube

Transition Duration
The total time it takes for the transition to take place between two images.

Backdrop Duration
The time it takes for the backdrop behind the gallery to transition.

Hide Bar Delay
The time from when the gallery appears to when the controls in the gallery hide if there is no interaction from the visitor.

Thumbnails
When enabled the gallery will show a thumbnail of each of the images in the gallery allowing the visitor to select from the thumbnails to view particular images. You're given the ability to alter details about how the thumbnails are show when this feature is enabled.

Thumbnail Width
Allows you to set the width of the thumbnails shown in the thumbnail carousel below the gallery.

Thumbnail Border
Choose a normal and active border color for your thumbnails. The active color will be show around the thumbnail for the image which is currently being viewed in the gallery.

Loop
When enabled the gallery will jump from the last slide to the first slide when you try and advance past the end of the gallery.

Arrows
When enabled a previous and next arrow will be added to the gallery to allow the user to navigate through the images more easily. It is recommended to keep this feature enabled.

Autoplay Slides
If enabled your images will be played in a slideshow form automatically advancing to the next image. If the user interacts with the gallery the autoplay will be paused. The visitor can re-enable the slideshow if they like.

Pause Duration
The time that each slide will be show to the visitor before advancing to the next image.

Progress Bar
When enabled the visitor will see an indicator that shows them how far through the Pause Duration they are for each autoplayed slide. You're also given the ability to set the progress bar's colors for the progress bar itself as well as the background it resides inside.

Allow Fullscreen
When enabled the visitor will have a control shown to them in the gallery that will allow them to make the gallery fullscreen. Going fullscreen will not work in Preview Mode in RapidWeaver.

Zoom Controls
Enabling this feature gives the visitor the ability to zoom in and out on a per image basis.

Download Button
If enabled the gallery will give the visitor a button that allows them to down load each individual image.

Image Counter
When enabled the visitor will see a counter on the gallery that shows them which image they're on and the total number of images in the slideshow.

Badge

Badge Type
The Pop Up Gallery allows you to add a badge to the stack of image thumbnails. The Badge can show a count of the number of images in the slideshow or and icon of your choosing. If you'd rather not use a badge you can select none for the Badge Type as well.

Badge Size
Allows you to set the size of the badge at each of the three breakpoints.

Text / Icon Size
In addition to setting the size of the badge you can also configure the size of the text / icon inside of your badge at each breakpoint.

Location
Choose where your badge will be located relative to your thumbnail.

Gradient
Allows you to set the gradient colors and angle for you badge's background.

Text / Icon Color
Choose the color of the text or icon inside of your badge.

Border
You can easily configure the border size for your badge at each breakpoint, as well as choose a color for your border.

Advanced

Collapse in Edit Mode
When enabled this feature hides the majority of your Pop Up Gallery in Edit Mode. This makes working with your page much easier when you're not actively modifying you're Pop Up Gallery's contents.


Child Stack

Image

Each image item in your Pop Up Gallery has its own settings. These are mostly used for giving you drop zones for your images.

Small Image
In this drop zone you'll provide a small image for your thumbnail stack of images. This file needs to be square. This means that the height and width of this image must be the same. Use your image editing software, like Photoshop, to crop your Large Image to get a thumbnail of your choosing.

Large Image
This is the full size, non-cropped version of your image that will be shown in the gallery itself.

Caption
Allows you to opt to add a caption to your image that will be displayed in the gallery.

Thumb Alt. Tag
Gives you a place to provide an alt tag for each of the thumbnail images.

Insight
Thumbnails

While Pop Up Gallery is using the small images for the first three thumbnails in your animated thumbnail stack and you're not seeing the other thumbnails displayed, we encourage you to provide a small image for all of the images in your gallery. This way if you shuffle things around at some point and a different image appears in the top three you won't be without the necessary small thumbnail image.