This gallery displays your images in a row that (optionally) scrolls by itself.
Settings used for this example:
Component Inspector
Gallery Layout | Carousel |
Plugin Backend Settings
Thumbnails → Width | 150 |
Custom CSS
.ug-theme-carousel .ug-thumb-wrapper {
border-color: #3097d1 !important;
}
Explanation: The gallery layout is set to "Carousel" in the component inspector. Since we haven't specified a thumbnail width in the inspector, it falls back on the value set on the plugin backend settings page, which is 150. We add a CSS rule (in a stylesheet that we manually add to our layout) to set the border color to blue for all "ug-thumb-wrapper" elements inside all "ug-theme-carousel" themed galleries.
Explore various options interactively at UniteGallery.net!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "carousel" //This is included automatically if you select this layout in the OctoberCMS component inspector!
tile_width: 160, //tile width - please use the OctoberCMS component inspector to set this option!
tile_height: 160, //tile height - please use the OctoberCMS component inspector to set this option!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
//main options:
theme_gallery_padding: 0, //the padding of the gallery wrapper
theme_carousel_align: "center", //the align of the carousel
theme_carousel_offset: 0, //the offset of the carousel from the align sides
//gallery options:
gallery_theme: "carousel" //choose gallery theme (if more then one themes includes)
gallery_min_width: 150, //gallery minimal width when resizing
gallery_background_color: "", //set custom background color. If not set it will be taken from css.
//carousel options
carousel_padding: 8, //padding at the sides of the carousel
carousel_space_between_tiles: 20, //space between tiles
carousel_navigation_numtiles:3, //number of tiles to scroll when user clicks on next/prev button
carousel_scroll_duration:500, //duration of scrolling to tile
carousel_scroll_easing:"easeOutCubic", //easing of scrolling to tile animation
carousel_autoplay: true, //true,false - autoplay of the carousel on start
carousel_autoplay_timeout: 3000, //autoplay timeout
carousel_autoplay_direction: "right", //left,right - autoplay direction
carousel_autoplay_pause_onhover: true, //pause the autoplay on mouse over
//navigation options
theme_enable_navigation: true,
theme_navigation_position: "bottom", //top,bottom: the vertical position of the navigation reative to the carousel
theme_navigation_enable_play: true, //enable / disable the play button of the navigation
theme_navigation_align: "center", //the align of the navigation
theme_navigation_offset_hor: 0, //horizontal offset of the navigation
theme_navigation_margin: 20, //the space between the carousel and the navigation
theme_space_between_arrows: 5 //the space between arrows in the navigation
All Available Component Inspector Options for Embedded Galleries
Code | OctoberCMS Component Inspector Property | Description |
---|---|---|
alias | Alias | Standard OctoberCMS stuff, you refer to the component in your page via this unique identifier, the default is “embeddedGallery” but you can change it to anything you want (don’t use spaces or special characters though!) |
mediaFolder | Media Folder | Select the folder that you uploaded the images to in the OctoberCMS Media manager. Only folders under the “Base Media Folder” set on the November Gallery settings page are valid. |
maxItems | Max Images | The maximum number of images to display |
sortBy | Order by | Order to display the gallery items in; note: Image Title, Description, and Sort Order only work for images uploaded using the Galleries page! Options are: (1) title / Image Title (2) description / Image Description (3) sortOrder / Image Order in Gallery (4) width / Image Width (5) height / Image Height (6) orientation / Image Orientation (7) fileName / Filename (8) fileSize / File Size (9) uploaded / Date/Time Uploaded; and all options are also available in reverse order (append DESC onto the option code). |
galleryLayout | Gallery Layout | Select a gallery layout; possible values are: (1) default / Default (use the gallery layout set on the plugin settings page) (2) gallery_tiles / Tiles (3) gallery_carousel / Carousel (4) gallery_combined / Combined (5) gallery_slider / Slider |
tilesLayout | Tile Layout | Only applicable if the Gallery Layout is set to “Tiles”; possible values are: (1) default / Default (use the default gallery layout set on the plugin settings page) (2) gallery_tiles_columns / Columns (3) gallery_tiles_justified / Justified (4) gallery_tiles_nested / Nested (5) gallery_tiles_grid / Grid |
combinedLayout | Thumbnails Layout | Only applicable if the Gallery Layout is set to “Combined”; possible values are: (1) default / Default (use the default thumbnails layout set on the plugin settings page) (2) gallery_combined_default / Normal (default) (3) gallery_combined_compact / Compact (4) gallery_combined_grid / Grid |
additionalGalleryOptions | Thumbnail Width | Width of the generated thumbnail; Leave empty or set to 0 to only constrain the image by height; leave both width and height empty to fall back on the values set on the backend plugin configuration page |
imageResizerHeight | Thumbnail Height | Height of the generated thumbnail; Leave empty or set to 0 to only constrain the image by height; leave both width and height empty to fall back on the values set on the backend plugin configuration page |
imageResizerMode | Thumbnail Mode | Select how to resize your images into thumbnails, or select “default” to use the thumbnail mode set on the plugin settings page; possible values are: (1) Default (2) Exact (3) Portrait (4) Landscape (5) Auto (6) Crop |
galleryWidth | Gallery Width | Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
galleryHeight | Gallery Height | Only applies to “Combined” and “Slider” galleries! Can be a number (pixel lenght) or a percent (of the parent container). Leave empty to fall back on the values set on the backend plugin configuration page |
Script options applicable to all "Carousel" galleries...
//tile design options: tile_enable_border:true, //enable border of the tile tile_border_width:3, //tile border width tile_border_color:"#F0F0F0", //tile border color tile_border_radius:0, //tile border radius (applied to border only, not to outline) tile_enable_outline: true, //enable outline of the tile (works only together with the border) tile_outline_color: "#8B8B8B", //tile outline color tile_enable_shadow:true, //enable shadow of the tile tile_shadow_h:1, //position of horizontal shadow tile_shadow_v:1, //position of vertical shadow tile_shadow_blur:3, //shadow blur tile_shadow_spread:2, //shadow spread tile_shadow_color:"#8B8B8B", //shadow color tile_enable_action: true, //enable tile action on click like lightbox tile_as_link: false, //act the tile as link, no lightbox will appear tile_link_newpage: true, //open the tile link in new page tile_enable_overlay: true, //enable tile color overlay (on mouseover) tile_overlay_opacity: 0.4, //tile overlay opacity tile_overlay_color: "#000000", //tile overlay color tile_enable_icons: true, //enable icons in mouseover mode tile_show_link_icon: false, //show link icon (if the tile has a link). In case of tile_as_link this option not enabled tile_space_between_icons: 26, //initial space between icons, (on small tiles it may change) tile_enable_image_effect:false, //enable tile image effect tile_image_effect_type: "bw", //bw, blur, sepia - tile effect type tile_image_effect_reverse: false, //reverce the image, set only on mouseover state //tile text panel options: tile_enable_textpanel: false, //enable textpanel tile_textpanel_source: "title", //title,desc,desc_title. source of the textpanel. desc_title - if description empty, put title tile_textpanel_always_on: false, //textpanel always visible tile_textpanel_appear_type: "slide", //slide, fade - appear type of the textpanel on mouseover tile_textpanel_position:"inside_bottom", //inside_bottom, inside_top, inside_center, top, bottom the position of the textpanel tile_textpanel_offset:0, //vertical offset of the textpanel tile_textpanel_padding_top:8, //textpanel padding top tile_textpanel_padding_bottom:8, //textpanel padding bottom tile_textpanel_padding_right: 11, //cut some space for text from right tile_textpanel_padding_left: 11, //cut some space for text from left tile_textpanel_bg_opacity: 0.4, //textpanel background opacity tile_textpanel_bg_color:"#000000", //textpanel background color tile_textpanel_bg_css:{}, //textpanel background css tile_textpanel_title_color:null, //textpanel title color. if null - take from css tile_textpanel_title_font_family:null, //textpanel title font family. if null - take from css tile_textpanel_title_text_align:null, //textpanel title text align. if null - take from css tile_textpanel_title_font_size:null, //textpanel title font size. if null - take from css tile_textpanel_title_bold:null, //textpanel title bold. if null - take from css tile_textpanel_css_title:{}, //textpanel additional css of the title tile_textpanel_desc_color:null, //textpanel description font family. if null - take from css tile_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css tile_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css tile_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css tile_textpanel_desc_bold:null, //textpanel description bold. if null - take from css tile_textpanel_css_description:{}, //textpanel additional css of the description //lightbox options: lightbox_type: "wide", //compact / wide - lightbox type lightbox_hide_arrows_onvideoplay: true, //hide the arrows when video start playing and show when stop lightbox_arrows_position: "sides", //sides, inside: position of the arrows, used on compact type lightbox_arrows_offset: 10, //The horizontal offset of the arrows lightbox_arrows_inside_offset: 10, //The offset from the image border if the arrows placed inside lightbox_arrows_inside_alwayson: false, //Show the arrows on mouseover, or always on. lightbox_overlay_color:null, //the color of the overlay. if null - will take from css lightbox_overlay_opacity:1, //the opacity of the overlay. for compact type - 0.6 lightbox_top_panel_opacity: null, //the opacity of the top panel lightbox_close_on_emptyspace:true, //close the lightbox on empty space lightbox_show_numbers: true, //show numbers on the right side lightbox_numbers_size: null, //the size of the numbers string lightbox_numbers_color: null, //the color of the numbers lightbox_numbers_padding_top:null, //the top padding of the numbers (used in compact mode) lightbox_numbers_padding_right:null, //the right padding of the numbers (used in compact mode) lightbox_slider_image_border: true, //enable border around the image (for compact type only) lightbox_slider_image_border_width: 10, //image border width lightbox_slider_image_border_color: "#ffffff", //image border color lightbox_slider_image_border_radius: 0, //image border radius lightbox_slider_image_shadow: true, //enable border shadow the image lightbox_slider_control_swipe:true, //true,false - enable swiping control lightbox_slider_control_zoom:true, //true, false - enable zooming control //lightbox text panel: lightbox_show_textpanel: true, //show the text panel lightbox_textpanel_width: 550, //the width of the text panel. wide type only lightbox_textpanel_enable_title: true, //enable the title text lightbox_textpanel_enable_description: false, //enable the description text lightbox_textpanel_padding_top:5, //textpanel padding top lightbox_textpanel_padding_bottom:5, //textpanel padding bottom lightbox_textpanel_padding_right: 11, //cut some space for text from right lightbox_textpanel_padding_left: 11, //cut some space for text from left lightbox_textpanel_title_color:null, //textpanel title color. if null - take from css lightbox_textpanel_title_font_family:null, //textpanel title font family. if null - take from css lightbox_textpanel_title_text_align:null, //textpanel title text align. if null - take from css lightbox_textpanel_title_font_size:null, //textpanel title font size. if null - take from css lightbox_textpanel_title_bold:null, //textpanel title bold. if null - take from css lightbox_textpanel_css_title:{}, //textpanel additional css of the title lightbox_textpanel_desc_color:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css lightbox_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css lightbox_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css lightbox_textpanel_desc_bold:null, //textpanel description bold. if null - take from css lightbox_textpanel_css_description:{}, //textpanel additional css of the description
You can read more and see a lot of examples at the UniteGallery website!