Slider
This gallery is similar to the "Combined" gallery without a strip of thumbnails.
Slider Layout
Gallery
Settings used for this example:
Component Inspector
| Gallery Layout | Slider |
| Gallery Width | 1008 |
| Gallery Height | 630 |
Custom CSS
.ug-theme-slider {
margin: 0 auto;
}Explanation: We set the gallery layout to "Slider" in the component inspector. We also specify an explicit width and height for the gallery that matches the proportions of our pictures. We add a CSS rule (in a stylesheet that we manually add to our layout) to center all galleries with the "slider" theme within their container.
Explore various options interactively at UniteGallery.net!
// Options that can be set from the OctoberCMS component inspector:
gallery_theme: "slider" //This is included automatically if you select this layout in the OctoberCMS component inspector!
gallery_width:900, //gallery width - please use the OctoberCMS component inspector to set this option!
gallery_height:500, //gallery height - please use the OctoberCMS component inspector to set this option!
// Gallery Options:
gallery_min_width: 400, //gallery minimal width when resizing
gallery_min_height: 300, //gallery minimal height when resizing
gallery_skin:"default", //default, alexis etc... - the global skin of the gallery. Will change all gallery items by default.
gallery_images_preload_type:"minimal", //all , minimal , visible - preload type of the images.
//minimal - only image nabours will be loaded each time.
//visible - visible thumbs images will be loaded each time.
//all - load all the images first time.
gallery_autoplay:false, //true / false - begin slideshow autoplay on start
gallery_play_interval: 3000, //play interval of the slideshow
gallery_pause_on_mouseover: true, //true,false - pause on mouseover when playing slideshow true/false
gallery_control_thumbs_mousewheel:false, //true,false - enable / disable the mousewheel
gallery_control_keyboard: true, //true,false - enable / disble keyboard controls
gallery_carousel:true, //true,false - next button on last image goes to first image.
gallery_preserve_ratio: true, //true, false - preserver ratio when on window resize
gallery_debug_errors:true, //show error message when there is some error on the gallery area.
gallery_background_color: "", //set custom background color. If not set it will be taken from css.
//slider options:
slider_scale_mode: "fill", //fit: scale down and up the image to always fit the slider
//down: scale down only, smaller images will be shown, don't enlarge images (scale up)
//fill: fill the entire slider space by scaling, cropping and centering the image
slider_scale_mode_media: "fill", //fit, down, full scale mode on media items
slider_scale_mode_fullscreen: "down", //fit, down, full scale mode on fullscreen.Additional 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 "Slider" galleries...
//slider options:
slider_item_padding_top: 0, //padding top of the slider item
slider_item_padding_bottom: 0, //padding bottom of the slider item
slider_item_padding_left: 0, //padding left of the slider item
slider_item_padding_right: 0, //padding right of the slider item
slider_transition: "slide", //fade, slide - the transition of the slide change
slider_transition_speed:300, //transition duration of slide change
slider_transition_easing: "easeInOutQuad", //transition easing function of slide change
slider_control_swipe:true, //true,false - enable swiping control
slider_control_zoom:true, //true, false - enable zooming control
slider_zoom_max_ratio: 6, //max zoom ratio
slider_loader_type: 1, //shape of the loader (1-7)
slider_loader_color:"white", //color of the loader: (black , white)
slider_enable_bullets: false, //enable the bullets onslider element
slider_bullets_skin: "", //skin of the bullets, if empty inherit from gallery skin
slider_bullets_space_between: -1, //set the space between bullets. If -1 then will be set default space from the skins
slider_bullets_align_hor:"center", //left, center, right - bullets horizontal align
slider_bullets_align_vert:"bottom", //top, middle, bottom - bullets vertical algin
slider_bullets_offset_hor:0, //bullets horizontal offset
slider_bullets_offset_vert:10, //bullets vertical offset
slider_enable_arrows: true, //enable arrows onslider element
slider_arrows_skin: "", //skin of the slider arrows, if empty inherit from gallery skin
slider_arrow_left_align_hor:"left", //left, center, right - left arrow horizonal align
slider_arrow_left_align_vert:"middle", //top, middle, bottom - left arrow vertical align
slider_arrow_left_offset_hor:20, //left arrow horizontal offset
slider_arrow_left_offset_vert:0, //left arrow vertical offset
slider_arrow_right_align_hor:"right", //left, center, right - right arrow horizontal algin
slider_arrow_right_align_vert:"middle", //top, middle, bottom - right arrow vertical align
slider_arrow_right_offset_hor:20, //right arrow horizontal offset
slider_arrow_right_offset_vert:0, //right arrow vertical offset
slider_enable_progress_indicator: true, //enable progress indicator element
slider_progress_indicator_type: "pie", //pie, pie2, bar (if pie not supported, it will switch to bar automatically)
slider_progress_indicator_align_hor:"left", //left, center, right - progress indicator horizontal align
slider_progress_indicator_align_vert:"top", //top, middle, bottom - progress indicator vertical align
slider_progress_indicator_offset_hor:16, //progress indicator horizontal offset
slider_progress_indicator_offset_vert:36, //progress indicator vertical offset
slider_progressbar_color:"#ffffff", //progress bar color
slider_progressbar_opacity: 0.6, //progress bar opacity
slider_progressbar_line_width: 5, //progress bar line width
slider_progresspie_type_fill: false, //false is stroke, true is fill - the progress pie type, stroke of fill
slider_progresspie_color1: "#B5B5B5", //the first color of the progress pie
slider_progresspie_color2: "#E5E5E5", //progress pie second color
slider_progresspie_stroke_width: 6, //progress pie stroke width
slider_progresspie_width: 30, //progess pie width
slider_progresspie_height:30, //progress pie height
slider_enable_play_button: true, //true,false - enable play / pause button onslider element
slider_play_button_skin: "", //skin of the slider play button, if empty inherit from gallery skin
slider_play_button_align_hor:"left", //left, center, right - play button horizontal align
slider_play_button_align_vert:"top", //top, middle, bottom - play button vertical align
slider_play_button_offset_hor:40, //play button horizontal offset
slider_play_button_offset_vert:8, //play button vertical offset
slider_enable_fullscreen_button: true, //true,false - enable fullscreen button onslider element
slider_fullscreen_button_skin: "", //skin of the slider fullscreen button, if empty inherit from gallery skin
slider_fullscreen_button_align_hor:"left", //left, center, right - fullscreen button horizonatal align
slider_fullscreen_button_align_vert:"top", //top, middle, bottom - fullscreen button vertical align
slider_fullscreen_button_offset_hor:11, //fullscreen button horizontal offset
slider_fullscreen_button_offset_vert:9, //fullscreen button vertical offset
slider_enable_zoom_panel: true, //true,false - enable the zoom buttons, works together with zoom control.
slider_zoompanel_skin: "", //skin of the slider zoom panel, if empty inherit from gallery skin
slider_zoompanel_align_hor:"right", //left, center, right - zoom panel horizontal align
slider_zoompanel_align_vert:"top", //top, middle, bottom - zoom panel vertical align
slider_zoompanel_offset_hor:12, //zoom panel horizontal offset
slider_zoompanel_offset_vert:10, //zoom panel vertical offset
slider_controls_always_on: true, //true,false - controls are always on, false - show only on mouseover
slider_controls_appear_ontap: true, //true,false - appear controls on tap event on touch devices
slider_controls_appear_duration: 300, //the duration of appearing controls
slider_videoplay_button_type: "square", //square, round - the videoplay button type, square or round
slider_enable_text_panel: false, //true,false - enable the text panel
slider_textpanel_always_on: true, //true,false - text panel are always on, false - show only on mouseover
slider_textpanel_text_valign:"middle", //middle, top, bottom - text vertical align
slider_textpanel_padding_top:10, //textpanel padding top
slider_textpanel_padding_bottom:10, //textpanel padding bottom
slider_textpanel_height: null, //textpanel height. if null it will be set dynamically
slider_textpanel_padding_title_description: 5, //the space between the title and the description
slider_textpanel_padding_right: 11, //cut some space for text from right
slider_textpanel_padding_left: 11, //cut some space for text from left
slider_textpanel_fade_duration: 200, //the fade duration of textpanel appear
slider_textpanel_enable_title: true, //enable the title text
slider_textpanel_enable_description: true, //enable the description text
slider_textpanel_enable_bg: true, //enable the textpanel background
slider_textpanel_bg_color:"#000000", //textpanel background color
slider_textpanel_bg_opacity: 0.4, //textpanel background opacity
slider_textpanel_title_color:null, //textpanel title color. if null - take from css
slider_textpanel_title_font_family:null, //textpanel title font family. if null - take from css
slider_textpanel_title_text_align:null, //textpanel title text align. if null - take from css
slider_textpanel_title_font_size:null, //textpanel title font size. if null - take from css
slider_textpanel_title_bold:null, //textpanel title bold. if null - take from css
slider_textpanel_css_title:{}, //textpanel additional css of the title
slider_textpanel_desc_color:null, //textpanel description font family. if null - take from css
slider_textpanel_desc_font_family:null, //textpanel description font family. if null - take from css
slider_textpanel_desc_text_align:null, //textpanel description text align. if null - take from css
slider_textpanel_desc_font_size:null, //textpanel description font size. if null - take from css
slider_textpanel_desc_bold:null, //textpanel description bold. if null - take from css
slider_textpanel_css_description:{}, //textpanel additional css of the description
slider_textpanel_bg_css:{}, //textpanel background css
You can read more and see a lot of examples at the UniteGallery website!