General Settings
For each gallery variation you will create a new gallery style in “ProPhoto > Customizer > (toggle top-left switch to “Design”) > Galleries and give it a corresponding name. You want to to recognize the style by its name so this is called “Slideshow gallery w/controls.”
In“Galleries > General Settings“.
- First select “standard” as the gallery style. Standard means that the gallery will be showing one image at a time.
- The crossfade transition style results in a slideshow fade-in type effect.
- The transition speed is set to 610 milliseconds. This is how fast one image fades into the next.
- Check the gallery height constraint to limit the height to which a gallery can grow to a percentage of the window height
- A good start is to set the height limit to 100%. That way the images will never require scrolling to see the whole thing. A lower percentage puts more of a limit on how large the images can grow
- You will see the background color of the gallery when an image displays whose aspect ratio is such that it does not completely cover the gallery area. The first image in the gallery sets the gallery aspect ratio. Setting this to none will cause the site or layout background to show when the image does not fill the player.
- Check expanded mode so that the viewer can click an icon to see a larger version of the image. NOTE: the gallery height constraint does not apply to expanded mode.
In the Expanded Mode Settings box
- Choose to have the single images fill the full window. Play with the gallery on this page to see how that works. It will fill your browser window, as opposed to your entire screen.
- Select an icon for exiting expanded mode
- Choose the background color that will apply to any areas of your window not filled by the image. This gallery style uses a black background that has a partial opacity of 0.73. This makes it so you can still see the site underneath but it’s quite darkened.
Gallery Controls
The Gallery Controls area is where you dial in how the controls (play, pause, navigation, prev/next buttons) look and behave. You can mix and match these however you want. What this design does is laid out below.
- The control bar alignment is set to bottom.
- The controls position is set to overlay the gallery. This allows maximum space for the gallery.
- The slide control bar up/down option for hiding/showing makes the control bar fade in when hovered. Try it in the gallery on this page.
- The control bar gets it’s own background color. Here it is set to none so the controls and will This makes for just a subtle background behind the control bar.
- The top/bottom padding option is set to 10px; which serves to add some more height to the background or the bar.
- The control button color is set to be white.
- A partial opacity of 0.5 on a black color gives a nice looking shadow so the buttons stand out.
In the Gallery Controls Sizes area choose how large the controls will be for previous/next, play/pause and the fullscreen toggle buttons. Note that these sizes can be adjusted for each of the four breakpoint sizes. This allows you to dial in the size of the controls for different screen widths.
In Dot/Thumbnail Navigation Appearance setup the navigation options.
- Enable thumbnail navigation to give visitors the option to clicking images to navigate. These will appear when the control bar slides up.
- Thumbnail size = 75px
- Space between thumbnail images = 8px
- Thumbnail Border = 1px
- Thumbnail border color = A color of none means that you won’t see any border 🙂
- Thumbnail border style = Since the border is not visible this does not matter, but you do have the standard border style options available.
The “prev/next navigation” area allows you to turn on icons for navigating images in expanded mode with a click/touch. When enabled, you get options for color and for the shadow. We use the same settings here as we did for the controls. White and a 0.5 opacity black for the shadow.
Below choose the icon type. The icon size is controlled in Gallery Controls Sizes.
In Slideshow Settings
- Slideshow mode is enabled. This means that your gallery will automatically start progressing through images.
- Choose the option to show the play/pause buttons to give control to the viewer.
- 5100 milliseconds is the length of time each slide will display when playing automatically. Adjust this to taste.
