fancyBox3参数详解 中文文档
2023-06-09 Umming jQuery插件 评论(0) 浏览(1632)
$('.fancy').fancybox({infobar:0,transitionEffect:'circular',loop:1,buttons: ["close"]});
选项
var defaults = {
// 相册循环浏览
loop : false,
// 图片周围的margin，若是视口（viewport）宽度小于800px则忽略
margin : [44, 0],
// Horizontal space between slides
gutter : 50,
// 键盘浏览
keyboard : true,
// 是否在屏幕边缘显示箭头
arrows : true,
// 是否显示infobar (顶部的counter and arrows)
infobar : true,
// 是否显示顶部的toolbar
toolbar : true,
// 控制顶部toolbar里显示的图表
// 经过`btnTpl`选项的模板建立按钮，并被放置在toolbar(class="fancybox-toolbar"`的元素)中
buttons : [
'slideShow',
'fullScreen',
'thumbs',
'share',
//'download',
//'zoom',
'close'
],
// 探测"idle"的时间(秒)
idleTime : 3,
// 是否在右上角显示关闭按钮
// 若是设置为'auto',遇到内容类型为html,inline,ajax时显示
// Use template from `btnTpl.smallBtn` for customization
smallBtn : 'auto',
// 保护文件，禁止右键下载
protect : false,
// Shortcut to make content "modal" - 禁止键盘浏览，隐藏按钮等
modal : false,
image : {
// 预加载
// 须要预约义图片的尺寸
// 设置为'auto'，自动在预览图中缩放
preload : "auto"
},
ajax : {
// 请求 ajax 的配置
settings : {
// 代表请求是从模态框中发起，名字可改
data : {
fancybox : true
}
}
},
iframe : {
// Iframe 模板
tpl : '<iframe id="fancybox-frame{rnd}" name="fancybox-frame{rnd}" class="fancybox-iframe" frameborder="0" vspace="0" hspace="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen allowtransparency="true" src=""></iframe>',
// 预加载
// 因为同源策略，不能加载跨域数据
preload : true,
// 自定义包裹 iframe 的元素的 CSS 样式
// 这样就能够自定义 iframe 的尺寸
css : {},
// iframe 标签属性
attr : {
scrolling : 'auto'
}
},
// 若是内容类型不能自动检测出来，默认值为'image'
defaultType : 'image',
// 打开/关闭动画类型
// 可用的值:
// false - disable
// "zoom" - zoom images from/to thumbnail
// "fade"
// "zoom-in-out"
//
animationEffect : "zoom",
// 打开/关闭动画使用的时间，ms
animationDuration : 500,
// 图片缩放时是够改变透明度
// 若是透明度为'auto'，那么图片和缩略图比例不一致时透明度将会发生改变
zoomOpacity : "auto",
// 滑块动画
//
// 可用的值:
// false - disable
// "fade'
// "slide'
// "circular'
// "tube'
// "zoom-in-out'
// "rotate'
//
transitionEffect : "fade",
// 动画持续时间，ms
transitionDuration : 366,
// 自定义的滑块的 class 值
slideClass : '',
// 自定义的布局的 class 值
baseClass : '',
// 布局的模板
baseTpl :
'<div class="fancybox-container" role="dialog" tabindex="-1">' +
'<div class="fancybox-bg"></div>' +
'<div class="fancybox-inner">' +
'<div class="fancybox-infobar">' +
'<span data-fancybox-index></span> / <span data-fancybox-count></span>' +
'</div>' +
'<div class="fancybox-toolbar">{{buttons}}</div>' +
'<div class="fancybox-navigation">{{arrows}}</div>' +
'<div class="fancybox-stage"></div>' +
'<div class="fancybox-caption-wrap"><div class="fancybox-caption"></div></div>' +
'</div>' +
'</div>',
// 加载中时的模板
spinnerTpl : '<div class="fancybox-loading"></div>',
// 错误时的模板
errorTpl : '<div class="fancybox-error"><p>{{ERROR}}<p></div>',
btnTpl : {
download : '<a download data-fancybox-download class="fancybox-button fancybox-button--download" title="{{DOWNLOAD}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M20,23 L20,8 L20,23 L13,16 L20,23 L27,16 L20,23 M26,28 L13,28 L27,28 L14,28" />' +
'</svg>' +
'</a>',
zoom : '<button data-fancybox-zoom class="fancybox-button fancybox-button--zoom" title="{{ZOOM}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M 18,17 m-8,0 a 8,8 0 1,0 16,0 a 8,8 0 1,0 -16,0 M25,23 L31,29 L25,23" />' +
'</svg>' +
'</button>',
close : '<button data-fancybox-close class="fancybox-button fancybox-button--close" title="{{CLOSE}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M10,10 L30,30 M30,10 L10,30" />' +
'</svg>' +
'</button>',
// 若是'smallBtn'没有设置为 false，默认关闭按钮将会被放置在你的 html/inline/ajax 内容中
smallBtn : '<button data-fancybox-close class="fancybox-close-small" title="{{CLOSE}}"></button>',
// 箭头
arrowLeft : '<button data-fancybox-prev class="fancybox-button fancybox-button--arrow_left" title="{{PREV}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M10,20 L30,20 L10,20 L18,28 L10,20 L18,12 L10,20"></path>' +
'</svg>' +
'</button>',
arrowRight : '<button data-fancybox-next class="fancybox-button fancybox-button--arrow_right" title="{{NEXT}}">' +
'<svg viewBox="0 0 40 40">' +
'<path d="M30,20 L10,20 L30,20 L22,28 L30,20 L22,12 L30,20"></path>' +
'</svg>' +
'</button>'
},
// 模态框放置在哪一个节点中
parentEl : 'body',
// 焦点处理
// ==============
// 打开后焦点在第一个支持焦点的元素上
autoFocus : false,
// 关闭后焦点回到 active 的元素上
backFocus : true,
// 不让用户焦点放在模态框外的内容中
trapFocus : true,
// 模态框配置
// =======================
fullScreen : {
autoStart : false,
},
// 设置 `touch: false` 来禁止拖拽/手指滑动
touch : {
vertical : true, // 容许垂直方向拖拽
momentum : true // Continue movement after releasing mouse/touch when panning
},
// 手动初始化时的 hash 值,
// 设为 `false` 不改变 hash
hash : null,
// 自定义或者添加媒体类型
// 例如:
/* media : { youtube : { params : { autoplay : 0 } } } */
media : {},
slideShow : {
autoStart : false,
speed : 4000
},
thumbs : {
autoStart : false, // 打开的时候展现缩略图
hideOnClose : true, // 关闭动画开始时隐藏缩略图轮廓
parentEl : '.fancybox-container', // Container is injected into this element
axis : 'y' // 垂直 (y) or 水平 (x) 滚动
},
// 使用鼠标滚轮来浏览相册
// 设为 'auto' - 只对图片启用
wheel : 'auto',
// 毁掉函数
//==========
// 更多信息请查看 API
// 例如:
/* afterShow: function( instance, current ) { console.info( 'Clicked element:' ); console.info( current.opts.$orig ); } */
onInit : $.noop, // 实例初始化完成
beforeLoad : $.noop, // 侧栏的内容正在被加载
afterLoad : $.noop, // 侧栏的内容加载完成后
beforeShow : $.noop, // 打开动画开始前
afterShow : $.noop, // 内容加载完成，进行动画的时候
beforeClose : $.noop, // 实例准备关闭的时候，返回 false 值取消关闭
afterClose : $.noop, // 实例关闭后
onActivate : $.noop, // 实例激活的时候
onDeactivate : $.noop, // 其余实例被激活的时候
// 交互
// 使用一下选项自定义用户单击双击等事件
// 每一个选项能够是字符串，或者有返回值的方法
//
// 可用的值:
// "close" - close instance
// "next" - move to next gallery item
// "nextOrClose" - move to next gallery item or close if gallery has only one item
// "toggleControls" - show/hide controls
// "zoom" - zoom image (if loaded)
// false - do nothing
// 内容被点击
clickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
// 侧边栏被点击
clickSlide : 'close',
// 点击模态框外的北京时
clickOutside : 'close',
// 同以前的两个同样，只是是双击的时候
dblclickContent : false,
dblclickSlide : false,
dblclickOutside : false,
// 移动端事件
mobile : {
idleTime : false,
margin : 0,
clickContent : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : false;
},
clickSlide : function( current, event ) {
return current.type === 'image' ? 'toggleControls' : 'close';
},
dblclickContent : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
},
dblclickSlide : function( current, event ) {
return current.type === 'image' ? 'zoom' : false;
}
},
// 国际化
lang : 'en',
i18n : {
'en' : {
CLOSE : 'Close',
NEXT : 'Next',
PREV : 'Previous',
ERROR : 'The requested content cannot be loaded. <br/> Please try again later.',
PLAY_START : 'Start slideshow',
PLAY_STOP : 'Pause slideshow',
FULL_SCREEN : 'Full screen',
THUMBS : 'Thumbnails',
DOWNLOAD : 'Download',
SHARE : 'Share',
ZOOM : 'Zoom'
},
'de' : {
CLOSE : 'Schliessen',
NEXT : 'Weiter',
PREV : 'Zurück',
ERROR : 'Die angeforderten Daten konnten nicht geladen werden. <br/> Bitte versuchen Sie es später nochmal.',
PLAY_START : 'Diaschau starten',
PLAY_STOP : 'Diaschau beenden',
FULL_SCREEN : 'Vollbild',
THUMBS : 'Vorschaubilder',
DOWNLOAD : 'Herunterladen',
SHARE : 'Teilen',
ZOOM : 'Maßstab'
}
}
};
标签: jQuery插件
上一篇： 阿里服务器centos安装宝塔
本文链接：https://www.umming.com/jquery/304.html
声明：本站信息由网友自行发布或来源于网络，真实性、合法性由发布人负责，请仔细甄别！本站只为传递信息，我们不做任何双方证明，也不承担任何法律责任。文章内容若侵犯你的权益，请联系本站删除！
也许你还会对下面的内容感兴趣：