Carousel
This gallery displays your images in a row that (optionally) scrolls by itself.
Carousel Layout
Gallery
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 navigationAdditional Options
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!