Slider Gallery Navigation Options

This particular option can be found by logging into your site's admin area and going to:
"ProPhoto" > "Customize" > "First" > "Second"

If you haven’t already done so, you’ll want to check out our Slider Gallery overview.

In addition to the previous and next arrows in Slider galleries, ProPhoto also gives viewers the option of viewing other images in the gallery by way of the Navigation area that appears at the bottom of the gallery.  Simply clicking on one of the buttons in the navigation area will display the image that the button represents.

Slider Gallery Naviation Area Screenshot

In this option area, there are several options for styling how this navigation area can appear.

Slider Gallery Navigation Options Display

1) Navigation Button Format

ProPhoto gives you the option of indicating the number of images in a Slider gallery as either dots, or as numbers.


2) Navigation Button Size

You can edit the navigation button (dots or numbers) size to any pixel setting between 4px and 20px.

3) Navigation Background Color & Opacity

This option allows you to choose the background color of the navigation overlay, along with the transparency of the overlay.  Simply check the “set color” box, then click on the option and the color picker pop-up will appear, along with a slider bar for setting the transparency.

Slider Gallery Navigation Background Color & Transparency Setting

If the “set color” box is not checked, the navigation background color will be inherited from the “slider background color” set in the “Slider Gallery Options” area.

4) Navigation Button Color

Here you can use the color picker to set the color of your navigation buttons to whatever you’d like.

5) Navigation Button Default Opacity

You can set the default opacity of the buttons as they will appear in the navigation area, without being hovered over.  0% transparency means the buttons would be entirely transparent, and 100% means the buttons would have no transparency and would be totally opaque.  Be aware that the button for the image currently being displayed will always no transparency at all, so if this option is set to 100% too, it won’t be evident which image is displaying.

Slider Gallery Navigation Button Totally Opaque

So it will probably be best to set this value to something other than 100%.

6)  Navigation Button Hovered Opacity

Additionally, you can set the opacity of the navigation buttons when they are hovered over.

7)  Vertical Spacing Between Navigation and Images

You can put additional spacing between the navigation area and images in the Slider gallery with this setting.  For example, if set to 30px, you’d get the following result:

Slider Gallery Navigation Area Vertical Spacing Example

If you’ve searched the tutorials and can't find what you need, please contact us. We’re here to help. Contact Us