Settings
Breakpoints
Height
Text
Icon
Hover Effect
Lazy Load
Sorting Animation
Customize your galleries thumbnails for your Fluid Infinity gallery. Within the Thumbnails section in the Container widget, you can control the thumbnail settings, height, effects and more.
Settings
Within the Settings drop-down, you may adjust the appearance of your Gallery on load by:
- Selecting its on-load Filter
- Styling the containers of each thumbnail
- Customizing the on-load Loading Bar
- Adjusting the space above the Gallery when a button is clicked
Appearance
Adjust the alignment, spacing and corner radius of the thumbnails within your Gallery. Select the option to place thumbnails within the Gallery randomly. By selecting this option you opt to disable the Comment feature from your Gallery.
Loading Bar
The Loading Bar appears on the load of the page and can be styled through the Container widget. Select the bars thickness, color, and background.
Select the checkbox for the page to scroll to the top of the gallery when a button, like a filter, is selected. Use the Gap entry field to place padding above the gallery when this function is selected.
Breakpoints
Use the Breakpoints dropdown to set the number of thumbnails in one row at each breakpoint. The first breakpoint will be your largest breakpoint, second your second largest and so on. As the browsers width increases and decreases, the number of thumbnails per row will shift accordingly.
Height
Use the drop-down found within the Height section to select whether you would like for your gallery thumbnails to use Pixel, Percentage or Proportional heights. Each measurement can be adjusted for each breakpoint within your project.
Pixel
Use a set height in pixels for each breakpoint.
Percentage
Use a percentage of the current browsers height for each gallery item.
Proportional
Adhere to the items actual proportion as the browser dimensions change.
Text
Use the Text drop-down area to change your thumbnails title and description alignment, animation, and spacing. In this area you can also choose to include or exclude either the title, description or both from your view on your thumbnails.
Position
Align the title and description of each thumbnail to the left, center or right of the thumbnail. Select one of the dropdown options to apply to all thumbnails within your gallery.
Animation
Select a pre-made animation to occur when a thumbnail is hovered over. From these options, the title and description of your thumbnails can either move in or out of the thumbnails container.
Text is moved from view on thumbnail:
Move Out
Text moves into view on thumbnail:
Spacing
The spacing of the thumbnail references the padding and margin of the text given to each thumbnail. Within the Thumbnail text box widget, you can alter the styling of the text as far as color, font, and size. Here, use the areas to control the spacing of each text box item. Each uses pixels as the base unit of measurement.
Inner Spacing
Inner spacing adds padding into the container of the whole text-frame. Use this area to add space around the text within its container.
Outer Spacing
Outer spacing adds a margin on the perimeter of the container of the text-frame in reference to its thumbnail container. Use this area to add space around the entirety of the textbox.
Space Between
The space between the title and description is the area below the title and above the description. Use this area to add vertical spacing between the title and description within the textbox.
Icon
Use the icon dropdown area to apply an icon to each thumbnail included in your gallery. Then, further customize the icons size, position, spacing and animation for each thumbnail in one place.
Size
Determine the size (in pixels) of your thumbnails icon. This value will be used for all breakpoints so it would be best if not created too large to accommodate for smaller breakpoints.
Position
Select from the position drop-down where your icon will be placed in reference to each thumbnails container. From the drop-down, you have the option to align your icon to the center, top and bottom of each thumbnail.
Spacing
Use the spacing around your icon area to give a margin to your icon on each thumbnail. This spacing will be in reference to where the icon is determined to be placed through the positioning above.
Animation
Select a pre-made animation to add to your icon when the thumbnail has been hovered over. These animations are independent of the animations given to the thumbnails using the text animation options found within the Container widget.
Icon starts in view on thumbnail:
Move Out
Scale Out
Icon ends in view on thumbnail:
Hover Effect
Effects applied to your thumbnails once they are hovered over are mastered through the Hover Effect dropdown area. Use this section to customize the setting for the overlay, timing and scaling of each thumbnails effects.
Timing
Control the duration (in seconds) of your thumbnails transitions once the thumbnail has been hovered over. Fast transitions will use smaller numbers like .2 and slower transitions will use larger numbers like 2.
Overlay
The overlay is a cover over your thumbnail when hovered. Use the Overlay section to change the color, blending filter, and the opacity of the overlay when normal and hovered.
Scale
The scale of your image will shift when hovered based on the value you input into the Scale on Hover area. If you would like your image to scale down, use values less than 1. If you would like your image to scale up, use values greater than 1. For instance, if you would like your image to scale up 200% or 2x its loaded size, input 2 into the scale area.
LazyLoad
LazyLoad allows your images to be loaded on to the page as they are needed, speeding up the time it takes for your page to load. You can deselect this feature from the LazyLoad settings.
Methods & Assigning
The Lazy Load feature can be activated by scrolling to the bottom of the gallery or by clicking the Load More button. Choose the Method of loading you would like to use through the drop-down provided within the Lazy Load settings area.
To make your Load More button another object:
- Add a Graphic Style Name for the button into the Lazy Load section
- Create the object your Load More button will be.
- Select the Load More button and create a Graphic Style that is verbatim the Style Name you inputted into the widget.
Below this section input the number of thumbnails you want the gallery to include on-load of the page and how many images the Load More button or scrolling will add to the gallery.
Loading Animation
Use this section to first select where you would like to apply the loading animation that occurs when more thumbnails are being added to the gallery within the page. Here, also, select the pre-made shape of the animation of your gallery.
Further customize this animations loading color, background color and opacity and its size and position on the page. At the bottom of Gallery will place your animation below the already loaded items. Centered on the page will place your loading animation vertically and horizontally centered on the page as more items are loaded to the gallery.
Sorting Animation
Upon load of the page and every load of additional items to the gallery, there is a transition that can be customized through the Sorting Animation area. Use the following areas to create smooth transitions as thumbnails are added to your gallery.
Timing
Input (in seconds) how long your gallery sorting animation should be and the delay of each item as it is added to the page.
Transforming
Transform each thumbnail using rotation, scale and directional values as each thumbnail comes into view. Each value represents the positioning and orientation of each thumbnail upon load of page. For instance if you would like your thumnails to scale in from 200% and rotate 45 degrees then you would input 45 into Rotation and 2 into scale.