Combined

This gallery combines a large image with a row of thumbnails. It works best if your images are relatively small and have the same dimensions. There are three themes available: Normal, Compact, and Grid.

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutCombined
Script Optionsstrip_control_avia:false
Thumbnails LayoutNormal
Gallery Width1008
Gallery Height730

Custom CSS

.ug-theme-default {
    margin: 0 auto;
}

Explanation: We set the gallery layout to "Combined" in the component inspector and the thumbnails layout to "Normal". We also specify an explicit width and height for the gallery that matches the proportions of our pictures (roughly taking into account the height of the thumbs panel). Since we haven't specified a thumbnail width and height in the inspector, it falls back on the values set on the plugin backend settings page, which are 150 and 100, respectively. We also add a custom script option to disable "avia" control, because it is more annoying than cool. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "default" theme within their container.


Explore various options interactively at UniteGallery.net!


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutCombined
Thumbnails LayoutCompact
Script Optionstheme_panel_position: "top"
Gallery Width1008
Gallery Height730

Custom CSS

.ug-theme-compact,
.ug-theme-grid {
    margin: 0 auto;
}

Explanation: We set the gallery layout to "Combined" in the component inspector and the thumbnails layout to "Compact". We also specify an explicit width and height for the gallery that matches the proportions of our pictures (roughly taking into account the width of the thumbs panel). Since we haven't specified a thumbnail width and height in the inspector, it falls back on the values set on the plugin backend settings page, which are 150 and 100, respectively. We also add a custom script option to display the thumbs panel on the top side of the main image instead of the bottom. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "default" theme within their container.


Explore various options interactively at UniteGallery.net!


  Script options...

Gallery

  Settings used for this example:

Component Inspector

Gallery LayoutCombined
Thumbnails LayoutGrid
Script Optionstheme_panel_position: "right"
Gallery Width1008
Gallery Height630

Custom CSS

.ug-theme-grid {
    margin: 0 auto;
}

Explanation: We set the gallery layout to "Combined" in the component inspector and the thumbnails layout to "Grid". We also specify an explicit width and height for the gallery that matches the proportions of our pictures. Since we haven't specified a thumbnail width and height in the inspector, it falls back on the values set on the plugin backend settings page, which are 150 and 100, respectively. We also add a custom script option to display the thumbs panel on the top right of the main image instead of the bottom. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "grid" theme within their container.


Explore various options interactively at UniteGallery.net!


  Script options...


  All Available Component Inspector Options for Embedded Galleries



  Script options applicable to all "Combined" galleries...

You can read more and see a lot of examples at the UniteGallery website!