前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >UNITE Gallery-主题食用文档

UNITE Gallery-主题食用文档

作者头像
Dabenshi
发布2023-05-26 14:50:34
2.1K0
发布2023-05-26 14:50:34
举报
文章被收录于专栏:DabenshiDabenshi
核心:
代码语言:javascript
复制
<head>...
    <!-- UNITE Gallery核心文件 -->
    <script src='unitegallery/js/unitegallery.min.js' type='text/jаvascript'></script>
    <link href='unitegallery/css/unite-gallery.css' rel='stylesheet' type='text/css' />
    <!-- UNITE Gallery主题文件 -->
    <script src='unitegallery/themes/compact/ug-theme-compact.js' type='text/jаvascript'></script>...</head>
<body>
    <div id="gallery">...</div>
    <script type="text/jаvascript">
    jQuery(document).ready(function () {

        jQuery("#gallery").unitegallery({
            gallery_theme: "compact"
        });
    });
    </script>
</body>
用法:
代码语言:javascript
复制
jQuery(document).ready(function(){

jQuery("#gallery").unitegallery({
gallery_theme: "compact",

//theme options

theme_panel_position: "bottom",            //top, bottom, left, right - 拇指面板位置
theme_hide_panel_under_width: 480        //在特定浏览器宽度下隐藏面板,如果为空,则不隐藏

// gallery options

gallery_width:900,                            //gallery 宽度
gallery_height:500,                            //gallery 高度

gallery_min_width: 400,                        //调整大小时库的最小宽度
gallery_min_height: 300,                    //调整大小时库的最小高度

gallery_skin:"default",                        //default, alexis etc... - 画廊的全部皮肤。 默认情况下将更改所有画廊项目.

gallery_images_preload_type:"minimal",        //all , minimal , visible - 全部、最小、可见 - 预加载类型的图像。.
//minimal - only image nabours will be loaded each time.
//visible - 每次都会加载可见的拇指图像.
//all - load all the images first time.

gallery_autoplay:false,                        //true / false - 在开始时开始幻灯片自动播放
gallery_play_interval: 3000,                //幻灯片的播放间隔
gallery_pause_on_mouseover: true,            //true,false - 播放幻灯片时鼠标悬停

gallery_control_thumbs_mousewheel:false,    //true,false - 启用/禁用鼠标滚轮
gallery_control_keyboard: true,                //true,false - 启用/消除键盘控件
gallery_carousel:true,                        //true,false - 最后一个图像上的“下一步”按钮转到第一个图像.

gallery_preserve_ratio: true,                //true, false - 调整窗口大小时的保存比率
gallery_debug_errors:true,                    //当图库区域出现错误时显示错误消息.
gallery_background_color: "",                //设置自定义背景颜色。如果未设置,它将从 css 中获取.

//slider options:

slider_scale_mode: "fill",                    //适合:缩小和放大图像以始终适合滑块
//down: 仅缩小,显示较小的图像,不要放大图像(放大)
//fill: 通过缩放、裁剪和居中图像来填充整个滑块空间
slider_scale_mode_media: "fill",            //fit, down, 媒体项目的全比例模式
slider_scale_mode_fullscreen: "down",        //fit, down, 全屏全比例模式.
slider_item_padding_top: 0,                    //填充滑块项目的顶部
slider_item_padding_bottom: 0,                //填充滑块项的底部
slider_item_padding_left: 0,                //填充滑块项的左侧
slider_item_padding_right: 0,                //滑块项的右侧填充

slider_transition: "slide",                    //fade, slide - 幻灯片变化的过渡
slider_transition_speed:300,                //幻灯片切换的过渡持续时间
slider_transition_easing: "easeInOutQuad",    //幻灯片变化的过渡缓动功能

slider_control_swipe:true,                    //true,false - 启用滑动控制
slider_control_zoom:true,                    //true, false - 启用缩放控制
slider_zoom_max_ratio: 6,                    //最大缩放比
slider_loader_type: 1,                        //形状 (1-7)
slider_loader_color:"white",                //颜色: (black , white)

slider_enable_bullets: false,                //启用项目符号滑块元素
slider_bullets_skin: "",                    //皮肤如果为空,则从库皮肤继承
slider_bullets_space_between: -1,            //设置项目符号之间的空间。 如果 -1 则将设置为皮肤的默认空间
slider_bullets_align_hor:"center",            //left, center, right - 左、中、右 - 项目符号水平对齐
slider_bullets_align_vert:"bottom",            //top, middle, bottom - 项目符号垂直对齐
slider_bullets_offset_hor:0,                //项目符号水平偏移
slider_bullets_offset_vert:10,                //项目符号垂直偏移

slider_enable_arrows: true,                    //启用滑块元素上的箭头
slider_arrows_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,              //左箭头水平偏移
slider_arrow_left_offset_vert:0,              //左箭头垂直偏移

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,               //向右箭头水平偏移
slider_arrow_right_offset_vert:0,               //向右箭头垂直偏移

slider_enable_progress_indicator: true,         //启用进度指示器元素
slider_progress_indicator_type: "pie",         //pie, pie2, bar (不支持 pie, 会自动切换到 bar)
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,     //进度指示器水平偏移
slider_progress_indicator_offset_vert:36,     //进度指示器垂直偏移

slider_progressbar_color:"#ffffff",             //进度条颜色
slider_progressbar_opacity: 0.6,             //进度条不透明度
slider_progressbar_line_width: 5,             //进度条线宽

slider_progresspie_type_fill: false,         //false is stroke, true is fill - the progress pie type, stroke of fill - false 是描边,true 是填充 - 进度条类型,填充描边
slider_progresspie_color1: "#B5B5B5",          //进度条的第一种颜色
slider_progresspie_color2: "#E5E5E5",         //进度条的第二种颜色
slider_progresspie_stroke_width: 6,             //进度条描边宽度
slider_progresspie_width: 30,                 //进度条宽度
slider_progresspie_height:30,                 //进度条高度

slider_enable_play_button: true,             //true,false - 启用滑块元素上的播放/暂停按钮
slider_play_button_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,                //播放按钮水平偏移
slider_play_button_offset_vert:8,                //播放按钮垂直偏移

slider_enable_fullscreen_button: true,         //true,false - 启用全屏按钮滑块元素
slider_fullscreen_button_skin: "",             //滑块全屏按钮的外观,如果为空,则继承自库外观
slider_fullscreen_button_align_hor:"left",   //left, center, right    - 全屏按钮水平对齐
slider_fullscreen_button_align_vert:"top",   //top, middle, bottom - 全屏按钮垂直对齐
slider_fullscreen_button_offset_hor:11,         //全屏按钮水平偏移
slider_fullscreen_button_offset_vert:9,            //全屏按钮垂直偏移

slider_enable_zoom_panel: true,                 //true,false - 启用缩放按钮,与缩放控件配合使用.
slider_zoompanel_skin: "",                     //滑块缩放面板的外观(如果为空,则从库外观继承
slider_zoompanel_align_hor:"right",             //left, center, right - 缩放面板水平对齐
slider_zoompanel_align_vert:"top",               //top, middle, bottom - 缩放面板垂直对齐
slider_zoompanel_offset_hor:12,                    //缩放面板水平偏移
slider_zoompanel_offset_vert:10,                //缩放面板垂直偏移

slider_controls_always_on: true,             //true,false - 控件始终打开,false - 仅在鼠标悬停时显示
slider_controls_appear_ontap: true,             //true,false - 在触摸设备上的点击事件上显示控件
slider_controls_appear_duration: 300,         //显示控件的持续时间
slider_videoplay_button_type: "square",          //square, round - 视频播放按钮类型,方形或圆形

slider_enable_text_panel: false,             //true,false - 启用“文本”面板
slider_textpanel_always_on: true,             //true,false - 文本面板始终打开,false - 仅在鼠标悬停时显示

slider_textpanel_text_valign:"middle",            //middle, top, bottom - 文本垂直对齐
slider_textpanel_padding_top:10,                //文本面板填充顶部
slider_textpanel_padding_bottom:10,                //文本面板底部填充
slider_textpanel_height: null,                    //文本面板高度。如果为 null,则将动态设置
slider_textpanel_padding_title_description: 5,    //标题和说明之间的空格
slider_textpanel_padding_right: 11,                //从右边为文本剪下一些空间
slider_textpanel_padding_left: 11,                //从左边为文本剪下一些空间
slider_textpanel_fade_duration: 200,            //文本面板的淡入淡出持续时间出现
slider_textpanel_enable_title: true,            //启用标题文本
slider_textpanel_enable_description: true,        //启用说明文本
slider_textpanel_enable_bg: true,                //启用文本面板背景
slider_textpanel_bg_color:"#000000",            //文本面板背景色
slider_textpanel_bg_opacity: 0.4,                //文本面板背景不透明度

slider_textpanel_title_color:null,                //文本面板标题颜色。如果为空 - 从 CSS 中获取
slider_textpanel_title_font_family:null,        //文本面板标题字体系列。如果为空 - 从 CSS 中获取
slider_textpanel_title_text_align:null,            //文本面板标题文本对齐。如果为空 - 从 CSS 中获取
slider_textpanel_title_font_size:null,            //文本面板标题字体大小。如果为空 - 从 CSS 中获取
slider_textpanel_title_bold:null,                //文本面板标题加粗。如果为空 - 从 CSS 中获取
slider_textpanel_css_title:{},                    //文本面板标题的附加 CSS

slider_textpanel_desc_color:null,                //文本面板说明字体系列。如果为空 - 从 CSS 中获取
slider_textpanel_desc_font_family:null,            //文本面板说明字体系列。如果为空 - 从 CSS 中获取
slider_textpanel_desc_text_align:null,            //文本面板说明文本对齐。如果为空 - 从 CSS 中获取
slider_textpanel_desc_font_size:null,            //文本面板说明字体大小。如果为空 - 从 CSS 中获取
slider_textpanel_desc_bold:null,                //文本面板说明粗体。如果为空 - 从 CSS 中获取
slider_textpanel_css_description:{},            //文本面板 描述的附加 CSS

slider_textpanel_bg_css:{},                        //文本面板背景 CSS

//thumbs options

thumb_width:88,                                //拇指宽度
thumb_height:50,                            //拇指高度
thumb_fixed_size:true,                        //true,false - 固定/动态缩略图宽度

thumb_border_effect:true,                    //true, false - 指定拇指是否有边框
thumb_border_width: 0,                        //拇指边框宽度
thumb_border_color: "#000000",                //拇指边框颜色
thumb_over_border_width: 0,                    //鼠标悬停状态下的拇指边框宽度
thumb_over_border_color: "#d9d9d9",            //鼠标悬停状态下的拇指边框颜色
thumb_selected_border_width: 1,                //选定状态下的拇指宽度
thumb_selected_border_color: "#d9d9d9",        //选定状态下的拇指边框颜色

thumb_round_corners_radius:0,                //拇指边框半径

thumb_color_overlay_effect: true,            //true,false - 拇指颜色叠加效果,在鼠标悬停和选定状态时释放叠加
thumb_overlay_color: "#000000",                //拇指叠加颜色
thumb_overlay_opacity: 0.4,                    //拇指叠加颜色不透明度
thumb_overlay_reverse:false,                //true,false - 反转覆盖,将仅在选定状态下显示

thumb_image_overlay_effect: false,            //true,false - 图像叠加效果仅对正常状态
thumb_image_overlay_type: "bw",                //bw , blur, sepia - 图像效果叠加的类型,黑白,棕褐色和模糊.

thumb_transition_duration: 200,                //拇指效果过渡持续时间
thumb_transition_easing: "easeOutQuad",        //拇指效果过渡缓动

thumb_show_loader:true,                        //加载拇指时显示拇指加载器
thumb_loader_type:"dark",                    //dark, light - 拇指装载机类型

//stript thumbs panel options

strippanel_padding_top:8,                    //面板顶部的空间
strippanel_padding_bottom:8,                //面板底部的空间

strippanel_padding_left:  0,                //面板左侧间距
strippanel_padding_right: 0,                //面板右侧的空间

strippanel_enable_buttons: false,            //从面板两侧启用按钮
strippanel_buttons_skin: "",                //按钮的皮肤,如果为空,则从库外观继承
strippanel_padding_buttons: 2,                //按钮和面板之间的填充

strippanel_buttons_role : "scroll_strip",   // scroll_strip, advance_item - 侧面按钮的作用

strippanel_enable_handle: true,                //启用网格句柄
strippanel_handle_align: "top",                //top, middle, bottom , left, right, center - 关闭手柄尖端根据面板方向对齐手柄杆
strippanel_handle_offset: 0,                //根据 valign 的车把偏移
strippanel_handle_skin: "",                    //手柄的皮肤,如果为空,则从图库皮肤继承

strippanel_background_color:"",                //条带包装器的背景颜色,如果未设置,它将取自 CSS

strip_thumbs_align: "left",                    //left, center, right, top, middle, bottom - 当拇指小于条带尺寸时对齐.
strip_space_between_thumbs:6,                //拇指之间的空间
strip_thumb_touch_sensetivity:15,              //从 1-100,1 - 最有意义,100 - 最无意义
strip_scroll_to_thumb_duration:500,            //滚动到拇指的持续时间
strip_scroll_to_thumb_easing:"easeOutCubic", //简化滚动到拇指动画
strip_control_avia:true,                    //Avia 控制 - 根据条带位置移动条带
strip_control_touch:true,                    //触摸控制 - 通过拖动条带移动条

});
});

English文档

代码语言:javascript
复制
jQuery(document).ready(function(){

jQuery("#gallery").unitegallery({
gallery_theme: "compact",

//theme options

theme_panel_position: "bottom",            //top, bottom, left, right - thumbs panel position
theme_hide_panel_under_width: 480        //hide panel under certain browser width, if null, don't hide

// gallery options

gallery_width:900,                            //gallery width
gallery_height:500,                            //gallery height

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.
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

//thumbs options

thumb_width:88,                                //thumb width
thumb_height:50,                            //thumb height
thumb_fixed_size:true,                        //true,false - fixed/dynamic thumbnail width

thumb_border_effect:true,                    //true, false - specify if the thumb has border
thumb_border_width: 0,                        //thumb border width
thumb_border_color: "#000000",                //thumb border color
thumb_over_border_width: 0,                    //thumb border width in mouseover state
thumb_over_border_color: "#d9d9d9",            //thumb border color in mouseover state
thumb_selected_border_width: 1,                //thumb width in selected state
thumb_selected_border_color: "#d9d9d9",        //thumb border color in selected state

thumb_round_corners_radius:0,                //thumb border radius

thumb_color_overlay_effect: true,            //true,false - thumb color overlay effect, release the overlay on mouseover and selected states
thumb_overlay_color: "#000000",                //thumb overlay color
thumb_overlay_opacity: 0.4,                    //thumb overlay color opacity
thumb_overlay_reverse:false,                //true,false - reverse the overlay, will be shown on selected state only

thumb_image_overlay_effect: false,            //true,false - images overlay effect on normal state only
thumb_image_overlay_type: "bw",                //bw , blur, sepia - the type of image effect overlay, black and white, sepia and blur.

thumb_transition_duration: 200,                //thumb effect transition duration
thumb_transition_easing: "easeOutQuad",        //thumb effect transition easing

thumb_show_loader:true,                        //show thumb loader while loading the thumb
thumb_loader_type:"dark",                    //dark, light - thumb loader type

//stript thumbs panel options

strippanel_padding_top:8,                    //space from top of the panel
strippanel_padding_bottom:8,                //space from bottom of the panel

strippanel_padding_left:  0,                //space from left of the panel
strippanel_padding_right: 0,                //space from right of the panel

strippanel_enable_buttons: false,            //enable buttons from the sides of the panel
strippanel_buttons_skin: "",                //skin of the buttons, if empty inherit from gallery skin
strippanel_padding_buttons: 2,                //padding between the buttons and the panel

strippanel_buttons_role : "scroll_strip",   // scroll_strip, advance_item - the role of the side buttons

strippanel_enable_handle: true,                //enable grid handle
strippanel_handle_align: "top",                //top, middle, bottom , left, right, center - close handle tip align on the handle bar according panel orientation
strippanel_handle_offset: 0,                //offset of handle bar according the valign
strippanel_handle_skin: "",                    //skin of the handle, if empty inherit from gallery skin

strippanel_background_color:"",                //background color of the strip wrapper, if not set, it will be taken from the css

strip_thumbs_align: "left",                    //left, center, right, top, middle, bottom - the align of the thumbs when they smaller then the strip size.
strip_space_between_thumbs:6,                //space between thumbs
strip_thumb_touch_sensetivity:15,              //from 1-100, 1 - most sensetive, 100 - most unsensetive
strip_scroll_to_thumb_duration:500,            //duration of scrolling to thumb
strip_scroll_to_thumb_easing:"easeOutCubic", //easing of scrolling to thumb animation
strip_control_avia:true,                    //avia control - move the strip according strip moseover position
strip_control_touch:true,                    //touch control - move the strip by dragging it

});
});
本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-11-09,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 核心:
  • 用法:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档